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,