远程设备控制
This commit is contained in:
parent
e40ff8c931
commit
edf7ce3629
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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' }}
|
||||
|
|
|
|||
|
|
@ -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':
|
||||
console.log(item);
|
||||
case 'SaveDriver':
|
||||
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 => {
|
||||
equipmentManagementRef.current.changeModal()
|
||||
const equipmentManagement = async (uid: string, userName: string): Promise<void> => {
|
||||
equipmentManagementRef.current.changeModal(uid, userName)
|
||||
}
|
||||
// 开关麦克风
|
||||
const postOpenMicr = async (enableMicr: boolean, uid: string, isAll: boolean = false): Promise<void> => {
|
||||
|
|
|
|||
|
|
@ -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 () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue