优化

2025-01-20 10:26:31 +08:00 · 2025-01-20 10:26:31 +08:00 · 1887bb39bc
parent bfb85e53a9
commit 1887bb39bc
2 changed files with 70 additions and 62 deletions
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@ -189,7 +189,6 @@ const Meeting: React.FC = () => {
  const [_isNetworkDisconnected, setIsNetworkDisconnected] = useState(false)
  const [isShareUser, setIsShareUser] = useState<any>(null)
  const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1)
-  const [clickCurrentLookUserStatus, setClickCurrentLookUserStatus] = useState<boolean>(true)
  const [commonlyChatList] = useState<any>([
    '能听到我说话吗？',
    '听得到',
@ -972,6 +971,47 @@ const Meeting: React.FC = () => {
    return () => clearTimeout(timer);
  }, [isClicked]);

+  useEffect(() => {
+    async function setView() {
+      let uid = currentVideoId || userInfo.uid
+      switch (currentLookUserStatus) {
+        case 1:
+          await agora.setupLocalVideo({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
+            channelId: state.channelId,
+            sourceType: VideoSourceType.VideoSourceCameraPrimary,
+          })
+          break;
+        case 2:
+          await agora.setupLocalVideo({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-screen`) as HTMLElement,
+            channelId: state.channelId,
+            sourceType: VideoSourceType.VideoSourceScreen,
+          })
+          break;
+        case 3:
+          await agora.setupRemoteVideoJoin({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
+            channelId: state.channelId,
+          })
+          break;
+        case 4:
+          await agora.setupRemoteVideoJoin({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
+            channelId: state.channelId,
+          })
+          break;
+      }
+    }
+    setTimeout(() => {
+      setView()
+    }, currentVideoId ? 0 : 1500);
+  }, [currentLookUserStatus]);
+
  useEffect(() => {
    let timer: NodeJS.Timeout;

@ -1382,13 +1422,18 @@ const Meeting: React.FC = () => {
  // 渲染视频
  const renderVideo = async (uid: string = ''): Promise<void> => {
    if (uid) {
-      if (currentVideoId === uid || clickCurrentLookUserStatus === false) {
+      if (currentVideoId === uid) {
        return
      }
    } else {
      uid = userInfo.uid
    }
-    setClickCurrentLookUserStatus(false)
+    if (currentVideoId) {
+      await agora.destroyRendererByView(`video-source-camera-primary`)
+      await agora.destroyRendererByView(`video-source-screen`)
+      await agora.destroyRendererByView(`video-source-remote-screen`)
+      await agora.destroyRendererByView(`video-source-remote-camera`)
+    }
    setCurrentLookUserStatus(0)
    setRoomUserList((res: any) => {
      let item = res.find((item: any) => item.uid === uid || item.screenShareId === uid)
@ -1397,59 +1442,23 @@ const Meeting: React.FC = () => {
      }
      return res
    })
-    setTimeout(() => {
-      if (uid === userInfo.uid || uid === userInfo.screenShareId) {
-        if (String(uid).length === 9) {
-          // 共享屏幕
-          setCurrentLookUserStatus(2)
-          setTimeout(async () => {
-            await agora.setupLocalVideo({
-              uid: Number(uid),
-              view: document.getElementById(`video-source-screen`) as HTMLElement,
-              channelId: state.channelId,
-              sourceType: VideoSourceType.VideoSourceScreen,
-            })
-            setClickCurrentLookUserStatus(true)
-          }, 1500);
-        } else {
-          // 摄像头
-          setCurrentLookUserStatus(1)
-          setTimeout(async () => {
-            await agora.setupLocalVideo({
-              uid: Number(uid),
-              view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
-              channelId: state.channelId,
-              sourceType: VideoSourceType.VideoSourceCameraPrimary,
-            })
-            setClickCurrentLookUserStatus(true)
-          }, 1500);
-        }
+    if (uid === userInfo.uid || uid === userInfo.screenShareId) {
+      if (String(uid).length === 9) {
+        // 共享屏幕
+        setCurrentLookUserStatus(2)
      } else {
-        if (String(uid).length === 9) {
-          // 共享屏幕
-          setCurrentLookUserStatus(3)
-          setTimeout(async () => {
-            await agora.setupRemoteVideoJoin({
-              uid: Number(uid),
-              view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
-              channelId: state.channelId,
-            })
-            setClickCurrentLookUserStatus(true)
-          }, 1500);
-        } else {
-          // 摄像头
-          setCurrentLookUserStatus(4)
-          setTimeout(async () => {
-            await agora.setupRemoteVideoJoin({
-              uid: Number(uid),
-              view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
-              channelId: state.channelId,
-            })
-            setClickCurrentLookUserStatus(true)
-          }, 1500);
-        }
+        // 摄像头
+        setCurrentLookUserStatus(1)
      }
-    }, 1000)
+    } else {
+      if (String(uid).length === 9) {
+        // 共享屏幕
+        setCurrentLookUserStatus(3)
+      } else {
+        // 摄像头
+        setCurrentLookUserStatus(4)
+      }
+    }
  }
  // 全员观看
  const getShowUser = async (): Promise<void> => {
@ -1840,7 +1849,6 @@ const Meeting: React.FC = () => {
    const footerListTemplate = [...footerList]
    await agora.leaveChannelEx(userInfo.screenShareId)
    agora.stopScreenCapture()
-    await agora.destroyRendererByViewScreenCapture()
    footerListTemplate[1][0].title = '共享屏幕'
    setFooterList(footerListTemplate)
    window.electron.createChildWindow('stop')
@ -2445,7 +2453,7 @@ const Meeting: React.FC = () => {
                  </div> : null)
                }
                )}
-                {currentLookUserStatus === 0 && currentLookUserAccount ?
+                {currentLookUserStatus === 0 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                      {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2456,7 +2464,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 1 && currentLookUserAccount ?
+                {currentLookUserStatus === 1 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                      {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2468,7 +2476,7 @@ const Meeting: React.FC = () => {
                    {meetingContentUser(currentLookUserAccount, true)}
                    {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
                  </div> : null}
-                {currentLookUserStatus === 2 && currentLookUserAccount ?
+                {currentLookUserStatus === 2 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2479,7 +2487,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 3 && currentLookUserAccount ?
+                {currentLookUserStatus === 3 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
@ -2490,7 +2498,7 @@ const Meeting: React.FC = () => {
                      <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                    {meetingContentUser(currentLookUserAccount, true)}
                  </div> : null}
-                {currentLookUserStatus === 4 && currentLookUserAccount ?
+                {currentLookUserStatus === 4 ?
                  <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                    <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
--- a/src/utils/package/agora.ts
+++ b/src/utils/package/agora.ts
@ -393,8 +393,8 @@ export const agora = {
  destroyRendererByConfig: async (uid: number, channelId?: string) => {
    await rtcEngine.destroyRendererByConfig(option.uid === uid ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceRemote, channelId, uid);
  },
-  destroyRendererByViewScreenCapture: async () => {
-    let dom = document.getElementById(`meetingAbsoluteVideo`);
+  destroyRendererByView: async (key: string) => {
+    let dom = document.getElementById(key);
    if (dom) {
      await rtcEngine.destroyRendererByView(dom);
    }