会议监控渲染

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<void> => {
     switch (e.key) {

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)