diff --git a/src/api/Meeting/index.ts b/src/api/Meeting/index.ts index a754d1e..342c907 100644 --- a/src/api/Meeting/index.ts +++ b/src/api/Meeting/index.ts @@ -98,3 +98,9 @@ export const GetShowUser = (roomNum: string) => url: `/room/show-user?roomNum=${roomNum}`, method: 'get' }) + +export const PostShowUser = (roomNum: string, uid: string) => + request({ + url: `/room/show-user?roomNum=${roomNum}&uid=${uid}`, + method: 'post' + }) \ No newline at end of file diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 98d6514..0d59eff 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -8,7 +8,7 @@ import { SearchOutlined } from '@ant-design/icons'; import { useLocation, useNavigate } from 'react-router-dom'; import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { storage } from '@/utils'; -import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser } from '@/api/Meeting'; +import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser } from '@/api/Meeting'; import ImageUrl from '@/utils/package/ImageUrl' import agora from '@/utils/package/agora' import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr'; @@ -113,6 +113,7 @@ const Meeting: React.FC = () => { const [userSearchValue, setUserSearchValue] = useState('') const [noViewChatList, setNoViewChatList] = useState(0) const [currentLookUserAccount, setCurrentLookUserAccount] = useState('') + const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3>(1) let userInfo = JSON.parse(storage.getItem('user') as string) useEffect(() => { let time = null as any; @@ -121,54 +122,43 @@ const Meeting: React.FC = () => { agora.init(true) agora.registerEventHandler({ onJoinChannelSuccess: async (info: any, _elapsed: any) => { - await onInvoke('joinChannel', { - roomNum: info.channelId, - enableMicr: true, - enableCamera: true - }) - await getRoomUser() - setTimeout(async () => { - let view = document.getElementById(`video-${info.localUid}`) as HTMLElement; - if (view && !view.getAttribute('load')) { - await agora.setupLocalVideo({ - uid: Number(info.localUid), - view, - channelId: info.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) - view.setAttribute('load', 'true') - } - if (String(info.localUid).length === 9 && userInfo.screenShareId == info.localUid) { - await agora.setupLocalVideo({ - uid: Number(info.localUid), - view: document.getElementById(`look-video`) as HTMLElement, - channelId: info.channelId, - sourceType: VideoSourceType.VideoSourceScreen, - }) - } - getShowUser(); - }, 1000); + if (String(info.localUid).length !== 9) { + await onInvoke('joinChannel', { + roomNum: info.channelId, + enableMicr: true, + enableCamera: true + }) + await getRoomUser() + setTimeout(async () => { + let view = document.getElementById(`video-${info.localUid}`) as HTMLElement; + if (view && !view.getAttribute('load')) { + await agora.setupLocalVideo({ + uid: Number(info.localUid), + view, + channelId: info.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + view.setAttribute('load', 'true') + } + getShowUser(); + }, 1000); + } }, onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { - await getRoomUser() - setTimeout(async () => { - let view = document.getElementById(`video-${remoteUid}`) as HTMLElement; - if (view && !view.getAttribute('load')) { - await agora.setupRemoteVideoJoin({ - uid: Number(remoteUid), - view, - channelId: info.channelId, - }) - view.setAttribute('load', 'true') - } - if (String(remoteUid).length === 9 && userInfo.screenShareId != remoteUid) { - await agora.setupRemoteVideoJoin({ - uid: Number(remoteUid), - view: document.getElementById(`look-video`) as HTMLElement, - channelId: info.channelId, - }) - } - }, 1000); + if (String(remoteUid).length !== 9) { + await getRoomUser() + setTimeout(async () => { + let view = document.getElementById(`video-${remoteUid}`) as HTMLElement; + if (view && !view.getAttribute('load')) { + await agora.setupRemoteVideoJoin({ + uid: Number(remoteUid), + view, + channelId: info.channelId, + }) + view.setAttribute('load', 'true') + } + }, 1000); + } }, onUserOffline: async (info: any, remoteUid: any, _reason: any) => { await agora.setupRemoteVideo({ @@ -301,27 +291,36 @@ const Meeting: React.FC = () => { if (res.data === userInfo.uid) { if (String(res.data).length === 9) { // 共享屏幕 - await agora.setupLocalVideo({ - uid: Number(res.data), - view: document.getElementById(`look-video`) as HTMLElement, - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceScreen, - }) + 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) // 摄像头 - await agora.setupLocalVideo({ - uid: Number(res.data), - view: document.getElementById(`look-video`) as HTMLElement, - channelId: state.channelId, - sourceType: VideoSourceType.VideoSourceCameraPrimary, - }) + setTimeout(() => { + agora.setupLocalVideo({ + uid: Number(res.data), + view: document.getElementById(`video-source-camera-primary`) as HTMLElement, + channelId: state.channelId, + sourceType: VideoSourceType.VideoSourceCameraPrimary, + }) + }, 1000); } } else { - await agora.setupRemoteVideoJoin({ - uid: Number(res.data), - view: document.getElementById(`look-video`) as HTMLElement, - channelId: state.channelId, - }) + setCurrentLookUserStatus(3) + setTimeout(() => { + agora.setupRemoteVideoJoin({ + uid: Number(res.data), + view: document.getElementById(`video-source-remote`) as HTMLElement, + channelId: state.channelId, + }) + }, 1000); } } }) @@ -363,8 +362,8 @@ const Meeting: React.FC = () => { setIsSharedScreenModal(true) break; case '停止共享': - await agora.destroyRendererByConfig(user.screenShareId) agora.stopScreenCapture() + await allUserLook(user.uid) footerListTemplate[itemIndex][rowIndex].title = '共享屏幕' break; case '关闭声音': @@ -448,7 +447,8 @@ const Meeting: React.FC = () => { const footerListTemplate = [...footerList] footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享' setIsSharedScreenModal(false) - agora.setDesktopCapturerVideo(sharedScreenItem) + await agora.setDesktopCapturerVideo(sharedScreenItem) + await allUserLook(user.screenShareId) } else { message.error('请选择应用!') } @@ -470,6 +470,15 @@ const Meeting: React.FC = () => { }) }; + // 设置全员看谁 + const allUserLook = async (uid: string): Promise => { + await PostShowUser(state.channelId, uid).then(res => { + if (res.code === 200) { + getShowUser() + } + }) + } + // 获取房间用户 const getRoomUser = async (): Promise => { Promise.all([ @@ -658,11 +667,21 @@ const Meeting: React.FC = () => { ) } )} -
-
+ {currentLookUserStatus === 1 ?
+
暂无视频
-
+
: null} + {currentLookUserStatus === 2 ?
+
+ 暂无视频 +
+
: null} + {currentLookUserStatus === 3 ?
+
+ 暂无视频 +
+
: null}
{ diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 3500596..d390948 100644 --- a/src/utils/package/agora.ts +++ b/src/utils/package/agora.ts @@ -69,7 +69,7 @@ const agora = { // } // }, // // 用户音量提示回调。 - onAudioVolumeIndication: async (connection: any, speakers: any, speakerNumber: any, totalVolume: any,) => { + onAudioVolumeIndication: async (_connection: any, _speakers: any, _speakerNumber: any, totalVolume: any,) => { const percentage = (totalVolume / 255) * 100 await onAudioVolumeIndication(percentage) } @@ -211,7 +211,6 @@ const agora = { } ); } - await agora.destroyRendererByConfig(user.screenShareId) await agora.joinChannelEx(user.screenShareId) }, // 停止录制音视频 @@ -220,12 +219,6 @@ const agora = { rtcEngine.destroyMediaRecorder(iMediaRecorder) iMediaRecorder = "" }, - // 销毁视频 - destroyRendererByConfig: async (uid: any) => { - // await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceCameraPrimary, option.channelId, Number(uid)) - await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceScreen, option.channelId, Number(uid)) - await rtcEngine.destroyRendererByConfig(VideoSourceType.VideoSourceRemote, option.channelId, Number(uid)) - }, // 开始录制音视频 startRecording: (uid: number) => { iMediaRecorder = rtcEngine.createMediaRecorder({ @@ -234,7 +227,7 @@ const agora = { }) iMediaRecorder.setMediaRecorderObserver({ // 录制状态发生改变回调。 - onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => { + onRecorderStateChanged: (_channelId: any, _uid: any, _state: any, reason: any) => { switch (reason) { case 1: message.error('录制文件写入失败') @@ -248,7 +241,7 @@ const agora = { } }, // 录制信息更新回调。 - onRecorderInfoUpdated: (channelId: any, uid: any, info: any) => { + onRecorderInfoUpdated: (_channelId: any, _uid: any, info: any) => { message.success(`文件已保存至${info.fileName}`) }, })