优化

src/api/Meeting/index.ts

@@ -98,3 +98,9 @@ export const GetShowUser = (roomNum: string) =>
     url: `/room/show-user?roomNum=${roomNum}`,
     method: 'get'
   })
+
+export const PostShowUser = (roomNum: string, uid: string) =>
+  request({
+    url: `/room/show-user?roomNum=${roomNum}&uid=${uid}`,
+    method: 'post'
+  })

src/page/Meeting/index.tsx

@@ -8,7 +8,7 @@ import { SearchOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
-import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser } from '@/api/Meeting';
+import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser } from '@/api/Meeting';
 import ImageUrl from '@/utils/package/ImageUrl'
 import agora from '@/utils/package/agora'
 import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr';
@@ -113,6 +113,7 @@ const Meeting: React.FC = () => {
   const [userSearchValue, setUserSearchValue] = useState('')
   const [noViewChatList, setNoViewChatList] = useState(0)
   const [currentLookUserAccount, setCurrentLookUserAccount] = useState<string>('')
+  const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3>(1)
   let userInfo = JSON.parse(storage.getItem('user') as string)
   useEffect(() => {
     let time = null as any;
@@ -121,6 +122,7 @@ const Meeting: React.FC = () => {
     agora.init(true)
     agora.registerEventHandler({
       onJoinChannelSuccess: async (info: any, _elapsed: any) => {
+        if (String(info.localUid).length !== 9) {
           await onInvoke('joinChannel', {
             roomNum: info.channelId,
             enableMicr: true,
@@ -138,18 +140,12 @@ const Meeting: React.FC = () => {
               })
               view.setAttribute('load', 'true')
             }
-          if (String(info.localUid).length === 9 && userInfo.screenShareId == info.localUid) {
-            await agora.setupLocalVideo({
-              uid: Number(info.localUid),
-              view: document.getElementById(`look-video`) as HTMLElement,
-              channelId: info.channelId,
-              sourceType: VideoSourceType.VideoSourceScreen,
-            })
-          }
             getShowUser();
           }, 1000);
+        }
       },
       onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
+        if (String(remoteUid).length !== 9) {
           await getRoomUser()
           setTimeout(async () => {
             let view = document.getElementById(`video-${remoteUid}`) as HTMLElement;
@@ -161,14 +157,8 @@ const Meeting: React.FC = () => {
               })
               view.setAttribute('load', 'true')
             }
-          if (String(remoteUid).length === 9 && userInfo.screenShareId != remoteUid) {
-            await agora.setupRemoteVideoJoin({
-              uid: Number(remoteUid),
-              view: document.getElementById(`look-video`) as HTMLElement,
-              channelId: info.channelId,
-            })
-          }
           }, 1000);
+        }
       },
       onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
         await agora.setupRemoteVideo({
@@ -301,27 +291,36 @@ const Meeting: React.FC = () => {
         if (res.data === userInfo.uid) {
           if (String(res.data).length === 9) {
             // 共享屏幕
-            await agora.setupLocalVideo({
+            setCurrentLookUserStatus(2)
+            setTimeout(() => {
+              agora.setupLocalVideo({
                 uid: Number(res.data),
-              view: document.getElementById(`look-video`) as HTMLElement,
+                view: document.getElementById(`video-source-screen`) as HTMLElement,
                 channelId: state.channelId,
                 sourceType: VideoSourceType.VideoSourceScreen,
               })
+            }, 1000);
           } else {
+            setCurrentLookUserStatus(1)
             // 摄像头
-            await agora.setupLocalVideo({
+            setTimeout(() => {
+              agora.setupLocalVideo({
                 uid: Number(res.data),
-              view: document.getElementById(`look-video`) as HTMLElement,
+                view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
                 channelId: state.channelId,
                 sourceType: VideoSourceType.VideoSourceCameraPrimary,
               })
+            }, 1000);
           }
         } else {
-          await agora.setupRemoteVideoJoin({
+          setCurrentLookUserStatus(3)
+          setTimeout(() => {
+            agora.setupRemoteVideoJoin({
               uid: Number(res.data),
-            view: document.getElementById(`look-video`) as HTMLElement,
+              view: document.getElementById(`video-source-remote`) as HTMLElement,
               channelId: state.channelId,
             })
+          }, 1000);
         }
       }
     })
@@ -363,8 +362,8 @@ const Meeting: React.FC = () => {
         setIsSharedScreenModal(true)
         break;
       case '停止共享':
-        await agora.destroyRendererByConfig(user.screenShareId)
         agora.stopScreenCapture()
+        await allUserLook(user.uid)
         footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
         break;
       case '关闭声音':
@@ -448,7 +447,8 @@ const Meeting: React.FC = () => {
       const footerListTemplate = [...footerList]
       footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
       setIsSharedScreenModal(false)
-      agora.setDesktopCapturerVideo(sharedScreenItem)
+      await agora.setDesktopCapturerVideo(sharedScreenItem)
+      await allUserLook(user.screenShareId)
     } else {
       message.error('请选择应用!')
     }
@@ -470,6 +470,15 @@ const Meeting: React.FC = () => {
     })
   };
 
+  // 设置全员看谁
+  const allUserLook = async (uid: string): Promise<void> => {
+    await PostShowUser(state.channelId, uid).then(res => {
+      if (res.code === 200) {
+        getShowUser()
+      }
+    })
+  }
+
   // 获取房间用户
   const getRoomUser = async (): Promise<void> => {
     Promise.all([
@@ -658,11 +667,21 @@ const Meeting: React.FC = () => {
                   )
                 }
                 )}
-                <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                {currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
-                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='look-video'>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                     <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
                   </div>
+                </div> : null}
+                {currentLookUserStatus === 2 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
+                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
                   </div>
+                </div> : null}
+                {currentLookUserStatus === 3 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote'>
+                    <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
+                  </div>
+                </div> : null}
               </div>
             </div>
             {

src/utils/package/agora.ts

@@ -69,7 +69,7 @@ const agora = {
       //   }
       // },
       // // 用户音量提示回调。
-      onAudioVolumeIndication: async (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => {
+      onAudioVolumeIndication: async (_connection: any, _speakers: any, _speakerNumber: any, totalVolume: any,) => {
         const percentage = (totalVolume / 255) * 100
         await onAudioVolumeIndication(percentage)
       }
@@ -211,7 +211,6 @@ const agora = {
         }
       );
     }
-    await agora.destroyRendererByConfig(user.screenShareId)
     await agora.joinChannelEx(user.screenShareId)
   },
   // 停止录制音视频
@@ -220,12 +219,6 @@ const agora = {
     rtcEngine.destroyMediaRecorder(iMediaRecorder)
     iMediaRecorder = ""
   },
-  // 销毁视频
-  destroyRendererByConfig: async (uid: any) => {
-    // await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceCameraPrimary, option.channelId, Number(uid))
-    await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(uid))
-    await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceRemote, option.channelId, Number(uid))
-  },
   // 开始录制音视频
   startRecording: (uid: number) => {
     iMediaRecorder = rtcEngine.createMediaRecorder({
@@ -234,7 +227,7 @@ const agora = {
     })
     iMediaRecorder.setMediaRecorderObserver({
       // 录制状态发生改变回调。
-      onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => {
+      onRecorderStateChanged: (_channelId: any, _uid: any, _state: any, reason: any) => {
         switch (reason) {
           case 1:
             message.error('录制文件写入失败')
@@ -248,7 +241,7 @@ const agora = {
         }
       },
       // 录制信息更新回调。
-      onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => {
+      onRecorderInfoUpdated: (_channelId: any, _uid: any, info: any) => {
         message.success(`文件已保存至${info.fileName}`)
       },
     })