From 0db6a12d7f367b7d9c68a66717ae70d36f64aa36 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Mon, 22 Jul 2024 10:28:51 +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 --- .env.development | 2 +- .env.production | 2 +- .env.test | 2 +- src/page/Meeting/index.tsx | 65 +++++++++++++++++------------- src/utils/package/agora.ts | 77 +++++++++++++++++++----------------- src/utils/package/signalr.ts | 2 +- 6 files changed, 82 insertions(+), 68 deletions(-) diff --git a/.env.development b/.env.development index 4ade7dd..825915f 100644 --- a/.env.development +++ b/.env.development @@ -1,5 +1,5 @@ #基础API 绝对的 -VITE_BASE_URL_API = 'http://192.168.2.8:5192' +VITE_BASE_URL_API = 'http://192.168.2.9:5192' VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555' #当前IP 相对的 VITE_BASE_CURRENT_API = '.' diff --git a/.env.production b/.env.production index 281edce..6a6332f 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,5 @@ #基础API 绝对的 -VITE_BASE_URL_API = 'http://192.168.2.8:5192' +VITE_BASE_URL_API = 'http://192.168.2.9:5192' VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555' #当前IP 相对的 VITE_BASE_CURRENT_API = '.' diff --git a/.env.test b/.env.test index 691fc44..4c8b009 100644 --- a/.env.test +++ b/.env.test @@ -1,5 +1,5 @@ #基础API 绝对的 -VITE_BASE_URL_API = 'http://192.168.2.8:5192' +VITE_BASE_URL_API = 'http://192.168.2.9:5192' VITE_BASE_URL_DRAW_API = 'http://192.168.2.9:6555' #当前IP 相对的 VITE_BASE_CURRENT_API = '.' diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 4213d8a..b5386e4 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -122,6 +122,43 @@ const Meeting: React.FC = () => { let userInfo = JSON.parse(storage.getItem('user') as string) setMeetingMode(storage.getItem('meetingMode') as string || 'FreedomMode'); agora.init() + agora.registerEventHandler({ + onJoinChannelSuccess: async (info: any, _elapsed: any) => { + await onInvoke('joinChannel', { + roomNum: info.channelId, + enableMicr: true, + enableCamera: true + }) + await getRoomUser() + setTimeout(() => { + agora.setupLocalVideo({ + account: Number(info.localUid), + view: document.getElementById(`video-${info.localUid}`) as HTMLElement, + channelId: info.channelId, + }) + }, 1000); + }, + onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { + await getRoomUser() + setTimeout(() => { + agora.setupRemoteVideoJoin({ + account: Number(remoteUid), + view: document.getElementById(`video-${remoteUid}`) as HTMLElement, + channelId: info.channelId, + }) + }, 1000); + }, + onUserOffline: async (info: any, remoteUid: any, reason: any) => { + await onInvoke('levelChannel', { + roomNum: info.channelId + }) + agora.setupRemoteVideo({ + account: Number(remoteUid), + view: document.getElementById(`video-${remoteUid}`) as HTMLElement, + channelId: info.channelId, + }) + } + }) agora.setCameraCapture(VideoSourceType.VideoSourceCameraPrimary) agora.setJoinChannel({ channelId: state.channelId, @@ -158,15 +195,6 @@ const Meeting: React.FC = () => { } agora.muteLocalAudioStream(!item.enableMicr) agora.muteLocalVideoStream(!item.enableCamera) - let dom = document.getElementById(`video-${item.account}`) as HTMLElement - if (dom.childNodes.length === 1) { - console.log(dom); - agora.setVideo({ - account: Number(item.account), - view: dom, - channelId: state.channelId, - }) - } }); }, [roomUserList]); @@ -369,25 +397,6 @@ const Meeting: React.FC = () => { } const handleCustomStorageChange = async (e: any): Promise => { switch (e.key) { - case 'isJoin': - if (e.value) { - await onInvoke('joinChannel', { - roomNum: state.channelId, - enableMicr: true, - enableCamera: true - }) - getRoomUser() - } else { - onInvoke('levelChannel', { - roomNum: state.channelId - }) - } - break; - case 'isRemotJoin': - setTimeout(() => { - getRoomUser() - }, 2000) - break; case 'meetingMode': setMeetingMode(e.value) break; diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 287ac78..86f70cf 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -29,54 +29,47 @@ const agora = { rtcEngine.initialize({ appId: option.appId, }); + }, + // 事件回调 + registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline }: any) => { rtcEngine.registerEventHandler({ // 监听本地用户加入频道事件 onJoinChannelSuccess: async (info: any, elapsed: any) => { - storage.setItem('isJoin', true) + await onJoinChannelSuccess(info, elapsed) }, // 监听远端用户加入频道事件 - onUserJoined: (info: any, remoteUid: any, elapsed: any) => { - storage.setItem('isRemotJoin', true) + onUserJoined: async (info: any, remoteUid: any, elapsed: any) => { + await onUserJoined(info, remoteUid, elapsed) }, // 监听用户离开频道事件 onUserOffline: async (info: any, remoteUid: any, reason: any) => { - // 远端用户离开频道后，关闭远端视频窗口 - await rtcEngine.setupRemoteVideo( - { - renderMode: RenderModeType.RenderModeFit, - sourceType: VideoSourceType.VideoSourceRemote, - uid: Number(info.localUid), - view: document.getElementById(`video-${remoteUid}`), - setupMode: VideoViewSetupMode.VideoViewSetupRemove, - }, - ); - storage.setItem('isRemotJoin', false) + await onUserOffline(info, remoteUid, reason) }, - // 视频发布状态改变回调 - onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { - if (newState === 1) { + // // 视频发布状态改变回调 + // 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) { + // } + // }, + // // 音频发布状态改变回调 + // onAudioPublishStateChanged: (channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { + // if (newState === 1) { - } - }, - // 用户音量提示回调。 - onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => { - const percentage = (totalVolume / 255) * 100 - const dom = document.getElementById('recordingDeviceTest') as any; - if (dom) { - dom.style.width = `${percentage}%` - } - } + // } + // }, + // // 用户音量提示回调。 + // onAudioVolumeIndication: (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => { + // const percentage = (totalVolume / 255) * 100 + // const dom = document.getElementById('recordingDeviceTest') as any; + // if (dom) { + // dom.style.width = `${percentage}%` + // } + // } }); }, // 本地加入 - setupLocalVideo: (item: any) => { - rtcEngine.setupLocalVideo({ + setupLocalVideo: async (item: any) => { + await rtcEngine.setupLocalVideo({ renderMode: RenderModeType.RenderModeFit, sourceType: option.sourceType, uid: item.account, @@ -93,8 +86,8 @@ const agora = { } }, // 远端加入 - setupRemoteVideoJoin: (item: any) => { - rtcEngine.setupRemoteVideo( + setupRemoteVideoJoin: async (item: any) => { + await rtcEngine.setupRemoteVideo( { renderMode: RenderModeType.RenderModeFit, sourceType: VideoSourceType.VideoSourceRemote, @@ -105,6 +98,18 @@ const agora = { { channelId: item.channelId }, ); }, + // 退出 + setupRemoteVideo: async (item: any) => { + await rtcEngine.setupRemoteVideo( + { + renderMode: RenderModeType.RenderModeFit, + sourceType: VideoSourceType.VideoSourceRemote, + uid: item.account, + view: item.view, + setupMode: VideoViewSetupMode.VideoViewSetupRemove, + }, + ); + }, // 渲染视频 setVideo: (item: any) => { if (option.userid === item.account) { diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index 61bd717..36b84e6 100644 --- a/src/utils/package/signalr.ts +++ b/src/utils/package/signalr.ts @@ -13,7 +13,7 @@ export const startSignalr = async () => { connection.start() .then(() => console.log('Connection started!')) - .catch((err: any) => console.error('Error while establishing connection: ', err)); + .catch((err: any) => setTimeout(()=> startSignalr(), 5000)); } export const onInvitation = (callBack: Function) => {