From 8c2b484401784ac3714910c3b3a9292af0bfbd6f Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 17 Jul 2024 11:22:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F1?= 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 | 66 ++++++++++++++++++-------------------- 2 files changed, 36 insertions(+), 40 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 16be050..7e7ca9e 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -14,7 +14,6 @@ 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 = () => { @@ -111,6 +110,8 @@ 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; @@ -122,7 +123,6 @@ const Meeting: React.FC = () => { userid: userInfo.account, token: state.token, }) - agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary) setCurrentVideoId(userInfo.account) setUser(userInfo) setIsInit(false) @@ -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.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary) + agora.stopScreenCapture() 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, VideoSourceType.VideoSourceScreen) + agora.setDesktopCapturerVideo(sharedScreenItem) } else { message.error('请选择应用!') } diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 82e7e45..72293c7 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -17,7 +17,6 @@ const option: any = { token: '', channelId: '', userid: '', - sourceType: VideoSourceType.VideoSourceCameraPrimary, } let iMediaRecorder: any = ''; let rtcEngine: any = ''; @@ -78,7 +77,8 @@ const agora = { setupLocalVideo: (item: any) => { rtcEngine.setupLocalVideo({ renderMode: RenderModeType.RenderModeFit, - sourceType: option.sourceType, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + // sourceType: option.isCamera ? VideoSourceType.VideoSourceCameraPrimary : VideoSourceType.VideoSourceScreen, uid: item.account, view: item.view, setupMode: VideoViewSetupMode.VideoViewSetupAdd, @@ -116,16 +116,29 @@ const agora = { storage.setItem('isJoin', false) }, // 加入频道 - joinChannel: () => { - rtcEngine.joinChannel(option.token, option.channelId, option.userid, { - channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 - clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 1主播 2观众 - publishMicrophoneTrack: true, //设置是否发布麦克风采集到的音频 - publishCameraTrack: true, //设置是否发布摄像头采集的视频 - publishScreenTrack: true, //设置是否发布屏幕采集的视频 - autoSubscribeAudio: true, //设置是否自动订阅所有音频流 - autoSubscribeVideo: true, //设置是否自动订阅所有视频流 - }); + joinChannel: (bool: boolean) => { + // false 摄像头 true 共享屏幕 + 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, { + channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 + clientRoleType: ClientRoleType.ClientRoleBroadcaster, //设置用户角色为主播；如果要将用户角色设置为观众，保持默认值即可 + publishMicrophoneTrack: true, //发布麦克风采集的音频 + publishCameraTrack: true, //发布摄像头采集的视频 + publishScreenTrack: false, //设置是否发布屏幕采集的视频 + autoSubscribeAudio: true, //自动订阅所有音频流 + autoSubscribeVideo: true, //自动订阅所有视频流 + }); + } }, // 停止共享屏幕 stopScreenCapture: () => { @@ -140,42 +153,25 @@ const agora = { rtcEngine.muteLocalVideoStream(mute) }, // 摄像头采集 - 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, - }) - } + setCameraCapture: () => { rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) + agora.joinChannel(false) }, // 加入频道 setJoinChannel: (data: any) => { option.token = data.token; option.channelId = data.channelId; option.userid = Number(data.userid); - agora.joinChannel() + rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) + agora.joinChannel(false) }, // 桌面捕获音频和视频的媒体源的信息 getDesktopCapturerVideo: async () => { return rtcEngine.getScreenCaptureSources({ width: 300, height: 300 }, { width: 300, height: 300 }, true); }, // 共享屏幕采集 - setDesktopCapturerVideo: (targetSource: any, sourceType: number) => { - if (sourceType !== option.sourceType) { - 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, - }) - } + setDesktopCapturerVideo: (targetSource: any) => { + // rtcEngine.stopCameraCapture(VideoSourceType.VideoSourceCamera); agora.stopScreenCapture(); if ( targetSource.type ===