远程设备控制

src/components/EquipmentManagement/index.module.scss

@@ -3,6 +3,7 @@
     >div {
       display: flex;
       align-items: center;
+      margin-bottom: 10px;
 
       >span {
         color: #EEEEEE;
@@ -15,5 +16,6 @@
   >div:nth-child(2) {
     display: flex;
     justify-content: center;
+    margin-top: 20px;
   }
 }

src/components/EquipmentManagement/index.tsx

@@ -1,18 +1,30 @@
 import styles from '@/components/EquipmentManagement/index.module.scss'
-import { Button, Modal } from 'antd';
+import { onInvoke } from '@/utils/package/signalr';
+import { Button, Modal, Select } from 'antd';
 import { useState, useImperativeHandle, forwardRef } from "react";
-// import { agora } from '@/utils/package/agora';
 const EquipmentManagement = forwardRef((_props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
-    changeModal: () => {
+    changeModal: async (uid: string, userName: string) => {
+      setCallerUid(uid)
+      setDeviceInfo({})
+      await onInvoke('getDrivers', {
+        uid
+      })
+      setUserName(userName)
       setEquipmentManagementModal(true)
+    },
+    setData: (data: any) => {
+      setDeviceInfo(data)
     }
   }))
   const [equipmentManagementModal, setEquipmentManagementModal] = useState(false)
+  const [callerUid, setCallerUid] = useState('')
+  const [deviceInfo, setDeviceInfo] = useState<any>({})
+  const [userName, setUserName] = useState<any>({})
   return (
     <>
       <Modal
-        title="设备管理"
+        title={`设备管理(${userName})`}
         open={equipmentManagementModal}
         footer={null}
         centered
@@ -24,20 +36,47 @@ const EquipmentManagement = forwardRef((_props: any, ref: any) => {
           <div>
             <div>
               <span>摄像头</span>
-
+              <Select
+                placeholder={deviceInfo?.videoList?.length ? '请选择设备' : '未检测到摄像头'}
+                options={deviceInfo?.videoList} style={{ flexGrow: 1 }}
+                value={deviceInfo?.videoDeviceId} onChange={async (e) => {
+                  setDeviceInfo({
+                    ...deviceInfo,
+                    videoDeviceId: e
+                  })
+                }} />
             </div>
             <div>
               <span>麦克风</span>
-
+              <Select
+                placeholder={deviceInfo?.ecordingList?.length ? '请选择设备' : '未检测到麦克风'}
+                options={deviceInfo?.ecordingList} style={{ flexGrow: 1 }}
+                value={deviceInfo?.ecordingDeviceId} onChange={async (e) => {
+                  setDeviceInfo({
+                    ...deviceInfo,
+                    ecordingDeviceId: e
+                  })
+                }} />;
             </div>
             <div>
               <span>扬声器</span>
-
+              <Select
+                placeholder={deviceInfo?.playBackList?.length ? '请选择设备' : '未检测到麦克风'}
+                options={deviceInfo?.playBackList} style={{ flexGrow: 1 }}
+                value={deviceInfo?.playBackDeviceId} onChange={async (e) => {
+                  setDeviceInfo({
+                    ...deviceInfo,
+                    playBackDeviceId: e
+                  })
+                }} />;
             </div>
           </div>
           <div>
             <Button type="primary" className='m-ant-btn' onClick={() => {
-
+              onInvoke('setDrivers', {
+                uid: callerUid,
+                driversJsonString: JSON.stringify(deviceInfo)
+              })
             }}>确定</Button>
             <Button type="primary"
               style={{ backgroundColor: '#31353A', marginLeft: '10px' }}

src/page/Meeting/index.tsx

@@ -457,11 +457,55 @@ const Meeting: React.FC = () => {
           break;
         // 设备列表
         case 'DriverList':
-          console.log(item);
+          const setting = JSON.parse(storage.getItem('setting') as string)
+          Promise.all([
+            agora.getVideoDeviceManager(),
+            agora.getAudioMediaList(),
+          ]).then((res) => {
+            const data = {
+              videoList: res[0].list.map((row: any) => {
+                return {
+                  value: row.deviceId,
+                  label: row.deviceName
+                }
+              }),
+              videoDeviceId: setting.videoDeviceId,
+              ecordingList: res[1].ecordingList.map((row: any) => {
+                return {
+                  value: row.deviceId,
+                  label: row.deviceName
+                }
+              }),
+              ecordingDeviceId: setting.ecordingDeviceId,
+              playBackList: res[1].playBackList.map((row: any) => {
+                return {
+                  value: row.deviceId,
+                  label: row.deviceName
+                }
+              }),
+              playBackDeviceId: setting.playBackDeviceId,
+            }
+            onInvoke('sendDrivers', {
+              uid: item.callerUid,
+              driversJsonString: JSON.stringify(data)
+            })
+          })
           break;
         // 设置设备
-        case 'SetDriver':
+        case 'SaveDriver':
-          console.log(item);
+          if (item.driver) {
+            const data = JSON.parse(item.driver);
+            await agora.setVideoDeviceManager(data.videoDeviceId)
+            await agora.setRecordingDevice(data.ecordingDeviceId)
+            await agora.setPlaybackDevice(data.playBackDeviceId)
+          }
+          break;
+        // 显示设备列表
+        case 'ShowDriverList':
+          if (item.driversJsonString) {
+            const data = JSON.parse(item.driversJsonString);
+            equipmentManagementRef.current.setData(data)
+          }
           break;
       }
     })
@@ -909,7 +953,8 @@ const Meeting: React.FC = () => {
         await postOpenCamera(true, user.uid)
         break;
       case '设置':
-        stupWizardRef.current.changeModal()
+        equipmentManagementRef.current.changeModal('26', '杨洁')
+        // stupWizardRef.current.changeModal()
         break;
       case '邀请人员':
         await getUserRoomInfo().then(async (res) => {
@@ -1130,8 +1175,8 @@ const Meeting: React.FC = () => {
     }, 0);
   }
   // 设备管理
-  const equipmentManagement = (uid: string, userName: string): void => {
+  const equipmentManagement = async (uid: string, userName: string): Promise<void> => {
-    equipmentManagementRef.current.changeModal()
+    equipmentManagementRef.current.changeModal(uid, userName)
   }
   // 开关麦克风
   const postOpenMicr = async (enableMicr: boolean, uid: string, isAll: boolean = false): Promise<void> => {

src/utils/package/signalr.ts

@@ -161,18 +161,26 @@ export const onSignalr = (callBack: Function) => {
       })
     });
     // 设备列表
-    connection.on("DriverList", () => {
+    connection.on("DriverList", (callerUid: string) => {
       callBack({
-        key: 'DriverList'
+        key: 'DriverList',
+        callerUid
       })
     });
     // 设置设备
-    connection.on("SetDriver", (driver:string) => {
+    connection.on("SaveDriver", (driver: string) => {
       callBack({
-        key: 'SetDriver',
+        key: 'SaveDriver',
         driver
       })
     });
+    // 显示设备列表
+    connection.on("ShowDriverList", (driversJsonString: string) => {
+      callBack({
+        key: 'ShowDriverList',
+        driversJsonString
+      })
+    });
   }
 }
 export const offSignalr = () => {
@@ -193,6 +201,7 @@ export const offSignalr = () => {
     connection.off('Watch');
     connection.off('DriverList');
     connection.off('SetDriver');
+    connection.off('ShowDriverList');
   }
 }
 export const onInvoke = async (str: string, data: any) => {
@@ -204,6 +213,18 @@ export const onInvoke = async (str: string, data: any) => {
       // 4:屏幕共享
       await connection.invoke(str, data.roomNum, data.type)
       break;
+    case 'getDrivers':
+      // 获取某个人的设备列表
+      await connection.invoke(str, data.uid)
+      break;
+    case 'sendDrivers':
+      // 发送设备列表给某个人
+      await connection.invoke(str, data.uid, data.driversJsonString)
+      break;
+    case 'setDrivers':
+      // 设置某个人的设备列表
+      await connection.invoke(str, data.uid, data.driversJsonString)
+      break;
   }
 }
 export const onStop = async () => {