From b4e92c00042fc9e63cf8a3b17d3a90dc96970ef0 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Mon, 15 Jul 2024 09:41:03 +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 | 52 +++++++++++----------- src/utils/package/agora.ts | 85 +++++++++++++++--------------------- src/utils/package/signalr.ts | 3 ++ 3 files changed, 63 insertions(+), 77 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index b743e48..0d9ed5a 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -34,6 +34,7 @@ const Meeting: React.FC = () => { const [isSharedFilesModel, setIsSharedFilesModel] = useState(false); const [sharedScreenList, setSharedScreenList] = useState([]); const [sharedScreenItem, setSharedScreenItem] = useState(''); + const [textMsg, setTextMsg] = useState(''); const [footerList, setFooterList] = useState([ [ { @@ -130,6 +131,18 @@ const Meeting: React.FC = () => { }; }, [fileList.pageIndex]); + useEffect(() => { + roomUserList.forEach((item: any) => { + let dom = document.getElementById(`video-${item.account}`) as HTMLElement + if (!dom.hasChildNodes()) { + agora.setVideo({ + account: Number(item.account), + view: dom, + channelId: state.channelId, + }) + } + }); + }, [roomUserList]); // 操作按钮 const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise => { const footerListTemplate = [...footerList] @@ -257,11 +270,10 @@ const Meeting: React.FC = () => { } // 获取房间用户 - const getRoomUser = async (callBack: Function): Promise => { + const getRoomUser = async (): Promise => { await GetRoomUser(state.channelId).then(res => { if (res.code === 200) { setRoomUserList(res.data) - callBack(res.data) } }) } @@ -271,35 +283,14 @@ const Meeting: React.FC = () => { onInvoke('joinChannel', { roomNum: state.channelId }) - getRoomUser((data: any) => { - setTimeout(() => { - data.forEach((item: any) => { - agora.setVideo({ - account: Number(item.account), - view: document.getElementById(`video-${item.account}`), - channelId: state.channelId - }) - }) - }, 1000) - }) + getRoomUser() } else { onInvoke('levelChannel', { roomNum: state.channelId }) } } else if (e.key === 'isRemotJoin') { - getRoomUser((data: any) => { - setTimeout(() => { - data.forEach((item: any) => { - agora.setVideo({ - account: Number(item.account), - view: document.getElementById(`video-${item.account}`), - channelId: state.channelId, - isRemotJoin: e.value - }) - }) - }, 1000) - }) + getRoomUser() } }; return ( @@ -413,8 +404,15 @@ const Meeting: React.FC = () => { )}
- - + { + setTextMsg(e.target.value) + }}> +
} diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 5038cc8..948baef 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -30,7 +30,7 @@ const agora = { }); rtcEngine.registerEventHandler({ // 监听本地用户加入频道事件 - onJoinChannelSuccess: (info: any, elapsed: any) => { + onJoinChannelSuccess: async (info: any, elapsed: any) => { storage.setItem('isJoin', true) }, // 监听远端用户加入频道事件 @@ -41,6 +41,15 @@ const agora = { onUserOffline: (info: any, remoteUid: any, reason: any) => { // 远端用户离开频道后，关闭远端视频窗口 storage.setItem('isRemotJoin', false) + rtcEngine.setupRemoteVideo( + { + renderMode: RenderModeType.RenderModeFit, + sourceType: VideoSourceType.VideoSourceRemote, + uid: Number(info.localUid), + view: document.getElementById(`video-${info.localUid}`), + setupMode: VideoViewSetupMode.VideoViewSetupRemove, + }, + ); }, // 视频发布状态改变回调 onVideoPublishStateChanged: (source: any, channel: any, oldState: any, newState: any, elapseSinceLastState: any) => { @@ -64,60 +73,36 @@ const agora = { } }); }, - // 渲染视频 - setVideo: (item: any) => { - console.log(item); - // 本地加入 - function setupLocalVideo() { - rtcEngine.setupLocalVideo({ + // 本地加入 + setupLocalVideo: (item: any) => { + rtcEngine.setupLocalVideo({ + renderMode: RenderModeType.RenderModeFit, + // sourceType: VideoSourceType.VideoSourceScreen, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + uid: item.account, + view: item.view, + setupMode: VideoViewSetupMode.VideoViewSetupAdd, + }); + }, + // 远端加入 + setupRemoteVideoJoin: (item: any) => { + rtcEngine.setupRemoteVideo( + { renderMode: RenderModeType.RenderModeFit, - // sourceType: VideoSourceType.VideoSourceScreen, - sourceType: VideoSourceType.VideoSourceCameraPrimary, + sourceType: VideoSourceType.VideoSourceRemote, uid: item.account, view: item.view, setupMode: VideoViewSetupMode.VideoViewSetupAdd, - }); - } - // 远端加入 - function setupRemoteVideoJoin() { - rtcEngine.setupRemoteVideo( - { - renderMode: RenderModeType.RenderModeFit, - sourceType: VideoSourceType.VideoSourceRemote, - uid: item.account, - view: item.view, - setupMode: VideoViewSetupMode.VideoViewSetupAdd, - }, - { channelId: item.channelId }, - ); - } - // 远端退出 - function setupRemoteVideoLeave() { - rtcEngine.setupRemoteVideo( - { - renderMode: RenderModeType.RenderModeFit, - sourceType: VideoSourceType.VideoSourceRemote, - uid: item.account, - view: item.view, - setupMode: VideoViewSetupMode.VideoViewSetupRemove, - }, - ); - } - - if (typeof item.isRemotJoin === 'boolean') { - if (option.userid != item.account) { - if (item.isRemotJoin) { - setupRemoteVideoJoin() - } else { - setupRemoteVideoLeave() - } - } + }, + { channelId: item.channelId }, + ); + }, + // 渲染视频 + setVideo: (item: any) => { + if (option.userid === item.account) { + agora.setupLocalVideo(item) } else { - if (option.userid === item.account) { - setupLocalVideo() - } else { - setupRemoteVideoJoin() - } + agora.setupRemoteVideoJoin(item) } }, // 离开频道 diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index 6cbd469..e1428e2 100644 --- a/src/utils/package/signalr.ts +++ b/src/utils/package/signalr.ts @@ -27,6 +27,9 @@ export const onInvoke = (str: string, data: any) => { case 'levelChannel': connection.invoke(str, data.roomNum) break; + case 'senChannelMsg': + connection.invoke(str, data.roomNum, data.msg) + break; } }