diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 31f5f0a..fd75c69 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -121,8 +121,6 @@ const Meeting: React.FC = () => { const [mediaStream, setMediaStream] = useState('') const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3 | 4>(1) let userInfo = JSON.parse(storage.getItem('user') as string) - let allUserListArr = [] as any; - let currentLookUserAccountId = '' as string; useEffect(() => { let time = null as any; setUser(userInfo) @@ -181,6 +179,7 @@ const Meeting: React.FC = () => { view: null, channelId: info.channelId, }) + getRoomUser() setTimeout(() => { getRoomUser() }, 1000); @@ -234,7 +233,14 @@ const Meeting: React.FC = () => { }, [(navigator as any).connection.effectiveType]); useEffect(() => { - onSignalr((item: any) => { + let currentVideoUserItem = allUserList.find((item: any) => item.uid === currentVideoId || item.screenShareId === currentVideoId) + if (currentVideoUserItem) { + setCurrentLookUserAccount(currentVideoUserItem) + } + }, [currentVideoId]); + + useEffect(() => { + onSignalr(async (item: any) => { switch (item.key) { case 'ReceiveMessage': let meetingUserChatDom = document.getElementById('meetingUserChat') as HTMLElement; @@ -246,7 +252,15 @@ const Meeting: React.FC = () => { setChatList((newChatList: any) => [...newChatList, item]) break; case 'RefreshUserList': - getRoomUser() + getRoomUser((list: any) => { + setCurrentVideoId(res => { + let currentVideoUserItem = list.find((item: any) => item.uid === res || item.screenShareId === res) + if (currentVideoUserItem) { + setCurrentLookUserAccount(currentVideoUserItem) + } + return res + }) + }) break; case 'Operation': // 1:全员退出会议 @@ -329,62 +343,62 @@ const Meeting: React.FC = () => { message.error('网络已断开!') } } + // 渲染视频 + const renderVideo = async (uid: string | number): Promise => { + if (uid === userInfo.uid || uid === userInfo.screenShareId) { + if (String(uid).length === 9) { + // 共享屏幕 + setCurrentLookUserStatus(2) + setTimeout(() => { + agora.setupLocalVideo({ + uid: Number(uid), + view: document.getElementById(`video-source-screen`) as HTMLElement, + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceScreen, + }) + }, 1000); + } else { + setCurrentLookUserStatus(1) + // 摄像头 + setTimeout(() => { + agora.setupLocalVideo({ + uid: Number(uid), + view: document.getElementById(`video-source-camera-primary`) as HTMLElement, + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + }, 1000); + } + } else { + if (String(uid).length === 9) { + // 摄像头 + setCurrentLookUserStatus(3) + setTimeout(() => { + agora.setupRemoteVideoJoin({ + uid: Number(uid), + view: document.getElementById(`video-source-remote-camera`) as HTMLElement, + channelId: state.channelId, + }) + }, 1000); + } else { + // 共享屏幕 + setCurrentLookUserStatus(4) + setTimeout(() => { + agora.setupRemoteVideoJoin({ + uid: Number(uid), + view: document.getElementById(`video-source-remote-screen`) as HTMLElement, + channelId: state.channelId, + }) + }, 1000); + } + } + } // 全员观看 const getShowUser = async (): Promise => { await GetShowUser(state.channelId).then(async (res) => { if (res.code === 200 && res.data) { - currentLookUserAccountId = res.data - let userItem = allUserListArr.find((item: any) => item.uid === res.data || item.screenShareId === res.data) - if (userItem) { - setCurrentLookUserAccount(userItem) - } - if (res.data === userInfo.uid || res.data === userInfo.screenShareId) { - if (String(res.data).length === 9) { - // 共享屏幕 - setCurrentLookUserStatus(2) - setTimeout(() => { - agora.setupLocalVideo({ - uid: Number(res.data), - view: document.getElementById(`video-source-screen`) as HTMLElement, - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceScreen, - }) - }, 1000); - } else { - setCurrentLookUserStatus(1) - // 摄像头 - setTimeout(() => { - agora.setupLocalVideo({ - uid: Number(res.data), - view: document.getElementById(`video-source-camera-primary`) as HTMLElement, - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) - }, 1000); - } - } else { - if (String(res.data).length === 9) { - // 摄像头 - setCurrentLookUserStatus(3) - setTimeout(() => { - agora.setupRemoteVideoJoin({ - uid: Number(res.data), - view: document.getElementById(`video-source-remote-camera`) as HTMLElement, - channelId: state.channelId, - }) - }, 1000); - } else { - // 共享屏幕 - setCurrentLookUserStatus(4) - setTimeout(() => { - agora.setupRemoteVideoJoin({ - uid: Number(res.data), - view: document.getElementById(`video-source-remote-screen`) as HTMLElement, - channelId: state.channelId, - }) - }, 1000); - } - } + setCurrentVideoId(res.data) + renderVideo(res.data) } }) } @@ -576,7 +590,7 @@ const Meeting: React.FC = () => { } // 获取房间用户 - const getRoomUser = async (): Promise => { + const getRoomUser = async (callback?: Function): Promise => { Promise.all([ GetRoomUser(state.channelId), GetUserList({ @@ -608,12 +622,10 @@ const Meeting: React.FC = () => { item.isRoom = false; } }); - allUserListArr = res[0].data - let userItem = allUserListArr.find((item: any) => item.uid === currentLookUserAccountId || item.screenShareId === currentLookUserAccountId) - if (userItem) { - setCurrentLookUserAccount(userItem) - } setAllUserList(res[1].data.items); + if (callback) { + callback(res[1].data.items) + } } }) } @@ -782,6 +794,7 @@ const Meeting: React.FC = () => { key={index} onClick={() => { setCurrentVideoId(item.uid) + renderVideo(item.uid) }} >