优化

src/page/Meeting/index.tsx

@@ -257,15 +257,16 @@ const Meeting: React.FC = () => {
   }
 
   // 获取房间用户
-  const getRoomUser = async (): Promise<void> => {
+  const getRoomUser = async (callBack: Function): Promise<void> => {
     await GetRoomUser(state.channelId).then(res => {
       if (res.code === 200) {
         setRoomUserList(res.data)
-        setTimeout(() => {
-          res.data.forEach((item: any) => {
-            agora.setVideo(Number(item.account), document.getElementById(`video-${item.account}`), state.channelId)
-          })
-        }, 1000)
+        callBack(res.data)
+        // setTimeout(() => {
+        //   res.data.forEach((item: any) => {
+        //     agora.setVideo(Number(item.account), document.getElementById(`video-${item.account}`), state.channelId)
+        //   })
+        // }, 1000)
       }
     })
   }
@@ -275,12 +276,35 @@ const Meeting: React.FC = () => {
         onInvoke('joinChannel', {
           roomNum: state.channelId
         })
-        getRoomUser()
+        getRoomUser((data: any) => {
+          setTimeout(() => {
+            data.forEach((item: any) => {
+              agora.setVideo({
+                account: Number(item.account),
+                view: document.getElementById(`video-${item.account}`),
+                channelId: state.channelId
+              })
+            })
+          }, 1000)
+        })
       } else {
         onInvoke('levelChannel', {
           roomNum: state.channelId
         })
       }
+    } else if (e.key === 'isRemotJoin') {
+      getRoomUser((data: any) => {
+        setTimeout(() => {
+          data.forEach((item: any) => {
+            agora.setVideo({
+              account: Number(item.account),
+              view: document.getElementById(`video-${item.account}`),
+              channelId: state.channelId,
+              isRemotJoin: e.value
+            })
+          })
+        }, 1000)
+      })
     }
   };
   return (

src/utils/package/agora.ts

@@ -35,33 +35,12 @@ const agora = {
       },
       // 监听远端用户加入频道事件
       onUserJoined: (info: any, remoteUid: any, elapsed: any) => {
-        console.log(info, remoteUid, '远端加入频道');
-        // 远端用户加入频道后，设置远端视频窗口
-        rtcEngine.setupRemoteVideo(
-          {
-            renderMode: RenderModeType.RenderModeFit,
-            sourceType: VideoSourceType.VideoSourceRemote,
-            uid: remoteUid,
-            view: '',
-            setupMode: VideoViewSetupMode.VideoViewSetupAdd,
-          },
-          { channelId: info.channelId },
-        );
-
+        storage.setItem('isRemotJoin', true)
       },
       // 监听用户离开频道事件
-      onUserOffline: ({ channelId, localUid }: any, remoteUid: any, reason: any) => {
+      onUserOffline: (info: any, remoteUid: any, reason: any) => {
         // 远端用户离开频道后，关闭远端视频窗口
-        console.log({ channelId, localUid }, remoteUid, '离开频道');
-        rtcEngine.setupRemoteVideo(
-          {
-            renderMode: RenderModeType.RenderModeFit,
-            sourceType: VideoSourceType.VideoSourceRemote,
-            uid: remoteUid,
-            view: '',
-            setupMode: VideoViewSetupMode.VideoViewSetupRemove,
-          },
-        );
+        storage.setItem('isRemotJoin', false)
       },
       // 视频发布状态改变回调
       onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
@@ -86,28 +65,53 @@ const agora = {
     });
   },
   // 渲染视频
-  setVideo: (localUid: number, view: any, channelId: string) => {
-    console.log(view, localUid, channelId);
-    if (option.userid === localUid) {
+  setVideo: (item: any) => {
+    console.log(item);
+    if (option.userid === item.account) {
       rtcEngine.setupLocalVideo({
         renderMode: RenderModeType.RenderModeFit,
         // sourceType: VideoSourceType.VideoSourceScreen,
         sourceType: VideoSourceType.VideoSourceCameraPrimary,
-        uid: localUid,
-        view,
+        uid: item.item,
+        view: item.view,
         setupMode: VideoViewSetupMode.VideoViewSetupAdd,
       });
     } else {
-      rtcEngine.setupRemoteVideo(
-        {
-          renderMode: RenderModeType.RenderModeFit,
-          sourceType: VideoSourceType.VideoSourceRemote,
-          uid: localUid,
-          view,
-          setupMode: VideoViewSetupMode.VideoViewSetupAdd,
-        },
-        { channelId },
-      );
+      if (typeof item.isRemotJoin === 'boolean') {
+        if (item.isRemotJoin) {
+          rtcEngine.setupRemoteVideo(
+            {
+              renderMode: RenderModeType.RenderModeFit,
+              sourceType: VideoSourceType.VideoSourceRemote,
+              uid: item.item,
+              view: item.view,
+              setupMode: VideoViewSetupMode.VideoViewSetupAdd,
+            },
+            { channelId: item.channelId },
+          );
+        } else {
+          rtcEngine.setupRemoteVideo(
+            {
+              renderMode: RenderModeType.RenderModeFit,
+              sourceType: VideoSourceType.VideoSourceRemote,
+              uid: item.item,
+              view: item.view,
+              setupMode: VideoViewSetupMode.VideoViewSetupRemove,
+            },
+          );
+        }
+      } else {
+        rtcEngine.setupRemoteVideo(
+          {
+            renderMode: RenderModeType.RenderModeFit,
+            sourceType: VideoSourceType.VideoSourceRemote,
+            uid: item.item,
+            view: item.view,
+            setupMode: VideoViewSetupMode.VideoViewSetupAdd,
+          },
+          { channelId: item.channelId },
+        );
+      }
     }