优化

.env.development

@@ -1,5 +1,5 @@
 #基础API 绝对的
-VITE_BASE_URL_API = 'http://192.168.2.8:5192'
+VITE_BASE_URL_API = 'http://192.168.2.9:5192'
 VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555'
 #当前IP   相对的
 VITE_BASE_CURRENT_API = '.'

.env.production

@@ -1,5 +1,5 @@
 #基础API 绝对的
-VITE_BASE_URL_API = 'http://192.168.2.8:5192'
+VITE_BASE_URL_API = 'http://192.168.2.9:5192'
 VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555'
 #当前IP   相对的
 VITE_BASE_CURRENT_API = '.'

.env.test

@@ -1,5 +1,5 @@
 #基础API 绝对的
-VITE_BASE_URL_API = 'http://192.168.2.8:5192'
+VITE_BASE_URL_API = 'http://192.168.2.9:5192'
 VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555'
 #当前IP   相对的
 VITE_BASE_CURRENT_API = '.'

src/page/Meeting/index.tsx

@@ -122,6 +122,43 @@ const Meeting: React.FC = () => {
       let userInfo = JSON.parse(storage.getItem('user') as string)
       setMeetingMode(storage.getItem('meetingMode') as string || 'FreedomMode');
       agora.init()
+      agora.registerEventHandler({
+        onJoinChannelSuccess: async (info: any, _elapsed: any) => {
+          await onInvoke('joinChannel', {
+            roomNum: info.channelId,
+            enableMicr: true,
+            enableCamera: true
+          })
+          await getRoomUser()
+          setTimeout(() => {
+            agora.setupLocalVideo({
+              account: Number(info.localUid),
+              view: document.getElementById(`video-${info.localUid}`) as HTMLElement,
+              channelId: info.channelId,
+            })
+          }, 1000);
+        },
+        onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
+          await getRoomUser()
+          setTimeout(() => {
+            agora.setupRemoteVideoJoin({
+              account: Number(remoteUid),
+              view: document.getElementById(`video-${remoteUid}`) as HTMLElement,
+              channelId: info.channelId,
+            })
+          }, 1000);
+        },
+        onUserOffline: async (info: any, remoteUid: any, reason: any) => {
+          await onInvoke('levelChannel', {
+            roomNum: info.channelId
+          })
+          agora.setupRemoteVideo({
+            account: Number(remoteUid),
+            view: document.getElementById(`video-${remoteUid}`) as HTMLElement,
+            channelId: info.channelId,
+          })
+        }
+      })
       agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary)
       agora.setJoinChannel({
         channelId: state.channelId,
@@ -158,15 +195,6 @@ const Meeting: React.FC = () => {
       }
       agora.muteLocalAudioStream(!item.enableMicr)
       agora.muteLocalVideoStream(!item.enableCamera)
-      let dom = document.getElementById(`video-${item.account}`) as HTMLElement
-      if (dom.childNodes.length === 1) {
-        console.log(dom);
-        agora.setVideo({
-          account: Number(item.account),
-          view: dom,
-          channelId: state.channelId,
-        })
-      }
     });
   }, [roomUserList]);
 
@@ -369,25 +397,6 @@ const Meeting: React.FC = () => {
   }
   const handleCustomStorageChange = async (e: any): Promise<void> => {
     switch (e.key) {
-      case 'isJoin':
-        if (e.value) {
-          await onInvoke('joinChannel', {
-            roomNum: state.channelId,
-            enableMicr: true,
-            enableCamera: true
-          })
-          getRoomUser()
-        } else {
-          onInvoke('levelChannel', {
-            roomNum: state.channelId
-          })
-        }
-        break;
-      case 'isRemotJoin':
-        setTimeout(() => {
-          getRoomUser()
-        }, 2000)
-        break;
       case 'meetingMode':
         setMeetingMode(e.value)
         break;

src/utils/package/agora.ts

@@ -29,54 +29,47 @@ const agora = {
     rtcEngine.initialize({
       appId: option.appId,
     });
+  },
+  // 事件回调
+  registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline }: any) => {
     rtcEngine.registerEventHandler({
       // 监听本地用户加入频道事件
       onJoinChannelSuccess: async (info: any, elapsed: any) => {
-        storage.setItem('isJoin', true)
+        await onJoinChannelSuccess(info, elapsed)
       },
       // 监听远端用户加入频道事件
-      onUserJoined: (info: any, remoteUid: any, elapsed: any) => {
+      onUserJoined: async (info: any, remoteUid: any, elapsed: any) => {
-        storage.setItem('isRemotJoin', true)
+        await onUserJoined(info, remoteUid, elapsed)
       },
       // 监听用户离开频道事件
       onUserOffline: async (info: any, remoteUid: any, reason: any) => {
-        // 远端用户离开频道后，关闭远端视频窗口
+        await onUserOffline(info, remoteUid, reason)
-        await rtcEngine.setupRemoteVideo(
-          {
-            renderMode: RenderModeType.RenderModeFit,
-            sourceType: VideoSourceType.VideoSourceRemote,
-            uid: Number(info.localUid),
-            view: document.getElementById(`video-${remoteUid}`),
-            setupMode: VideoViewSetupMode.VideoViewSetupRemove,
-          },
-        );
-        storage.setItem('isRemotJoin', false)
       },
-      // 视频发布状态改变回调
+      // // 视频发布状态改变回调
-      onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
+      // onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
-        if (newState === 1) {
+      //   if (newState === 1) {
 
-        }
+      //   }
-      },
+      // },
-      // 音频发布状态改变回调
+      // // 音频发布状态改变回调
-      onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
+      // onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
-        if (newState === 1) {
+      //   if (newState === 1) {
 
-        }
+      //   }
-      },
+      // },
-      // 用户音量提示回调。
+      // // 用户音量提示回调。
-      onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => {
+      // onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => {
-        const percentage = (totalVolume / 255) * 100
+      //   const percentage = (totalVolume / 255) * 100
-        const dom = document.getElementById('recordingDeviceTest') as any;
+      //   const dom = document.getElementById('recordingDeviceTest') as any;
-        if (dom) {
+      //   if (dom) {
-          dom.style.width = `${percentage}%`
+      //     dom.style.width = `${percentage}%`
-        }
+      //   }
-      }
+      // }
     });
   },
   // 本地加入
-  setupLocalVideo: (item: any) => {
+  setupLocalVideo: async (item: any) => {
-    rtcEngine.setupLocalVideo({
+    await rtcEngine.setupLocalVideo({
       renderMode: RenderModeType.RenderModeFit,
       sourceType: option.sourceType,
       uid: item.account,
@@ -93,8 +86,8 @@ const agora = {
     }
   },
   // 远端加入
-  setupRemoteVideoJoin: (item: any) => {
+  setupRemoteVideoJoin: async (item: any) => {
-    rtcEngine.setupRemoteVideo(
+    await rtcEngine.setupRemoteVideo(
       {
         renderMode: RenderModeType.RenderModeFit,
         sourceType: VideoSourceType.VideoSourceRemote,
@@ -105,6 +98,18 @@ const agora = {
       { channelId: item.channelId },
     );
   },
+  // 退出
+  setupRemoteVideo: async (item: any) => {
+    await rtcEngine.setupRemoteVideo(
+      {
+        renderMode: RenderModeType.RenderModeFit,
+        sourceType: VideoSourceType.VideoSourceRemote,
+        uid: item.account,
+        view: item.view,
+        setupMode: VideoViewSetupMode.VideoViewSetupRemove,
+      },
+    );
+  },
   // 渲染视频
   setVideo: (item: any) => {
     if (option.userid === item.account) {

src/utils/package/signalr.ts

@@ -13,7 +13,7 @@ export const startSignalr = async () => {
 
   connection.start()
     .then(() => console.log('Connection started!'))
-    .catch((err: any) => console.error('Error while establishing connection: ', err));
+    .catch((err: any) => setTimeout(()=> startSignalr(), 5000));
 }
 
 export const onInvitation = (callBack: Function) => {