From 678962d1e90eddf3d79622fa8a4a0d11c48c4cbb Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 21 Jan 2025 10:29:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/JoinSetting/index.tsx | 2 +- src/components/StupWizard/index.tsx | 7 ++- src/page/Meeting/index.tsx | 66 ++++++++++++++++------------ src/utils/package/agora.ts | 10 +++-- 4 files changed, 51 insertions(+), 34 deletions(-) diff --git a/src/components/JoinSetting/index.tsx b/src/components/JoinSetting/index.tsx index e8be5b5..a3a6f93 100644 --- a/src/components/JoinSetting/index.tsx +++ b/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 { diff --git a/src/components/StupWizard/index.tsx b/src/components/StupWizard/index.tsx index 55dde8c..6e59b4b 100644 --- a/src/components/StupWizard/index.tsx +++ b/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 (
{ + 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)) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 73cc58a..1e23a22 100644 --- a/src/page/Meeting/index.tsx +++ b/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 => { + 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); } // 全员观看 diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 55adcfe..b9515af 100644 --- a/src/utils/package/agora.ts +++ b/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 => { + startPreview: async (id: string, uid: number, channelId: number): Promise => { 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,