From 690dfe2e138aa5d8f3e79ec4519b9ed29d651c03 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 7 Aug 2024 11:45:40 +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/page/Meeting/index.tsx | 39 +++++++------------------ src/utils/package/agora.ts | 56 +++++++++++++++++++----------------- src/utils/package/signalr.ts | 1 - 3 files changed, 39 insertions(+), 57 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index a9c2239..7bdd1cb 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -138,7 +138,7 @@ const Meeting: React.FC = () => { }) view.setAttribute('load', 'true') } - if (String(info.localUid).length === 9) { + if (String(info.localUid).length === 9 && userInfo.screenShareId == info.localUid) { await agora.setupLocalVideo({ uid: Number(info.localUid), view: document.getElementById(`look-video`) as HTMLElement, @@ -161,8 +161,7 @@ const Meeting: React.FC = () => { }) view.setAttribute('load', 'true') } - if (String(remoteUid).length === 9) { - console.log(String(remoteUid)); + if (String(remoteUid).length === 9 && userInfo.screenShareId != remoteUid) { await agora.setupRemoteVideoJoin({ uid: Number(remoteUid), view: document.getElementById(`look-video`) as HTMLElement, @@ -174,7 +173,7 @@ const Meeting: React.FC = () => { onUserOffline: async (info: any, remoteUid: any, _reason: any) => { await agora.setupRemoteVideo({ uid: Number(remoteUid), - view: document.getElementById(`video-${remoteUid}`) as HTMLElement, + view: null, channelId: info.channelId, }) setTimeout(() => { @@ -182,7 +181,7 @@ const Meeting: React.FC = () => { }, 1000); } }) - agora.setCameraCapture() + agora.startCameraCapture() agora.setJoinChannel({ channelId: state.channelId, uid: userInfo.uid, @@ -276,27 +275,6 @@ const Meeting: React.FC = () => { }, [currentVideoId]) - useEffect(() => { - const userItem = allUserList.find((item: any) => item.uid === currentLookUserAccount) - if (userItem) { - if (userItem.uid === user.uid) { - // agora.setupLocalVideo({ - // account: Number(userItem.uid), - // view: document.getElementById(`look-video`) as HTMLElement, - // channelId: state.channelId, - // sourceType: VideoSourceType.VideoSourceCameraPrimary, - // }) - } else { - // agora.setupRemoteVideoJoin({ - // account: Number(userItem.uid), - // view: document.getElementById(`look-video`) as HTMLElement, - // channelId: state.channelId, - // sourceType: VideoSourceType.VideoSourceCameraPrimary, - // }) - } - } - }, [allUserList, currentLookUserAccount]) - // 网络 const handleNetworkChange = (): void => { if (navigator.onLine) { @@ -360,7 +338,8 @@ const Meeting: React.FC = () => { setIsSharedScreenModal(true) break; case '停止共享': - agora.setCameraCapture() + await agora.destroyRendererByConfig(user.screenShareId) + agora.stopScreenCapture() footerListTemplate[itemIndex][rowIndex].title = '共享屏幕' break; case '关闭声音': @@ -379,13 +358,15 @@ const Meeting: React.FC = () => { footerListTemplate[itemIndex][rowIndex].title = '开启视频' footerListTemplate[itemIndex][rowIndex].active = true setFooterList(footerListTemplate) - postOpenCamera(false, user.uid) + await postOpenCamera(false, user.uid) + await agora.stopCameraCapture(); break; case '开启视频': footerListTemplate[itemIndex][rowIndex].title = '关闭视频' footerListTemplate[itemIndex][rowIndex].active = false setFooterList(footerListTemplate) - postOpenCamera(true, user.uid) + await postOpenCamera(true, user.uid) + await agora.startCameraCapture() break; case '设置向导': // stupWizardRef.current.changeModal() diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 9153b4d..0ed1423 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -56,9 +56,6 @@ const agora = { onUserOffline: async (info: any, remoteUid: any, reason: any) => { await onUserOffline(info, remoteUid, reason) }, - // onConnectionStateChanged: (connection: any, state: any, reason: any) => { - // console.log(connection, reason) - // }, // // 视频发布状态改变回调 // onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { // if (newState === 1) { @@ -138,6 +135,22 @@ const agora = { publishScreenTrack: false, }); }, + // 共享屏幕单独用户 + joinChannelEx: async (uid: any) => { + await rtcEngine.leaveChannelEx({ channelId: option.channelId, localUid: Number(uid) }) + await rtcEngine.joinChannelEx( + option.token, + { channelId: option.channelId, localUid: Number(uid) }, + { + autoSubscribeAudio: false, + autoSubscribeVideo: false, + publishMicrophoneTrack: false, + publishCameraTrack: false, + clientRoleType: ClientRoleType.ClientRoleBroadcaster, + publishScreenTrack: true, + } + ); + }, // 停止共享屏幕 stopScreenCapture: () => { rtcEngine.stopScreenCapture(); @@ -151,17 +164,12 @@ const agora = { rtcEngine.muteLocalVideoStream(mute) }, // 摄像头采集 - setCameraCapture: () => { - agora.stopScreenCapture() - const user = JSON.parse(storage.getItem('user') as string) - rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(user.screenShareId)) - agora.setupLocalVideo({ - uid: Number(option.uid), - view: document.getElementById(`video-${option.uid}`), - channelId: option.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) - rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) + startCameraCapture: async () => { + await rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) + }, + // 停止采集摄像头 + stopCameraCapture: async () => { + await rtcEngine.stopCameraCapture() }, // 加入频道 setJoinChannel: async (data: any) => { @@ -178,7 +186,6 @@ const agora = { setDesktopCapturerVideo: async (targetSource: any) => { // await rtcEngine.stopCameraCapture(option.sourceType) const user = JSON.parse(storage.getItem('user') as string) - rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(user.screenShareId)) agora.stopScreenCapture(); if ( targetSource.type === @@ -204,18 +211,8 @@ const agora = { } ); } - rtcEngine.joinChannelEx( - option.token, - { channelId: option.channelId, localUid: Number(user.screenShareId) }, - { - autoSubscribeAudio: false, - autoSubscribeVideo: false, - publishMicrophoneTrack: false, - publishCameraTrack: false, - clientRoleType: ClientRoleType.ClientRoleBroadcaster, - publishScreenTrack: true, - } - ); + await agora.destroyRendererByConfig(user.screenShareId) + await agora.joinChannelEx(user.screenShareId) }, // 停止录制音视频 stopRecording: () => { @@ -223,6 +220,11 @@ const agora = { rtcEngine.destroyMediaRecorder(iMediaRecorder) iMediaRecorder = "" }, + // 销毁视频 + destroyRendererByConfig: async (uid: any) => { + await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(uid)) + await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceRemote, option.channelId, Number(uid)) + }, // 开始录制音视频 startRecording: (uid: number) => { iMediaRecorder = rtcEngine.createMediaRecorder({ diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index 20e63a2..3fcb6a2 100644 --- a/src/utils/package/signalr.ts +++ b/src/utils/package/signalr.ts @@ -24,7 +24,6 @@ export const onStart = async (callBack?: Function) => { callBack() } } catch (err) { - console.log(err); setTimeout(onStart, 5000); } }