优化

src/page/Meeting/index.tsx

@@ -34,6 +34,7 @@ const Meeting: React.FC = () => {
   const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
   const [sharedScreenList, setSharedScreenList] = useState<any>([]);
   const [sharedScreenItem, setSharedScreenItem] = useState<any>('');
+  const [textMsg, setTextMsg] = useState('');
   const [footerList, setFooterList] = useState([
     [
       {
@@ -130,6 +131,18 @@ const Meeting: React.FC = () => {
     };
   }, [fileList.pageIndex]);
 
+  useEffect(() => {
+    roomUserList.forEach((item: any) => {
+      let dom = document.getElementById(`video-${item.account}`) as HTMLElement
+      if (!dom.hasChildNodes()) {
+        agora.setVideo({
+          account: Number(item.account),
+          view: dom,
+          channelId: state.channelId,
+        })
+      }
+    });
+  }, [roomUserList]);
   // 操作按钮
   const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
     const footerListTemplate = [...footerList]
@@ -257,11 +270,10 @@ const Meeting: React.FC = () => {
   }
 
   // 获取房间用户
-  const getRoomUser = async (callBack: Function): Promise<void> => {
+  const getRoomUser = async (): Promise<void> => {
     await GetRoomUser(state.channelId).then(res => {
       if (res.code === 200) {
         setRoomUserList(res.data)
-        callBack(res.data)
       }
     })
   }
@@ -271,35 +283,14 @@ const Meeting: React.FC = () => {
         onInvoke('joinChannel', {
           roomNum: state.channelId
         })
-        getRoomUser((data: any) => {
+        getRoomUser()
-          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) => {
+      getRoomUser()
-        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 (
@@ -413,8 +404,15 @@ const Meeting: React.FC = () => {
                         )}
                       </div>
                       <div className={`${styles.meetingUserChatInput} drag`}>
-                        <Input.TextArea placeholder="请输入消息" style={{ flexGrow: 1 }}></Input.TextArea>
+                        <Input.TextArea placeholder="请输入消息" style={{ flexGrow: 1 }} onChange={(e) => {
-                        <Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }}>发送</Button>
+                          setTextMsg(e.target.value)
+                        }}></Input.TextArea>
+                        <Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }} onClick={() => {
+                          onInvoke('senChannelMsg', {
+                            roomNum: state.channelId,
+                            msg: textMsg,
+                          })
+                        }}>发送</Button>
                       </div>
                     </div>
                   }

src/utils/package/agora.ts

@@ -30,7 +30,7 @@ const agora = {
     });
     rtcEngine.registerEventHandler({
       // 监听本地用户加入频道事件
-      onJoinChannelSuccess: (info: any, elapsed: any) => {
+      onJoinChannelSuccess: async (info: any, elapsed: any) => {
         storage.setItem('isJoin', true)
       },
       // 监听远端用户加入频道事件
@@ -41,6 +41,15 @@ const agora = {
       onUserOffline: (info: any, remoteUid: any, reason: any) => {
         // 远端用户离开频道后，关闭远端视频窗口
         storage.setItem('isRemotJoin', false)
+        rtcEngine.setupRemoteVideo(
+          {
+            renderMode: RenderModeType.RenderModeFit,
+            sourceType: VideoSourceType.VideoSourceRemote,
+            uid: Number(info.localUid),
+            view: document.getElementById(`video-${info.localUid}`),
+            setupMode: VideoViewSetupMode.VideoViewSetupRemove,
+          },
+        );
       },
       // 视频发布状态改变回调
       onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
@@ -64,60 +73,36 @@ const agora = {
       }
     });
   },
-  // 渲染视频
+  // 本地加入
-  setVideo: (item: any) => {
+  setupLocalVideo: (item: any) => {
-    console.log(item);
+    rtcEngine.setupLocalVideo({
-    // 本地加入
+      renderMode: RenderModeType.RenderModeFit,
-    function setupLocalVideo() {
+      // sourceType: VideoSourceType.VideoSourceScreen,
-      rtcEngine.setupLocalVideo({
+      sourceType: VideoSourceType.VideoSourceCameraPrimary,
+      uid: item.account,
+      view: item.view,
+      setupMode: VideoViewSetupMode.VideoViewSetupAdd,
+    });
+  },
+  // 远端加入
+  setupRemoteVideoJoin: (item: any) => {
+    rtcEngine.setupRemoteVideo(
+      {
         renderMode: RenderModeType.RenderModeFit,
-        // sourceType: VideoSourceType.VideoSourceScreen,
+        sourceType: VideoSourceType.VideoSourceRemote,
-        sourceType: VideoSourceType.VideoSourceCameraPrimary,
         uid: item.account,
         view: item.view,
         setupMode: VideoViewSetupMode.VideoViewSetupAdd,
-      });
+      },
-    }
+      { channelId: item.channelId },
-    // 远端加入
+    );
-    function setupRemoteVideoJoin() {
+  },
-      rtcEngine.setupRemoteVideo(
+  // 渲染视频
-        {
+  setVideo: (item: any) => {
-          renderMode: RenderModeType.RenderModeFit,
+    if (option.userid === item.account) {
-          sourceType: VideoSourceType.VideoSourceRemote,
+      agora.setupLocalVideo(item)
-          uid: item.account,
-          view: item.view,
-          setupMode: VideoViewSetupMode.VideoViewSetupAdd,
-        },
-        { channelId: item.channelId },
-      );
-    }
-    // 远端退出
-    function setupRemoteVideoLeave() {
-      rtcEngine.setupRemoteVideo(
-        {
-          renderMode: RenderModeType.RenderModeFit,
-          sourceType: VideoSourceType.VideoSourceRemote,
-          uid: item.account,
-          view: item.view,
-          setupMode: VideoViewSetupMode.VideoViewSetupRemove,
-        },
-      );
-    }
-
-    if (typeof item.isRemotJoin === 'boolean') {
-      if (option.userid != item.account) {
-        if (item.isRemotJoin) {
-          setupRemoteVideoJoin()
-        } else {
-          setupRemoteVideoLeave()
-        }
-      }
     } else {
-      if (option.userid === item.account) {
+      agora.setupRemoteVideoJoin(item)
-        setupLocalVideo()
-      } else {
-        setupRemoteVideoJoin()
-      }
     }
   },
   // 离开频道

src/utils/package/signalr.ts

@@ -27,6 +27,9 @@ export const onInvoke = (str: string, data: any) => {
     case 'levelChannel':
       connection.invoke(str, data.roomNum)
       break;
+    case 'senChannelMsg':
+      connection.invoke(str, data.roomNum, data.msg)
+      break;
   }
 }