优化

src/components/JoinSetting/index.tsx

@@ -170,7 +170,7 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
                       setJoinRoomSettingForm(list)
                       if (index === 1) {
                         if (list[index].active) {
-                          agora.startPreview('videoPreview', Number(user.screenShareId))
+                          agora.startPreview('videoPreview', Number(user.screenShareId), +new Date())
                         }
                       }
                     } else {

src/components/StupWizard/index.tsx

@@ -11,6 +11,7 @@ import { storageSeeting } from '@/utils/package/public';
 let meetingUserInfo = '' as any;
 const fs = require('fs').promises;
 const { exec } = require('child_process');
+let c = +new Date();
 const StupWizard = forwardRef((_props: any, ref: any) => {
     useImperativeHandle(ref, () => ({
         changeModal: (index: number = 0, data: any) => {
@@ -84,6 +85,8 @@ const StupWizard = forwardRef((_props: any, ref: any) => {
                         {list.map((row: any, index: number) => {
                             return (
                                 <div key={index} className={`${row.active ? styles.active : ''}`} onClick={async () => {
+                                    const userInfo = JSON.parse(storage.getItem('user') as string)
+                                    await agora.destroyRendererByConfigPreview(Number(userInfo.screenShareId), c)
                                     const newList = [...list];
                                     newList.forEach(item => item.active = false);
                                     newList[index].active = true;
@@ -247,7 +250,7 @@ const VideoComponents = () => {
             })
             if (setting.videoDeviceId && list.length) {
                 await agora.setVideoDeviceManager(setting.videoDeviceId)
-                await agora.startPreview('videoPreview', Number(userInfo.screenShareId))
+                await agora.startPreview('videoPreview', Number(userInfo.screenShareId), c)
             }
         })
     }
@@ -305,7 +308,7 @@ const VideoComponents = () => {
                                 agora.setVideoDeviceManager(e)
                                 if (!setting.videoDeviceId) {
                                     const userInfo = JSON.parse(storage.getItem('user') as string)
-                                    await agora.startPreview('videoPreview', Number(userInfo.screenShareId))
+                                    await agora.startPreview('videoPreview', Number(userInfo.screenShareId), c)
                                 }
                                 setting.videoDeviceId = e;
                                 storage.setItem('setting', JSON.stringify(setting))

src/page/Meeting/index.tsx

@@ -176,6 +176,7 @@ const Meeting: React.FC = () => {
   const [_isLeave, setIsLeave] = useState(false)
   const [isScreenCapture, setIsScreenCapture] = useState(false)
   const [isFluencyPriority, setIsFluencyPriority] = useState(false)
+  const [isClickLock, setIsClickLock] = useState(false)
   const [open, setOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
@@ -982,6 +983,7 @@ const Meeting: React.FC = () => {
             channelId: state.channelId,
             sourceType: VideoSourceType.VideoSourceCameraPrimary,
           })
+          setIsClickLock(false)
           break;
         case 2:
           await agora.setupLocalVideo({
@@ -990,6 +992,7 @@ const Meeting: React.FC = () => {
             channelId: state.channelId,
             sourceType: VideoSourceType.VideoSourceScreen,
           })
+          setIsClickLock(false)
           break;
         case 3:
           await agora.setupRemoteVideoJoin({
@@ -997,6 +1000,7 @@ const Meeting: React.FC = () => {
             view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
             channelId: state.channelId,
           })
+          setIsClickLock(false)
           break;
         case 4:
           await agora.setupRemoteVideoJoin({
@@ -1004,13 +1008,16 @@ const Meeting: React.FC = () => {
             view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
             channelId: state.channelId,
           })
+          setIsClickLock(false)
           break;
       }
     }
-    setTimeout(() => {
-      setView()
-    }, currentVideoId ? 0 : 1500);
-  }, [currentLookUserStatus]);
+    if (currentVideoUid) {
+      setTimeout(() => {
+        setView()
+      }, currentVideoId ? 0 : 1500);
+    }
+  }, [currentVideoUid]);
 
   useEffect(() => {
     if (isScreenCapture) {
@@ -1431,20 +1438,20 @@ const Meeting: React.FC = () => {
   }
   // 渲染视频
   const renderVideo = async (uid: string = ''): Promise<void> => {
+    if (isClickLock) {
+      return
+    }
     if (uid) {
-      if (currentVideoId === uid) {
+      if (currentVideoId === uid || currentVideoUid === uid) {
         return
       }
     } else {
       uid = userInfo.uid
     }
-    setCurrentVideoUid(uid)
-    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`)
-    }
+    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)
@@ -1453,24 +1460,27 @@ const Meeting: React.FC = () => {
       }
       return res
     })
-    setTimeout(() => {
-      if (uid === userInfo.uid || uid === userInfo.screenShareId) {
-        if (String(uid).length === 9) {
-          // 共享屏幕
-          setCurrentLookUserStatus(2)
-        } else {
-          // 摄像头
-          setCurrentLookUserStatus(1)
-        }
+    setIsClickLock(true)
+    setCurrentVideoUid('')
+    if (uid === userInfo.uid || uid === userInfo.screenShareId) {
+      if (String(uid).length === 9) {
+        // 共享屏幕
+        setCurrentLookUserStatus(2)
       } else {
-        if (String(uid).length === 9) {
-          // 共享屏幕
-          setCurrentLookUserStatus(3)
-        } else {
-          // 摄像头
-          setCurrentLookUserStatus(4)
-        }
+        // 摄像头
+        setCurrentLookUserStatus(1)
       }
+    } else {
+      if (String(uid).length === 9) {
+        // 共享屏幕
+        setCurrentLookUserStatus(3)
+      } else {
+        // 摄像头
+        setCurrentLookUserStatus(4)
+      }
+    }
+    setTimeout(() => {
+      setCurrentVideoUid(uid)
     }, 500);
   }
   // 全员观看

src/utils/package/agora.ts

@@ -393,6 +393,10 @@ export const agora = {
   destroyRendererByConfig: async (uid: number, channelId?: string) => {
     await rtcEngine.destroyRendererByConfig(option.uid === uid ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceRemote, channelId, uid);
   },
+  destroyRendererByConfigPreview: async (uid: number, channelId: number) => {
+    await agora.destroyRendererByView('videoPreview')
+    await rtcEngine.leaveChannelEx({ channelId: `${channelId + uid}`, localUid: Number(uid) })
+  },
   destroyRendererByView: async (key: string) => {
     let dom = document.getElementById(key);
     if (dom) {
@@ -515,12 +519,12 @@ export const agora = {
     await rtcEngine.getVideoDeviceManager().setDevice(deviceIdUTF8)
   },
   // 开启本地视频预览
-  startPreview: async (id: string, uid: number): Promise<void> => {
+  startPreview: async (id: string, uid: number, channelId: number): Promise<void> => {
     rtcEngine.enableVideo();
     rtcEngine.startPreview();
-    await GetRoomRtcToken(`${+new Date()}`).then(async (res) => {
+    await GetRoomRtcToken(`${channelId + uid}`).then(async (res) => {
       await rtcEngine.joinChannelEx(res.data, {
-        channelId: `${+new Date() + uid}`,
+        channelId: `${channelId + uid}`,
         localUid: uid,
       }, {
         channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,