优化

src/page/Meeting/index.tsx

@@ -138,7 +138,7 @@ const Meeting: React.FC = () => {
             })
             view.setAttribute('load', 'true')
           }
-          if (String(info.localUid).length === 9) {
+          if (String(info.localUid).length === 9 && userInfo.screenShareId == info.localUid) {
             await agora.setupLocalVideo({
               uid: Number(info.localUid),
               view: document.getElementById(`look-video`) as HTMLElement,
@@ -161,8 +161,7 @@ const Meeting: React.FC = () => {
             })
             view.setAttribute('load', 'true')
           }
-          if (String(remoteUid).length === 9) {
+          if (String(remoteUid).length === 9 && userInfo.screenShareId != remoteUid) {
-            console.log(String(remoteUid));
             await agora.setupRemoteVideoJoin({
               uid: Number(remoteUid),
               view: document.getElementById(`look-video`) as HTMLElement,
@@ -174,7 +173,7 @@ const Meeting: React.FC = () => {
       onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
         await agora.setupRemoteVideo({
           uid: Number(remoteUid),
-          view: document.getElementById(`video-${remoteUid}`) as HTMLElement,
+          view: null,
           channelId: info.channelId,
         })
         setTimeout(() => {
@@ -182,7 +181,7 @@ const Meeting: React.FC = () => {
         }, 1000);
       }
     })
-    agora.setCameraCapture()
+    agora.startCameraCapture()
     agora.setJoinChannel({
       channelId: state.channelId,
       uid: userInfo.uid,
@@ -276,27 +275,6 @@ const Meeting: React.FC = () => {
 
   }, [currentVideoId])
 
-  useEffect(() => {
-    const userItem = allUserList.find((item: any) => item.uid === currentLookUserAccount)
-    if (userItem) {
-      if (userItem.uid === user.uid) {
-        // agora.setupLocalVideo({
-        //   account: Number(userItem.uid),
-        //   view: document.getElementById(`look-video`) as HTMLElement,
-        //   channelId: state.channelId,
-        //   sourceType: VideoSourceType.VideoSourceCameraPrimary,
-        // })
-      } else {
-        // agora.setupRemoteVideoJoin({
-        //   account: Number(userItem.uid),
-        //   view: document.getElementById(`look-video`) as HTMLElement,
-        //   channelId: state.channelId,
-        //   sourceType: VideoSourceType.VideoSourceCameraPrimary,
-        // })
-      }
-    }
-  }, [allUserList, currentLookUserAccount])
-
   // 网络
   const handleNetworkChange = (): void => {
     if (navigator.onLine) {
@@ -360,7 +338,8 @@ const Meeting: React.FC = () => {
         setIsSharedScreenModal(true)
         break;
       case '停止共享':
-        agora.setCameraCapture()
+        await agora.destroyRendererByConfig(user.screenShareId)
+        agora.stopScreenCapture()
         footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
         break;
       case '关闭声音':
@@ -379,13 +358,15 @@ const Meeting: React.FC = () => {
         footerListTemplate[itemIndex][rowIndex].title = '开启视频'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
-        postOpenCamera(false, user.uid)
+        await postOpenCamera(false, user.uid)
+        await agora.stopCameraCapture();
         break;
       case '开启视频':
         footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
-        postOpenCamera(true, user.uid)
+        await postOpenCamera(true, user.uid)
+        await agora.startCameraCapture()
         break;
       case '设置向导':
         // stupWizardRef.current.changeModal()

src/utils/package/agora.ts

@@ -56,9 +56,6 @@ const agora = {
       onUserOffline: async (info: any, remoteUid: any, reason: any) => {
         await onUserOffline(info, remoteUid, reason)
       },
-      // onConnectionStateChanged: (connection: any, state: any, reason: any) => {
-      //   console.log(connection, reason)
-      // },
       // // 视频发布状态改变回调
       // onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => {
       //   if (newState === 1) {
@@ -138,6 +135,22 @@ const agora = {
       publishScreenTrack: false,
     });
   },
+  // 共享屏幕单独用户
+  joinChannelEx: async (uid: any) => {
+    await rtcEngine.leaveChannelEx({ channelId: option.channelId, localUid: Number(uid) })
+    await rtcEngine.joinChannelEx(
+      option.token,
+      { channelId: option.channelId, localUid: Number(uid) },
+      {
+        autoSubscribeAudio: false,
+        autoSubscribeVideo: false,
+        publishMicrophoneTrack: false,
+        publishCameraTrack: false,
+        clientRoleType: ClientRoleType.ClientRoleBroadcaster,
+        publishScreenTrack: true,
+      }
+    );
+  },
   // 停止共享屏幕
   stopScreenCapture: () => {
     rtcEngine.stopScreenCapture();
@@ -151,17 +164,12 @@ const agora = {
     rtcEngine.muteLocalVideoStream(mute)
   },
   // 摄像头采集
-  setCameraCapture: () => {
+  startCameraCapture: async () => {
-    agora.stopScreenCapture()
+    await rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
-    const user = JSON.parse(storage.getItem('user') as string)
+  },
-    rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(user.screenShareId))
+  // 停止采集摄像头
-    agora.setupLocalVideo({
+  stopCameraCapture: async () => {
-      uid: Number(option.uid),
+    await rtcEngine.stopCameraCapture()
-      view: document.getElementById(`video-${option.uid}`),
-      channelId: option.channelId,
-      sourceType: VideoSourceType.VideoSourceCameraPrimary,
-    })
-    rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {})
   },
   // 加入频道
   setJoinChannel: async (data: any) => {
@@ -178,7 +186,6 @@ const agora = {
   setDesktopCapturerVideo: async (targetSource: any) => {
     // await rtcEngine.stopCameraCapture(option.sourceType)
     const user = JSON.parse(storage.getItem('user') as string)
-    rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(user.screenShareId))
     agora.stopScreenCapture();
     if (
       targetSource.type ===
@@ -204,18 +211,8 @@ const agora = {
         }
       );
     }
-    rtcEngine.joinChannelEx(
+    await agora.destroyRendererByConfig(user.screenShareId)
-      option.token,
+    await agora.joinChannelEx(user.screenShareId)
-      { channelId: option.channelId, localUid: Number(user.screenShareId) },
-      {
-        autoSubscribeAudio: false,
-        autoSubscribeVideo: false,
-        publishMicrophoneTrack: false,
-        publishCameraTrack: false,
-        clientRoleType: ClientRoleType.ClientRoleBroadcaster,
-        publishScreenTrack: true,
-      }
-    );
   },
   // 停止录制音视频
   stopRecording: () => {
@@ -223,6 +220,11 @@ const agora = {
     rtcEngine.destroyMediaRecorder(iMediaRecorder)
     iMediaRecorder = ""
   },
+  // 销毁视频
+  destroyRendererByConfig: async (uid: any) => {
+    await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(uid))
+    await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceRemote, option.channelId, Number(uid))
+  },
   // 开始录制音视频
   startRecording: (uid: number) => {
     iMediaRecorder = rtcEngine.createMediaRecorder({

src/utils/package/signalr.ts

@@ -24,7 +24,6 @@ export const onStart = async (callBack?: Function) => {
         callBack()
       }
     } catch (err) {
-      console.log(err);
       setTimeout(onStart, 5000);
     }
   }