preload.js

@@ -1,7 +1,7 @@
 // // 在 preload 脚本中。
 const { default: createAgoraRtcEngine } = require('agora-electron-sdk')
 const { ipcRenderer } = require('electron')
-let rtcEngine = createAgoraRtcEngine()
+let rtcEngine;
 window.electron = {
     // 设置窗口大小
     setMainWindowSize: (config) => {
@@ -71,7 +71,15 @@ window.electron = {
     closeMonitorWindow: () => {
         ipcRenderer.invoke('closeMonitorWindow')
     },
-    getrtcEngine: () => {
+    // 获取rtcEngine
+    getRtcEngine: () => {
         return rtcEngine
     },
+    // 设置rtcEngine
+    setRtcEngine: () => {
+        rtcEngine = createAgoraRtcEngine();
+        rtcEngine.initialize({
+            appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
+        });
+    },
 }

src/components/JoinSetting/index.tsx

@@ -150,7 +150,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
                       setJoinRoomSettingForm(list)
                       if (index === 1) {
                         if (list[index].active) {
-                          agora.startPreview('videoPreview', Number(user.account))
+                          agora.startPreview('videoPreview', Number(user.screenShareId))
                         }
                       }
                     } else {

src/components/StupWizard/index.tsx

@@ -166,7 +166,7 @@ const VideoComponents = () => {
             })
             if (setting.videoDeviceId && list.length) {
                 await agora.setVideoDeviceManager(setting.videoDeviceId)
-                await agora.startPreview('videoPreview', Number(userInfo.account))
+                await agora.startPreview('videoPreview', Number(userInfo.screenShareId))
             }
         })
     }

src/page/Meeting/index.tsx

@@ -85,13 +85,13 @@ const Meeting: React.FC = () => {
         active: false,
         select: false,
       },
-      // {
+      {
-      //   title: '会议监控',
+        title: '会议监控',
-      //   icon: ImageUrl.icon48,
+        icon: ImageUrl.icon48,
-      //   iconSelect: ImageUrl.icon48Select,
+        iconSelect: ImageUrl.icon48Select,
-      //   active: false,
+        active: false,
-      //   select: false,
+        select: false,
-      // },
+      },
       {
         title: '录制',
         icon: ImageUrl.icon27,
@@ -188,48 +188,54 @@ const Meeting: React.FC = () => {
     agora.init(true)
     agora.registerEventHandler({
       onJoinChannelSuccess: async (info: any, _elapsed: any) => {
-        if (String(info.localUid).length !== 9) {
+        if (info.channelId === state.channelId) {
-          await getJoin(state.enableMicr, state.enableCamera)
+          if (String(info.localUid).length !== 9) {
-          setTimeout(async () => {
+            await getJoin(state.enableMicr, state.enableCamera)
-            await agora.setupLocalVideo({
+            setTimeout(async () => {
-              uid: Number(info.localUid),
+              await agora.setupLocalVideo({
-              view: document.getElementById(`video-${info.localUid}`),
+                uid: Number(info.localUid),
-              channelId: info.channelId,
+                view: document.getElementById(`video-${info.localUid}`),
-              sourceType: VideoSourceType.VideoSourceCameraPrimary,
+                channelId: info.channelId,
-            })
+                sourceType: VideoSourceType.VideoSourceCameraPrimary,
-            getShowUser();
+              })
-          }, 1000);
+              getShowUser();
+            }, 1000);
+          }
         }
       },
       onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
-        if (String(remoteUid).length === 9) {
+        if (info.channelId === state.channelId) {
-          setIsShare(remoteUid)
+          if (String(remoteUid).length === 9) {
-        } else {
+            setIsShare(remoteUid)
-          setTimeout(async () => {
+          } else {
-            await agora.setupRemoteVideoJoin({
+            setTimeout(async () => {
-              uid: Number(remoteUid),
+              await agora.setupRemoteVideoJoin({
-              view: document.getElementById(`video-${remoteUid}`),
+                uid: Number(remoteUid),
-              channelId: info.channelId,
+                view: document.getElementById(`video-${remoteUid}`),
-            })
+                channelId: info.channelId,
-          }, 1000);
+              })
+            }, 1000);
+          }
         }
       },
       onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
-        if (String(remoteUid).length === 9) {
+        if (info.channelId === state.channelId) {
-          setIsShare(null)
+          if (String(remoteUid).length === 9) {
-          renderVideo()
+            setIsShare(null)
-        }
+            renderVideo()
-        await agora.setupRemoteVideo({
-          uid: Number(remoteUid),
-          view: null,
-          channelId: info.channelId,
-        });
-        setCurrentVideoId((res: any) => {
-          if (Number(res) === remoteUid) {
-            getShowUser();
           }
-          return res
+          await agora.setupRemoteVideo({
-        })
+            uid: Number(remoteUid),
+            view: null,
+            channelId: info.channelId,
+          });
+          setCurrentVideoId((res: any) => {
+            if (Number(res) === remoteUid) {
+              getShowUser();
+            }
+            return res
+          })
+        }
       },
       onAudioVolumeIndication: async (speakers: any) => {
         speakers.forEach((item: any) => {
@@ -241,11 +247,15 @@ const Meeting: React.FC = () => {
         });
       }
     })
-    agora.startCameraCapture()
+    if (state.enableCamera) {
+      agora.startCameraCapture()
+    }
     agora.setJoinChannel({
       channelId: state.channelId,
       uid: userInfo.uid,
+      screenShareId: userInfo.screenShareId,
       token: state.token,
+      tokenA: state.tokenA,
     })
     storage.setItem('noViewChatList', 0)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
@@ -465,6 +475,18 @@ const Meeting: React.FC = () => {
             pauseOnHover: false,
           });
           break;
+        // 管理员查看随机用户
+        case 'Watch':
+          if (userInfo.roleId !== '1') {
+            let userId = item.watchUids.find((uid: any) => uid === userInfo.uid)
+            if (userId) {
+              await agora.startCameraCapture()
+            } else {
+              await agora.stopCameraCapture();
+            }
+            agora.updateChannelMediaOptionsEx(userId ? true : false)
+          }
+          break;
       }
     })
     return () => {
@@ -915,7 +937,7 @@ const Meeting: React.FC = () => {
         break;
       case '会议监控':
         window.electron.oepnWindow({
-          url: location.origin + '/#/userVideo'
+          url: location.origin + `/#/userVideo?channelId=${state.channelId + '1'}&token=${state.tokenA}`
         })
         break;
     }

src/render.d.ts

@@ -16,8 +16,9 @@ export interface IElectronAPI {
     quitAndInstall: (callBack: Function) => void;
     getVersion: () => Promise<string>;
     oepnWindow: (data: any) => any;
+    getRtcEngine: () => any;
+    setRtcEngine: () => any;
 
-    getrtcEngine: () => any;
     closeMonitorWindow: () => void
 }
 

src/utils/package/agora.ts

@@ -1,5 +1,4 @@
 import {
-  createAgoraRtcEngine,
   ClientRoleType,
   VideoSourceType,
   VideoViewSetupMode,
@@ -10,7 +9,6 @@ import {
 import { GetRoomRtcToken } from "@/api/Home/Index";
 import { storage } from '@/utils';
 const option: any = {
-  appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
   token: '',
   tokenA: '',
   channelId: '',
@@ -21,10 +19,8 @@ let rtcEngine: any = '';
 export const agora = {
   // 初始化
   init: async (bool: boolean = false) => {
-    rtcEngine = createAgoraRtcEngine();
+    await window.electron.setRtcEngine()
-    await rtcEngine.initialize({
+    rtcEngine = window.electron.getRtcEngine()
-      appId: option.appId,
-    });
     await agora.setDeviceManager(bool)
   },
   //  获取rtcEngine