优化

2024-08-07 15:12:10 +08:00 · 2024-08-07 15:12:10 +08:00 · 29099e0382
parent fc52c1b938
commit 29099e0382
3 changed files with 97 additions and 79 deletions
--- a/src/api/Meeting/index.ts
+++ b/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'
+  })
--- a/src/page/Meeting/index.tsx
+++ b/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,54 +122,43 @@ const Meeting: React.FC = () => {
    agora.init(true)
    agora.registerEventHandler({
      onJoinChannelSuccess: async (info: any, _elapsed: any) => {
-        await onInvoke('joinChannel', {
-          roomNum: info.channelId,
-          enableMicr: true,
-          enableCamera: true
-        })
-        await getRoomUser()
-        setTimeout(async () => {
-          let view = document.getElementById(`video-${info.localUid}`) as HTMLElement;
-          if (view && !view.getAttribute('load')) {
-            await agora.setupLocalVideo({
-              uid: Number(info.localUid),
-              view,
-              channelId: info.channelId,
-              sourceType: VideoSourceType.VideoSourceCameraPrimary,
-            })
-            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);
+        if (String(info.localUid).length !== 9) {
+          await onInvoke('joinChannel', {
+            roomNum: info.channelId,
+            enableMicr: true,
+            enableCamera: true
+          })
+          await getRoomUser()
+          setTimeout(async () => {
+            let view = document.getElementById(`video-${info.localUid}`) as HTMLElement;
+            if (view && !view.getAttribute('load')) {
+              await agora.setupLocalVideo({
+                uid: Number(info.localUid),
+                view,
+                channelId: info.channelId,
+                sourceType: VideoSourceType.VideoSourceCameraPrimary,
+              })
+              view.setAttribute('load', 'true')
+            }
+            getShowUser();
+          }, 1000);
+        }
      },
      onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
-        await getRoomUser()
-        setTimeout(async () => {
-          let view = document.getElementById(`video-${remoteUid}`) as HTMLElement;
-          if (view && !view.getAttribute('load')) {
-            await agora.setupRemoteVideoJoin({
-              uid: Number(remoteUid),
-              view,
-              channelId: info.channelId,
-            })
-            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);
+        if (String(remoteUid).length !== 9) {
+          await getRoomUser()
+          setTimeout(async () => {
+            let view = document.getElementById(`video-${remoteUid}`) as HTMLElement;
+            if (view && !view.getAttribute('load')) {
+              await agora.setupRemoteVideoJoin({
+                uid: Number(remoteUid),
+                view,
+                channelId: info.channelId,
+              })
+              view.setAttribute('load', 'true')
+            }
+          }, 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({
-              uid: Number(res.data),
-              view: document.getElementById(`look-video`) as HTMLElement,
-              channelId: state.channelId,
-              sourceType: VideoSourceType.VideoSourceScreen,
-            })
+            setCurrentLookUserStatus(2)
+            setTimeout(() => {
+              agora.setupLocalVideo({
+                uid: Number(res.data),
+                view: document.getElementById(`video-source-screen`) as HTMLElement,
+                channelId: state.channelId,
+                sourceType: VideoSourceType.VideoSourceScreen,
+              })
+            }, 1000);
          } else {
+            setCurrentLookUserStatus(1)
            // 摄像头
-            await agora.setupLocalVideo({
-              uid: Number(res.data),
-              view: document.getElementById(`look-video`) as HTMLElement,
-              channelId: state.channelId,
-              sourceType: VideoSourceType.VideoSourceCameraPrimary,
-            })
+            setTimeout(() => {
+              agora.setupLocalVideo({
+                uid: Number(res.data),
+                view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
+                channelId: state.channelId,
+                sourceType: VideoSourceType.VideoSourceCameraPrimary,
+              })
+            }, 1000);
          }
        } else {
-          await agora.setupRemoteVideoJoin({
-            uid: Number(res.data),
-            view: document.getElementById(`look-video`) as HTMLElement,
-            channelId: state.channelId,
-          })
+          setCurrentLookUserStatus(3)
+          setTimeout(() => {
+            agora.setupRemoteVideoJoin({
+              uid: Number(res.data),
+              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)}`}>
-                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id='look-video'>
+                {currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
+                  <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>
+                </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>
            {
--- a/src/utils/package/agora.ts
+++ b/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}`)
      },
    })