diff --git a/src/page/UserVideo/index.tsx b/src/page/UserVideo/index.tsx index 33f9117..d561162 100644 --- a/src/page/UserVideo/index.tsx +++ b/src/page/UserVideo/index.tsx @@ -2,6 +2,7 @@ import { GetPolling } from '@/api/Meeting'; import styles from '@/page/UserVideo/index.module.scss' import { storage } from '@/utils'; +import agora from '@/utils/package/agora'; import { CloseOutlined } from '@ant-design/icons'; import { Button, Select, message } from 'antd'; import { useEffect, useState } from "react"; @@ -31,6 +32,7 @@ const UserVideo: React.FC = () => { useEffect(() => { setUser(userInfo) window.addEventListener('customStorageChange', handleCustomStorageChange); + agora.meetingMonitoringInit(); return () => { window.removeEventListener('customStorageChange', handleCustomStorageChange); } @@ -60,6 +62,16 @@ const UserVideo: React.FC = () => { useEffect(() => { getPolling() }, [from.viewPeopleValue]) + + useEffect(() => { + userList.forEach((item: any) => { + agora.meetingMonitoringSetupRemoteVideoJoin({ + uid: Number('1' + item.screenShareId), + view: document.getElementById(`video-${item.uid}`), + channelId: getQueryParameterRegex('channelId'), + }) + }) + }, [userList]) // 监听缓存变化 const handleCustomStorageChange = async (e: any): Promise => { switch (e.key) { diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 0753dae..90fe422 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -18,6 +18,7 @@ const option: any = { screenShareId: '', } let rtcEngine: any = ''; +let meetingMonitoringrtcEngine: any = ''; const agora = { // 初始化 @@ -28,6 +29,28 @@ const agora = { }); await agora.setDeviceManager(bool) }, + // 会议监控初始化 + meetingMonitoringInit: async () => { + meetingMonitoringrtcEngine = createAgoraRtcEngine(); + await meetingMonitoringrtcEngine.initialize({ + appId: option.appId, + }); + }, + // 会议监控远端加入 + meetingMonitoringSetupRemoteVideoJoin: async (item: any) => { + if (item.view?.childNodes.length === 1) { + await meetingMonitoringrtcEngine.setupRemoteVideo( + { + renderMode: agora.getRrenderMode(item.uid), + sourceType: VideoSourceType.VideoSourceRemote, + uid: item.uid, + view: item.view, + setupMode: VideoViewSetupMode.VideoViewSetupAdd, + }, + { channelId: item.channelId }, + ); + } + }, // 获取当前设备是否存在不存在就获取默认设备 setDeviceManager: async (bool: boolean = false) => { const setting = await JSON.parse(storage.getItem('setting') as string)