From d3faf2b144ded346ca5d3ce9543ab14c2d7ecf83 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 17 Jul 2024 14:17:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B1=E4=BA=AB=E5=B1=8F=E5=B9=95=E5=87=86?= =?UTF-8?q?=E5=A4=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 10 ++--- src/utils/package/agora.ts | 76 ++++++++++++++++++++++++++------------ 2 files changed, 58 insertions(+), 28 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 7e7ca9e..f5851c8 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -14,6 +14,7 @@ import StupWizard from '@/components/StupWizard'; import { onInvoke, onSignalr } from '@/utils/package/signalr'; import dayjs from 'dayjs'; import durationPlugin from 'dayjs/plugin/duration'; +import { VideoSourceType } from 'agora-electron-sdk'; dayjs.extend(durationPlugin); const { Column } = Table const Meeting: React.FC = () => { @@ -110,14 +111,13 @@ const Meeting: React.FC = () => { const [currentVideoId, setCurrentVideoId] = useState('') let [currentSeconds, setCurrentSeconds] = useState(0) const [currentEffective, setCurrentEffective] = useState(0) - - const [list] = useState([1, 2, 3, 4, 5, 6, 7]) const [open, setOpen] = useState(false) useEffect(() => { let time = null as any; if (isInit) { let userInfo = JSON.parse(storage.getItem('user') as string) agora.init() + agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary) agora.setJoinChannel({ channelId: state.channelId, userid: userInfo.account, @@ -187,7 +187,7 @@ const Meeting: React.FC = () => { }, []) useEffect(() => { - console.log(currentVideoId); + }, [currentVideoId]) // 加入房间时间 @@ -223,7 +223,7 @@ const Meeting: React.FC = () => { setIsSharedScreenModal(true) break; case '停止共享': - agora.stopScreenCapture() + agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary) footerListTemplate[itemIndex][rowIndex].title = '共享屏幕' break; case '关闭声音': @@ -288,7 +288,7 @@ const Meeting: React.FC = () => { const footerListTemplate = [...footerList] footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享' setIsSharedScreenModal(false) - agora.setDesktopCapturerVideo(sharedScreenItem) + agora.setDesktopCapturerVideo(sharedScreenItem, VideoSourceType.VideoSourceScreen) } else { message.error('请选择应用!') } diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 72293c7..af1b6bc 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -17,6 +17,7 @@ const option: any = { token: '', channelId: '', userid: '', + sourceType: VideoSourceType.VideoSourceCameraPrimary, } let iMediaRecorder: any = ''; let rtcEngine: any = ''; @@ -77,12 +78,19 @@ const agora = { setupLocalVideo: (item: any) => { rtcEngine.setupLocalVideo({ renderMode: RenderModeType.RenderModeFit, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - // sourceType: option.isCamera ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceScreen, + sourceType: option.sourceType, uid: item.account, view: item.view, setupMode: VideoViewSetupMode.VideoViewSetupAdd, }); + switch (option.sourceType) { + case VideoSourceType.VideoSourceCameraPrimary: + agora.updateChannelMediaOptions(true) + break; + case VideoSourceType.VideoSourceScreen: + agora.updateChannelMediaOptions(false) + break; + } }, // 远端加入 setupRemoteVideoJoin: (item: any) => { @@ -116,20 +124,14 @@ const agora = { storage.setItem('isJoin', false) }, // 加入频道 - joinChannel: (bool: boolean) => { - // false 摄像头 true 共享屏幕 + joinChannel: () => { + rtcEngine.joinChannel(option.token, option.channelId, option.userid, {}); + }, + // 更新频道信息 + updateChannelMediaOptions: (bool: boolean) => { if (bool) { - rtcEngine.joinChannel(option.token, option.channelId, option.userid, { - channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 - clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众 - publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频 - publishCameraTrack: false, //设置是否发布摄像头采集的视频 - publishScreenTrack: true, //设置是否发布屏幕采集的视频 - autoSubscribeAudio: true, //设置是否自动订阅所有音频流 - autoSubscribeVideo: true, //设置是否自动订阅所有视频流 - }); - } else { - rtcEngine.joinChannel(option.token, option.channelId, option.userid, { + // 摄像头 + rtcEngine.updateChannelMediaOptions({ channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 clientRoleType: ClientRoleType.ClientRoleBroadcaster, //设置用户角色为主播；如果要将用户角色设置为观众，保持默认值即可 publishMicrophoneTrack: true, //发布麦克风采集的音频 @@ -137,7 +139,18 @@ const agora = { publishScreenTrack: false, //设置是否发布屏幕采集的视频 autoSubscribeAudio: true, //自动订阅所有音频流 autoSubscribeVideo: true, //自动订阅所有视频流 - }); + }) + } else { + // 屏幕 + rtcEngine.updateChannelMediaOptions({ + channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 + clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众 + publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频 + publishCameraTrack: false, //设置是否发布摄像头采集的视频 + publishScreenTrack: true, //设置是否发布屏幕采集的视频 + autoSubscribeAudio: true, //设置是否自动订阅所有音频流 + autoSubscribeVideo: true, //设置是否自动订阅所有视频流 + }) } }, // 停止共享屏幕 @@ -153,25 +166,42 @@ const agora = { rtcEngine.muteLocalVideoStream(mute) }, // 摄像头采集 - setCameraCapture: () => { + setCameraCapture: (sourceType: number) => { + agora.stopScreenCapture() + if (sourceType !== option.sourceType) { + rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account) + option.sourceType = sourceType + agora.setupLocalVideo({ + account: Number(option.userid), + view: document.getElementById(`video-${option.userid}`), + channelId: option.channelId, + }) + } rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) - agora.joinChannel(false) }, // 加入频道 - setJoinChannel: (data: any) => { + setJoinChannel: async (data: any) => { option.token = data.token; option.channelId = data.channelId; option.userid = Number(data.userid); - rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) - agora.joinChannel(false) + agora.joinChannel() }, // 桌面捕获音频和视频的媒体源的信息 getDesktopCapturerVideo: async () => { return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true); }, // 共享屏幕采集 - setDesktopCapturerVideo: (targetSource: any) => { - // rtcEngine.stopCameraCapture(VideoSourceType.VideoSourceCamera); + setDesktopCapturerVideo: async (targetSource: any, sourceType: number) => { + if (sourceType !== option.sourceType) { + await rtcEngine.stopCameraCapture(option.sourceType) + rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account) + option.sourceType = sourceType + agora.setupLocalVideo({ + account: Number(option.userid), + view: document.getElementById(`video-${option.userid}`), + channelId: option.channelId, + }) + } agora.stopScreenCapture(); if ( targetSource.type ===