From 07aa661dba3b3a93bfd34d04a3f23dcddc68d861 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 27 Aug 2024 11:32:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 2 +- src/page/UserVideo/index.tsx | 43 ++---- src/utils/package/monitorAgora.ts | 218 ------------------------------ 3 files changed, 14 insertions(+), 249 deletions(-) delete mode 100644 src/utils/package/monitorAgora.ts diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 89d6d9f..711e3af 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -254,7 +254,7 @@ const Meeting: React.FC = () => { channelId: state.channelId, uid: userInfo.uid, token: state.token, - tokenA: userInfo.roleId === '1' ? '' : state.tokenA, + tokenA: state.tokenA, }) storage.setItem('noViewChatList', 0) window.addEventListener('customStorageChange', handleCustomStorageChange); diff --git a/src/page/UserVideo/index.tsx b/src/page/UserVideo/index.tsx index 867ca87..decea6b 100644 --- a/src/page/UserVideo/index.tsx +++ b/src/page/UserVideo/index.tsx @@ -2,9 +2,7 @@ import { GetPolling } from '@/api/Meeting'; import styles from '@/page/UserVideo/index.module.scss' import { storage } from '@/utils'; -import monitorAgora from '@/utils/package/monitorAgora'; import { CloseOutlined } from '@ant-design/icons'; -import { VideoSourceType } from 'agora-electron-sdk'; import { Button, Select, message } from 'antd'; import { useEffect, useState } from "react"; const UserVideo: React.FC = () => { @@ -29,32 +27,9 @@ const UserVideo: React.FC = () => { }) const [timeNumber, setTimeNumber] = useState(30); const [timeStatus, setTimeStatus] = useState(false); + const [userList, setUserList] = useState([]); useEffect(() => { setUser(userInfo) - monitorAgora.init() - monitorAgora.setJoinChannel({ - channelId: getQueryParameterRegex('channelId'), - uid: userInfo.uid, - token: getQueryParameterRegex('token'), - }) - monitorAgora.registerEventHandler({ - onJoinChannelSuccess: async (info: any, _elapsed: any) => { - console.log(info, '本地') - // await monitorAgora.setupLocalVideo({ - // uid: info.localUid, - // view: document.getElementById(`video-${info.localUid}`), - // channelId: info.channelId, - // sourceType: VideoSourceType.VideoSourceCameraPrimary, - // }) - }, - onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { - console.log(info, remoteUid, '远端') - - }, - onUserOffline: async (info: any, remoteUid: any, _reason: any) => { - console.log(info, remoteUid, '退出') - }, - }) window.addEventListener('customStorageChange', handleCustomStorageChange); return () => { window.removeEventListener('customStorageChange', handleCustomStorageChange); @@ -87,7 +62,9 @@ const UserVideo: React.FC = () => { }, [from.viewPeopleValue]) // 监听缓存变化 const handleCustomStorageChange = async (e: any): Promise => { - // console.log(e); + switch (e.key) { + + } }; // 获取地址栏参数 const getQueryParameterRegex = (name: string): string | null => { @@ -98,7 +75,9 @@ const UserVideo: React.FC = () => { // 获取轮训用户 const getPolling = async (): Promise => { GetPolling(getQueryParameterRegex('channelId')?.split('a')[0] as string, from.viewPeopleValue).then((res: any) => { - console.log(res); + if (res.code === 200) { + setUserList(res.data) + } }) }; return ( @@ -153,9 +132,13 @@ const UserVideo: React.FC = () => {
-
+ { + userList.map((item: any, index: number) => { + return
-
+
+ }) + }
diff --git a/src/utils/package/monitorAgora.ts b/src/utils/package/monitorAgora.ts deleted file mode 100644 index 9777fcb..0000000 --- a/src/utils/package/monitorAgora.ts +++ /dev/null @@ -1,218 +0,0 @@ -import { - createAgoraRtcEngine, - ClientRoleType, - VideoSourceType, - VideoViewSetupMode, - RenderModeType, -} from "agora-electron-sdk"; -import { storage } from ".."; -const option: any = { - appId: 'dcfc466a6ecb4a1f972630065dfb1e75', - token: '', - channelId: '', - uid: '', -} -let rtcEngine: any = ''; - -const monitorAgora = { - // 初始化 - init: async () => { - rtcEngine = createAgoraRtcEngine(); - await rtcEngine.initialize({ - appId: option.appId, - }); - await monitorAgora.setDeviceManager() - }, - // 获取当前设备是否存在不存在就获取默认设备 - setDeviceManager: async (bool: boolean = false) => { - const setting = await JSON.parse(storage.getItem('setting') as string) - // 摄像头 - if (setting.videoDeviceId) { - await monitorAgora.getVideoDeviceManager().then(async (res) => { - let item = res.list.find((item: any) => item.deviceId === setting.videoDeviceId); - if (item) { - await monitorAgora.setVideoDeviceManager(setting.videoDeviceId) - } else { - await monitorAgora.setVideoDeviceManager(await rtcEngine.getVideoDeviceManager().getDevice()) - setting.videoDeviceId = await rtcEngine.getVideoDeviceManager().getDevice() - } - }) - } else { - await monitorAgora.setVideoDeviceManager(await rtcEngine.getVideoDeviceManager().getDevice()) - setting.videoDeviceId = await rtcEngine.getVideoDeviceManager().getDevice() - } - - // 播放设备 - if (setting.playBackDeviceId) { - await monitorAgora.getAudioMediaList().then(async (res) => { - let item = res.playBackList.find((item: any) => item.deviceId === setting.playBackDeviceId); - if (item) { - await monitorAgora.setPlaybackDevice(setting.playBackDeviceId) - } else { - await monitorAgora.setPlaybackDevice(res.playBackItem.deviceId) - setting.playBackDeviceId = res.playBackItem.deviceId - } - }) - } else { - let deviceId = await rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice().deviceId; - await monitorAgora.setPlaybackDevice(deviceId) - setting.playBackDeviceId = deviceId - } - - // 音频设备 - if (setting.ecordingDeviceId) { - await monitorAgora.getAudioMediaList().then(async (res) => { - let item = res.ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId); - if (item) { - await monitorAgora.setRecordingDevice(setting.ecordingDeviceId) - } else { - await monitorAgora.setRecordingDevice(res.ecordingItem.deviceId) - setting.ecordingDeviceId = res.ecordingItem.deviceId - } - }) - } else { - let deviceId = await rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice().deviceId; - await monitorAgora.setRecordingDevice(deviceId) - setting.ecordingDeviceId = deviceId - } - setTimeout(async () => { - storage.setItem('setting', JSON.stringify(setting)) - if (bool) { - const setting = await JSON.parse(storage.getItem('setting') as string) - if (setting.videoDeviceId) monitorAgora.setVideoDeviceManager(setting.videoDeviceId) //指定摄像头头采集设备 - if (setting.playBackDeviceId) monitorAgora.setPlaybackDevice(setting.playBackDeviceId) //指定播放设备 - if (setting.playBackVolume) monitorAgora.setPlaybackDeviceVolume(setting.playBackVolume) // 设置播放设备音量 - if (setting.ecordingDeviceId) monitorAgora.setRecordingDevice(setting.ecordingDeviceId) // 设置音频采集设备 - if (setting.ecordingVolume) monitorAgora.setRecordingDeviceVolume(setting.ecordingVolume) // 设置音频设备音量 - } - }, 1000); - }, - // 事件回调 - registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline }: any) => { - rtcEngine.registerEventHandler({ - // 监听本地用户加入频道事件 - onJoinChannelSuccess: async (info: any, elapsed: any) => { - await onJoinChannelSuccess(info, elapsed) - }, - // 监听远端用户加入频道事件 - onUserJoined: async (info: any, remoteUid: any, elapsed: any) => { - await onUserJoined(info, remoteUid, elapsed) - }, - // 监听用户离开频道事件 - onUserOffline: async (info: any, remoteUid: any, reason: any) => { - await onUserOffline(info, remoteUid, reason) - }, - }); - }, - // 加入频道 - setJoinChannel: async (data: any) => { - option.token = data.token; - option.channelId = data.channelId; - option.uid = Number(data.uid); - await monitorAgora.JoinChannelEx() - }, - // 所有用户加入的第二个房间 - JoinChannelEx: async () => { - await rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, { - format: { - width: 640, - height: 360, - fps: 15, - } - }) - await rtcEngine.joinChannelEx( - option.token, - { channelId: option.channelId, localUid: Number(option.uid) }, - { - autoSubscribeAudio: false,//设置是否自动订阅所有音频流 - autoSubscribeVideo: false,//设置是否自动订阅所有视频流 - publishMicrophoneTrack: false,//设置是否发布麦克风采集到的音频 - publishCameraTrack: true,//设置是否发布摄像头采集的视频 - clientRoleType: ClientRoleType.ClientRoleBroadcaster,//用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众 - publishScreenTrack: false,//设置是否发布屏幕采集的视频 - } - ); - }, - // 本地加入 - setupLocalVideo: async (item: any) => { - if (item.view?.childNodes.length === 0) { - await rtcEngine.setupLocalVideo({ - renderMode: RenderModeType.RenderModeHidden, - sourceType: item.sourceType, - uid: item.uid, - view: item.view, - setupMode: VideoViewSetupMode.VideoViewSetupAdd, - }); - } - }, - // 远端加入 - setupRemoteVideoJoin: async (item: any) => { - if (item.view?.childNodes.length === 0) { - await rtcEngine.setupRemoteVideo( - { - renderMode: RenderModeType.RenderModeHidden, - sourceType: VideoSourceType.VideoSourceRemote, - uid: item.uid, - view: item.view, - setupMode: VideoViewSetupMode.VideoViewSetupAdd, - }, - { channelId: item.channelId }, - ); - } - }, - // 退出 - setupRemoteVideo: async (item: any) => { - await rtcEngine.setupRemoteVideo( - { - renderMode: RenderModeType.RenderModeHidden, - sourceType: VideoSourceType.VideoSourceRemote, - uid: item.uid, - view: item.view, - setupMode: VideoViewSetupMode.VideoViewSetupRemove, - }, - ); - }, - // 销毁 - release: async () => { - await rtcEngine.release() - }, - // 获取系统中所有的视频设备列表。 - getVideoDeviceManager: async (): Promise => { - return { - list: rtcEngine.getVideoDeviceManager().enumerateVideoDevices(), - item: rtcEngine.getVideoDeviceManager().getDevice() - } - }, - // 通过设备 ID 指定视频采集设备。 - setVideoDeviceManager: async (deviceIdUTF8: string) => { - await rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8) - }, - // 获取输入输出设备列表 - getAudioMediaList: async () => { - return { - playBackList: rtcEngine.getAudioDeviceManager().enumeratePlaybackDevices(), - ecordingList: rtcEngine.getAudioDeviceManager().enumerateRecordingDevices(), - playBackItem: rtcEngine.getAudioDeviceManager().getPlaybackDefaultDevice(), - ecordingItem: rtcEngine.getAudioDeviceManager().getRecordingDefaultDevice(), - ecordingVolume: rtcEngine.getAudioDeviceManager().getRecordingDeviceVolume(), - } - }, - // 指定播放设备 - setPlaybackDevice: async (deviceId: string) => { - await rtcEngine.getAudioDeviceManager().setPlaybackDevice(deviceId) - }, - // 设置音频采集设备 - setRecordingDevice: async (deviceId: string) => { - await rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId) - }, - // 设置播放设备音量 - setPlaybackDeviceVolume: async (volume: number) => { - await rtcEngine.getAudioDeviceManager().setPlaybackDeviceVolume(volume) - }, - // 设置音频设备音量 - setRecordingDeviceVolume: async (volume: number) => { - await rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume) - }, -} - -export default monitorAgora; \ No newline at end of file