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 (uid === userInfo.uid || uid === userInfo.screenShareId) {
+      if (String(uid).length === 9) {
-        if (String(uid).length === 9) {
+        // 共享屏幕
-          // 共享屏幕
+        setCurrentLookUserStatus(2)
-          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);
-        }
       } else {
-        if (String(uid).length === 9) {
+        // 摄像头
-          // 共享屏幕
+        setCurrentLookUserStatus(1)
-          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);
-        }
       }
-    }, 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}>

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 () => {
+  destroyRendererByView: async (key: string) => {
-    let dom = document.getElementById(`meetingAbsoluteVideo`);
+    let dom = document.getElementById(key);
     if (dom) {
       await rtcEngine.destroyRendererByView(dom);
     }