优化

src/App.tsx

@@ -14,7 +14,7 @@ import JoinMeetingModal from "@/components/JoinMeetingModal";
 import UpdateModal from "@/components/UpdateModal";
 import * as CryptoJS from 'crypto-js';
 import { PostLogin } from "@/api/Login";
-import agora from "@/utils/package/agora";
+import { agora } from "@/utils/package/agora";
 import QuitTips from "@/components/QuitTips";
 import { GetLeave } from "@/api/Meeting";
 import UserVideo from "./page/UserVideo";
@@ -33,7 +33,7 @@ const App: React.FC = () => {
     });
     const [spinning, setSpinning] = useState(false);
     const [isState, setIsState] = useState(true);
-    if (location.href.indexOf('#/userVideo') === -1) {
+    if (location.href.indexOf('/userVideo') === -1) {
         useEffect(() => {
             let userInfo = JSON.parse(storage.getItem('user') as string)
             let loginInfo = JSON.parse(storage.getItem('login') as string)
@@ -150,7 +150,7 @@ const App: React.FC = () => {
             if (location.href.indexOf('/login') !== -1) {
                 onStop()
             }
-            if (location.href.indexOf('#/meeting') === -1) {
+            if (location.href.indexOf('/meeting') === -1) {
                 window.electron.closeMonitorWindow()
             }
         }, [navigate])

src/components/JoinSetting/index.tsx

@@ -7,7 +7,7 @@ import { useState, useImperativeHandle, forwardRef } from "react";
 import { PostRefresh } from '@/api/Login';
 import Avatar from '@/components/Avatar';
 import { useNavigate } from 'react-router-dom';
-import agora from '@/utils/package/agora';
+import { agora } from '@/utils/package/agora';
 let time = null as any;
 const JoinSetting = forwardRef((_props: any, ref: any) => {
   useImperativeHandle(ref, () => ({

src/components/StupWizard/index.tsx

@@ -2,7 +2,7 @@ import styles from '@/components/StupWizard/index.module.scss'
 import ImageUrl from '@/utils/package/imageUrl';
 import { Button, Checkbox, Empty, Input, message, Modal, Popover, Radio, Select, Slider } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import agora from '@/utils/package/agora'
+import { agora } from '@/utils/package/agora'
 import { CloseOutlined, LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { storage } from '@/utils';
 import path from 'path';

src/page/Meeting/index.tsx

@@ -10,7 +10,7 @@ import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
 import { GetRoomUser, PostOpenMicr, PostOpenCamera, GetLeaveAll, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser, GetJoin, GetLeave, PostMuteAll, GetRoomUserItem, GetApplySpeak } from '@/api/Meeting';
 import ImageUrl from '@/utils/package/imageUrl'
-import agora from '@/utils/package/agora'
+import { agora } from '@/utils/package/agora'
 import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';

src/page/UserVideo/index.tsx

@@ -2,9 +2,9 @@
 import { GetPolling } from '@/api/Meeting';
 import styles from '@/page/UserVideo/index.module.scss'
 import { storage } from '@/utils';
-import agora from '@/utils/package/agora';
+import { agora } from '@/utils/package/agora';
 import { CloseOutlined } from '@ant-design/icons';
-import { Button, Select, message } from 'antd';
+import { Button, Empty, Select, message } from 'antd';
 import { useEffect, useState } from "react";
 const UserVideo: React.FC = () => {
   let userInfo = JSON.parse(storage.getItem('user') as string)
@@ -32,7 +32,6 @@ const UserVideo: React.FC = () => {
   useEffect(() => {
     setUser(userInfo)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
-    agora.meetingMonitoringInit();
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
     }
@@ -65,11 +64,11 @@ const UserVideo: React.FC = () => {
 
   useEffect(() => {
     userList.forEach((item: any) => {
-      agora.meetingMonitoringSetupRemoteVideoJoin({
-        uid: Number('1' + item.screenShareId),
-        view: document.getElementById(`video-${item.uid}`),
-        channelId: getQueryParameterRegex('channelId'),
-      })
+      // agora.meetingMonitoringSetupRemoteVideoJoin({
+      //   uid: Number('1' + item.screenShareId),
+      //   view: document.getElementById(`video-${item.uid}`),
+      //   channelId: getQueryParameterRegex('channelId'),
+      // })
     })
   }, [userList])
   // 监听缓存变化
@@ -142,7 +141,7 @@ const UserVideo: React.FC = () => {
                 >开始循环</Button>}
             </div>
           </div>
-          <div className={styles.userVideoContentList}>
+          {userList.length ? <div className={styles.userVideoContentList}>
             {
               userList.map((item: any, index: number) => {
                 return <div className={styles.userVideoContentListItem} key={index}>
@@ -152,7 +151,8 @@ const UserVideo: React.FC = () => {
                 </div>
               })
             }
-          </div>
+          </div> :
+            <Empty style={{ margin: 'auto' }} />}
         </div>
       </div>
     </>

src/utils/package/agora.ts

@@ -18,9 +18,7 @@ const option: any = {
   screenShareId: '',
 }
 let rtcEngine: any = '';
-let meetingMonitoringrtcEngine: any = '';
-
-const agora = {
+export const agora = {
   // 初始化
   init: async (bool: boolean = false) => {
     rtcEngine = createAgoraRtcEngine();
@@ -29,27 +27,9 @@ 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 },
-      );
-    }
+  //  获取rtcEngine
+  getRtcEngine: () => {
+    return rtcEngine
   },
   // 获取当前设备是否存在不存在就获取默认设备
   setDeviceManager: async (bool: boolean = false) => {
@@ -431,6 +411,4 @@ const agora = {
     await rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest()
   },
 
-}
-
-export default agora;
+}