From 0df7896ee5745d5794acffdbc997971124583b87 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Thu, 11 Jul 2024 10:57:06 +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 | 49 ++++++------ src/utils/package/{agora.js => agora.ts} | 95 +++++++++++------------- 2 files changed, 70 insertions(+), 74 deletions(-) rename src/utils/package/{agora.js => agora.ts} (80%) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 15ad22e..0b16456 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -14,6 +14,7 @@ import { storage } from '@/utils'; import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl } from '@/api/Meeting'; import axios from 'axios'; import ImageUrl from '@/utils/package/imageUrl' +import agora from '@/utils/package/agora' const { Column } = Table const Meeting: React.FC = () => { const navigate = useNavigate(); @@ -118,7 +119,7 @@ const Meeting: React.FC = () => { useEffect(() => { if (isInit) { setUser(JSON.parse(storage.getItem('user') as string)) - // window.agora.setJoinChannel({ + // agora.setJoinChannel({ // channelId: state.channelId, // userid: user.userName, // token: state.token, @@ -153,49 +154,49 @@ const Meeting: React.FC = () => { setIsSharedScreenModal(true) break; case '停止共享': - window.agora.stopScreenCapture() + agora.stopScreenCapture() footerListTemplate[itemIndex][rowIndex].title = '共享屏幕' break; case '关闭声音': footerListTemplate[itemIndex][rowIndex].title = '开启声音' footerListTemplate[itemIndex][rowIndex].active = true setFooterList(footerListTemplate) - window.agora.muteLocalAudioStream(true) + agora.muteLocalAudioStream(true) break; case '开启声音': footerListTemplate[itemIndex][rowIndex].title = '关闭声音' footerListTemplate[itemIndex][rowIndex].active = false setFooterList(footerListTemplate) - window.agora.muteLocalAudioStream(false) + agora.muteLocalAudioStream(false) break; case '关闭视频': footerListTemplate[itemIndex][rowIndex].title = '开启视频' footerListTemplate[itemIndex][rowIndex].active = true setFooterList(footerListTemplate) - window.agora.muteLocalVideoStream(true) + agora.muteLocalVideoStream(true) break; case '开启视频': footerListTemplate[itemIndex][rowIndex].title = '关闭视频' footerListTemplate[itemIndex][rowIndex].active = false setFooterList(footerListTemplate) - window.agora.muteLocalVideoStream(false) + agora.muteLocalVideoStream(false) break; case '设置向导': getAudioMediaList() - window.agora.startRecordingDeviceTest(200) + agora.startRecordingDeviceTest(200) setIsStupWizard(true) break; case '录制': footerListTemplate[itemIndex][rowIndex].title = '录制中' footerListTemplate[itemIndex][rowIndex].active = true setFooterList(footerListTemplate) - window.agora.startRecording() + agora.startRecording() break; case '录制中': footerListTemplate[itemIndex][rowIndex].title = '录制' footerListTemplate[itemIndex][rowIndex].active = false setFooterList(footerListTemplate) - window.agora.stopRecording() + agora.stopRecording() break; case '共享文件': await getRoomFile() @@ -213,8 +214,8 @@ const Meeting: React.FC = () => { const footerListTemplate = [...footerList] footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享' setIsSharedScreenModal(false) - window.agora.setDesktopCapturerVideo(sharedScreenItem) - setVideoID(window.agora.getVideoId()) + agora.setDesktopCapturerVideo(sharedScreenItem) + setVideoID(agora.getVideoId()) } else { message.error('请选择应用!') } @@ -222,7 +223,7 @@ const Meeting: React.FC = () => { } const getDesktopCapturerVideo = (): void => { - window.agora.getDesktopCapturerVideo().then((res: any) => { + agora.getDesktopCapturerVideo().then((res: any) => { if (sharedScreenList.length !== res.length) { res.forEach((item: any) => { if (item.thumbImage.buffer) { @@ -238,7 +239,7 @@ const Meeting: React.FC = () => { }; const getAudioMediaList = (): void => { - const { currentDevices, currentDevice, currentVolume } = window.agora.getAudioMediaList(); + const { currentDevices, currentDevice, currentVolume } = agora.getAudioMediaList(); setAudioDeviceManager({ currentDevices: currentDevices.map((row: any) => { return { @@ -404,13 +405,13 @@ const Meeting: React.FC = () => { content={
{ - window.agora.leaveChannel() - window.agora.stopScreenCapture() + agora.leaveChannel() + agora.stopScreenCapture() navigate(-1) }}>全员结束会议
{ - window.agora.leaveChannel() - window.agora.stopScreenCapture() + agora.leaveChannel() + agora.stopScreenCapture() navigate(-1) }}>仅自己离开
{ setOpen(false) }}>取消
@@ -481,7 +482,7 @@ const Meeting: React.FC = () => { ...audioDeviceManager, currentDevice: e }) - window.agora.setRecordingDevice(e); + agora.setRecordingDevice(e); getAudioMediaList() }} />; @@ -493,7 +494,7 @@ const Meeting: React.FC = () => { ...audioDeviceManager, currentVolume: e }) - window.agora.setRecordingDeviceVolume(e) + agora.setRecordingDeviceVolume(e) }} style={{ flexGrow: 1 }} />
:
@@ -530,7 +531,7 @@ const Meeting: React.FC = () => { audio.srcObject = null; } setStepsStatus(false) - window.agora.startPreview().then((res: boolean) => { + agora.startPreview().then((res: boolean) => { setIsVideoLoad(res) }) }}>下一步 @@ -542,9 +543,9 @@ const Meeting: React.FC = () => { onClick={() => { if (isVideoLoad) { setIsVideoLoad(false) - window.agora.stopAudioDeviceLoopbackTest() + agora.stopAudioDeviceLoopbackTest() setStepsStatus(true) - window.agora.startRecordingDeviceTest(200) + agora.startRecordingDeviceTest(200) } else { message.error('视频加载中！') } @@ -555,8 +556,8 @@ const Meeting: React.FC = () => { className='m-ant-btn' onClick={() => { if (isVideoLoad) { - window.agora.stopAudioDeviceLoopbackTest() - window.agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume) + agora.stopAudioDeviceLoopbackTest() + agora.setRecordingDeviceVolume(audioDeviceManager.currentVolume) setIsStupWizard(false) setStepsStatus(true) setIsVideoLoad(false) diff --git a/src/utils/package/agora.js b/src/utils/package/agora.ts similarity index 80% rename from src/utils/package/agora.js rename to src/utils/package/agora.ts index 2e07b48..d642857 100644 --- a/src/utils/package/agora.js +++ b/src/utils/package/agora.ts @@ -11,7 +11,7 @@ const { } = require("agora-electron-sdk"); const { message } = require('antd'); const rtcEngine = createAgoraRtcEngine(); -const option = { +const option: any = { appId: 'dcfc466a6ecb4a1f972630065dfb1e75', token: '', channelId: '', @@ -23,7 +23,7 @@ rtcEngine.initialize({ rtcEngine.registerEventHandler({ // 监听本地用户加入频道事件 - onJoinChannelSuccess: ({ channelId, localUid }, elapsed) => { + onJoinChannelSuccess: ({ channelId, localUid }: any, elapsed: any) => { console.log({ channelId, localUid }, elapsed, '加入房间'); // 本地用户加入频道后，设置本地视频窗口 rtcEngine.setupLocalVideo({ @@ -31,61 +31,64 @@ rtcEngine.registerEventHandler({ // sourceType: VideoSourceType.VideoSourceScreen, sourceType: VideoSourceType.VideoSourceCameraPrimary, uid: localUid, - view: getDom(), + view: agora.getDom(), setupMode: VideoViewSetupMode.VideoViewSetupAdd, }); }, // 监听远端用户加入频道事件 - onUserJoined: ({ channelId, localUid }, remoteUid, elapsed) => { + onUserJoined: ({ channelId, localUid }: any, remoteUid: any, elapsed: any) => { + console.log({ channelId, localUid }, remoteUid, '远端加入频道'); // 远端用户加入频道后，设置远端视频窗口 rtcEngine.setupRemoteVideo( { renderMode: RenderModeType.RenderModeFit, sourceType: VideoSourceType.VideoSourceRemote, uid: remoteUid, - view: getDom(), + view: agora.getDom(), setupMode: VideoViewSetupMode.VideoViewSetupAdd, }, { channelId }, ); }, - // 视频发布状态改变回调 - onVideoPublishStateChanged: (source, channel, oldState, newState, elapseSinceLastState) => { - if (newState === 1) { - - } - }, - // 音频发布状态改变回调 - onAudioPublishStateChanged: (channel, oldState, newState, elapseSinceLastState) => { - if (newState === 1) { - - } - }, // 监听用户离开频道事件 - onUserOffline: ({ channelId, localUid }, remoteUid, reason) => { + onUserOffline: ({ channelId, localUid }: any, remoteUid: any, reason: any) => { // 远端用户离开频道后，关闭远端视频窗口 + console.log({ channelId, localUid }, remoteUid, '离开频道'); rtcEngine.setupRemoteVideo( { renderMode: RenderModeType.RenderModeFit, sourceType: VideoSourceType.VideoSourceRemote, uid: remoteUid, - view: getDom(), + view: agora.getDom(), setupMode: VideoViewSetupMode.VideoViewSetupRemove, }, ); }, + // 视频发布状态改变回调 + onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { + if (newState === 1) { + + } + }, + // 音频发布状态改变回调 + onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { + if (newState === 1) { + + } + }, // 用户音量提示回调。 - onAudioVolumeIndication: (connection, speakers, speakerNumber, totalVolume) => { + onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => { const percentage = (totalVolume / 255) * 100 - if (document.getElementById('recordingDeviceTest')) { - document.getElementById('recordingDeviceTest').style.width = `${percentage}%` + const dom = document.getElementById('recordingDeviceTest') as any; + if (dom) { + dom.style.width = `${percentage}%` } } }); -let videoID = ''; -let iMediaRecorder = ''; +let videoID: string = ''; +let iMediaRecorder: any = ''; const agora = { getDom: () => { @@ -100,7 +103,7 @@ const agora = { }) }, // 加入频道 - joinChannel: (bool) => { + joinChannel: (bool: boolean) => { if (bool) { rtcEngine.joinChannel(option.token, option.channelId, option.userid, { channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting, //设置频道场景为直播场景 @@ -137,11 +140,11 @@ const agora = { }) iMediaRecorder.setMediaRecorderObserver({ // 录制状态发生改变回调。 - onRecorderStateChanged: (channelId, uid, state, reason) => { + onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => { console.log(channelId, uid, state, reason, '录制状态发生改变回调。'); }, // 录制信息更新回调。 - onRecorderInfoUpdated: (channelId, uid, info) => { + onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => { console.log(channelId, uid, info, '录制信息更新回调。'); }, }) @@ -157,13 +160,13 @@ const agora = { rtcEngine.stopScreenCapture(); }, // 开启本地视频预览 - startPreview: async () => { + startPreview: async (): Promise => { return new Promise((resolve, reject) => { navigator.mediaDevices.getUserMedia({ video: true, audio: true, }).then((stream) => { - let dom = document.getElementById('startPreview'); + let dom = document.getElementById('startPreview') as any; dom.srcObject = stream; dom.play() resolve(true) @@ -177,29 +180,29 @@ const agora = { stopAudioDeviceLoopbackTest: () => { rtcEngine.getAudioDeviceManager().stopAudioDeviceLoopbackTest() rtcEngine.getAudioDeviceManager().stopRecordingDeviceTest() - let video = document.getElementById('startPreview'); + let video = document.getElementById('startPreview') as any; if (video.srcObject) { const tracks = video.srcObject.getTracks(); - tracks.forEach((track) => { + tracks.forEach((track: any) => { track.stop(); }); video.srcObject = null; } - let audio = document.getElementById('startAudio'); + let audio = document.getElementById('startAudio') as any; if (audio.srcObject) { const tracks = audio.srcObject.getTracks(); - tracks.forEach((track) => { + tracks.forEach((track: any) => { track.stop(); }); audio.srcObject = null; } }, // 启动音频采集设备测试 - startRecordingDeviceTest: (indicationInterval) => { + startRecordingDeviceTest: (indicationInterval: number) => { rtcEngine.getAudioDeviceManager().startRecordingDeviceTest(indicationInterval) navigator.mediaDevices.getUserMedia({ audio: true }) .then((stream) => { - let dom = document.getElementById('startAudio'); + let dom = document.getElementById('startAudio') as any; dom.srcObject = stream; dom.play() }) @@ -216,11 +219,11 @@ const agora = { } }, // 设置音频设备音量 - setRecordingDeviceVolume: (volume) => { + setRecordingDeviceVolume: (volume: number) => { rtcEngine.getAudioDeviceManager().setRecordingDeviceVolume(volume) }, // 设置音频采集设备 - setRecordingDevice: (deviceId) => { + setRecordingDevice: (deviceId: string) => { rtcEngine.getAudioDeviceManager().setRecordingDevice(deviceId) }, // 摄像头采集 @@ -229,27 +232,19 @@ const agora = { // joinChannel(false) }, // 加入频道 - setJoinChannel: (data) => { + setJoinChannel: (data: any) => { option.token = data.token; option.channelId = data.channelId; option.userid = Number(data.userid); rtcEngine.startCameraCapture(VideoSourceType.VideoSourceCamera, {}) // joinChannel(false) }, - // 离开频道 - leaveChannel: () => { - // leaveChannel() - }, - // 停止共享屏幕 - stopScreenCapture: () => { - // stopScreenCapture() - }, // 取消或恢复发布本地音频流 - muteLocalAudioStream: (mute) => { + muteLocalAudioStream: (mute: any) => { rtcEngine.muteLocalAudioStream(mute) }, // 取消或恢复发布本地视频流 - muteLocalVideoStream: (mute) => { + muteLocalVideoStream: (mute: any) => { rtcEngine.muteLocalVideoStream(mute) }, // 获取当前生成的视频id @@ -262,7 +257,7 @@ const agora = { }, // 共享屏幕采集 - setDesktopCapturerVideo: (targetSource) => { + setDesktopCapturerVideo: (targetSource: any) => { // stopScreenCapture() if ( targetSource.type === @@ -292,4 +287,4 @@ const agora = { }, } -window.agora = agora; \ No newline at end of file +export default agora; \ No newline at end of file