marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

优化

This commit is contained in:
yj 2024-08-07 15:12:10 +08:00
parent fc52c1b938
commit 29099e0382
3 changed files with 97 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/Meeting/index.ts
View File

@ -98,3 +98,9 @@ export const GetShowUser = (roomNum: string) =>
url: `/room/show-user?roomNum=${roomNum}`, url: `/room/show-user?roomNum=${roomNum}`,
method: 'get' method: 'get'
}) })
export const PostShowUser = (roomNum: string, uid: string) =>
request({
url: `/room/show-user?roomNum=${roomNum}&uid=${uid}`,
method: 'post'
})

157
src/page/Meeting/index.tsx
View File

@ -8,7 +8,7 @@ import { SearchOutlined } from '@ant-design/icons';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { thumbImageBufferToBase64 } from '@/utils/package/base64'
import { storage } from '@/utils'; 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 ImageUrl from '@/utils/package/ImageUrl'
import agora from '@/utils/package/agora' import agora from '@/utils/package/agora'
import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr'; import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr';
@ -113,6 +113,7 @@ const Meeting: React.FC = () => {
const [userSearchValue, setUserSearchValue] = useState('') const [userSearchValue, setUserSearchValue] = useState('')
const [noViewChatList, setNoViewChatList] = useState(0) const [noViewChatList, setNoViewChatList] = useState(0)
const [currentLookUserAccount, setCurrentLookUserAccount] = useState<string>('') const [currentLookUserAccount, setCurrentLookUserAccount] = useState<string>('')
const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3>(1)
let userInfo = JSON.parse(storage.getItem('user') as string) let userInfo = JSON.parse(storage.getItem('user') as string)
useEffect(() => { useEffect(() => {
let time = null as any; let time = null as any;
@ -121,54 +122,43 @@ const Meeting: React.FC = () => {
agora.init(true) agora.init(true)
agora.registerEventHandler({ agora.registerEventHandler({
onJoinChannelSuccess: async (info: any, _elapsed: any) => { onJoinChannelSuccess: async (info: any, _elapsed: any) => {
await onInvoke('joinChannel', { if (String(info.localUid).length !== 9) {
roomNum: info.channelId, await onInvoke('joinChannel', {
enableMicr: true, roomNum: info.channelId,
enableCamera: true enableMicr: true,
}) enableCamera: true
await getRoomUser() })
setTimeout(async () => { await getRoomUser()
let view = document.getElementById(`video-${info.localUid}`) as HTMLElement; setTimeout(async () => {
if (view && !view.getAttribute('load')) { let view = document.getElementById(`video-${info.localUid}`) as HTMLElement;
await agora.setupLocalVideo({ if (view && !view.getAttribute('load')) {
uid: Number(info.localUid), await agora.setupLocalVideo({
view, uid: Number(info.localUid),
channelId: info.channelId, view,
sourceType: VideoSourceType.VideoSourceCameraPrimary, channelId: info.channelId,
}) sourceType: VideoSourceType.VideoSourceCameraPrimary,
view.setAttribute('load', 'true') })
} view.setAttribute('load', 'true')
if (String(info.localUid).length === 9 && userInfo.screenShareId == info.localUid) { }
await agora.setupLocalVideo({ getShowUser();
uid: Number(info.localUid), }, 1000);
view: document.getElementById(`look-video`) as HTMLElement, }
channelId: info.channelId,
sourceType: VideoSourceType.VideoSourceScreen,
})
}
getShowUser();
}, 1000);
}, },
onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => { onUserJoined: async (info: any, remoteUid: any, _elapsed: any) => {
await getRoomUser() if (String(remoteUid).length !== 9) {
setTimeout(async () => { await getRoomUser()
let view = document.getElementById(`video-${remoteUid}`) as HTMLElement; setTimeout(async () => {
if (view && !view.getAttribute('load')) { let view = document.getElementById(`video-${remoteUid}`) as HTMLElement;
await agora.setupRemoteVideoJoin({ if (view && !view.getAttribute('load')) {
uid: Number(remoteUid), await agora.setupRemoteVideoJoin({
view, uid: Number(remoteUid),
channelId: info.channelId, view,
}) channelId: info.channelId,
view.setAttribute('load', 'true') })
} view.setAttribute('load', 'true')
if (String(remoteUid).length === 9 && userInfo.screenShareId != remoteUid) { }
await agora.setupRemoteVideoJoin({ }, 1000);
uid: Number(remoteUid), }
view: document.getElementById(`look-video`) as HTMLElement,
channelId: info.channelId,
})
}
}, 1000);
}, },
onUserOffline: async (info: any, remoteUid: any, _reason: any) => { onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
await agora.setupRemoteVideo({ await agora.setupRemoteVideo({
@ -301,27 +291,36 @@ const Meeting: React.FC = () => {
if (res.data === userInfo.uid) { if (res.data === userInfo.uid) {
if (String(res.data).length === 9) { if (String(res.data).length === 9) {
// 共享屏幕 // 共享屏幕
await agora.setupLocalVideo({ setCurrentLookUserStatus(2)
uid: Number(res.data), setTimeout(() => {
view: document.getElementById(`look-video`) as HTMLElement, agora.setupLocalVideo({
channelId: state.channelId, uid: Number(res.data),
sourceType: VideoSourceType.VideoSourceScreen, view: document.getElementById(`video-source-screen`) as HTMLElement,
}) channelId: state.channelId,
sourceType: VideoSourceType.VideoSourceScreen,
})
}, 1000);
} else { } else {
setCurrentLookUserStatus(1)
// 摄像头 // 摄像头
await agora.setupLocalVideo({ setTimeout(() => {
uid: Number(res.data), agora.setupLocalVideo({
view: document.getElementById(`look-video`) as HTMLElement, uid: Number(res.data),
channelId: state.channelId, view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
sourceType: VideoSourceType.VideoSourceCameraPrimary, channelId: state.channelId,
}) sourceType: VideoSourceType.VideoSourceCameraPrimary,
})
}, 1000);
} }
} else { } else {
await agora.setupRemoteVideoJoin({ setCurrentLookUserStatus(3)
uid: Number(res.data), setTimeout(() => {
view: document.getElementById(`look-video`) as HTMLElement, agora.setupRemoteVideoJoin({
channelId: state.channelId, 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) setIsSharedScreenModal(true)
break; break;
case '停止共享': case '停止共享':
await agora.destroyRendererByConfig(user.screenShareId)
agora.stopScreenCapture() agora.stopScreenCapture()
await allUserLook(user.uid)
footerListTemplate[itemIndex][rowIndex].title = '共享屏幕' footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
break; break;
case '关闭声音': case '关闭声音':
@ -448,7 +447,8 @@ const Meeting: React.FC = () => {
const footerListTemplate = [...footerList] const footerListTemplate = [...footerList]
footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享' footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
setIsSharedScreenModal(false) setIsSharedScreenModal(false)
agora.setDesktopCapturerVideo(sharedScreenItem) await agora.setDesktopCapturerVideo(sharedScreenItem)
await allUserLook(user.screenShareId)
} else { } else {
message.error('请选择应用!') message.error('请选择应用!')
} }
@ -470,6 +470,15 @@ const Meeting: React.FC = () => {
}) })
}; };
// 设置全员看谁
const allUserLook = async (uid: string): Promise<void> => {
await PostShowUser(state.channelId, uid).then(res => {
if (res.code === 200) {
getShowUser()
}
})
}
// 获取房间用户 // 获取房间用户
const getRoomUser = async (): Promise<void> => { const getRoomUser = async (): Promise<void> => {
Promise.all([ Promise.all([
@ -658,11 +667,21 @@ const Meeting: React.FC = () => {
) )
} }
)} )}
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}> {currentLookUserStatus === 1 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='look-video'> <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
<span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span> <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
</div> </div>
</div> </div> : null}
{currentLookUserStatus === 2 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
<span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
</div>
</div> : null}
{currentLookUserStatus === 3 ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote'>
<span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
</div>
</div> : null}
</div> </div>
</div> </div>
{ {

13
src/utils/package/agora.ts
View File

@ -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 const percentage = (totalVolume / 255) * 100
await onAudioVolumeIndication(percentage) await onAudioVolumeIndication(percentage)
} }
@ -211,7 +211,6 @@ const agora = {
} }
); );
} }
await agora.destroyRendererByConfig(user.screenShareId)
await agora.joinChannelEx(user.screenShareId) await agora.joinChannelEx(user.screenShareId)
}, },
// 停止录制音视频 // 停止录制音视频
@ -220,12 +219,6 @@ const agora = {
rtcEngine.destroyMediaRecorder(iMediaRecorder) rtcEngine.destroyMediaRecorder(iMediaRecorder)
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) => { startRecording: (uid: number) => {
iMediaRecorder = rtcEngine.createMediaRecorder({ iMediaRecorder = rtcEngine.createMediaRecorder({
@ -234,7 +227,7 @@ const agora = {
}) })
iMediaRecorder.setMediaRecorderObserver({ iMediaRecorder.setMediaRecorderObserver({
// 录制状态发生改变回调。 // 录制状态发生改变回调。
onRecorderStateChanged: (channelId: any, uid: any, state: any, reason: any) => { onRecorderStateChanged: (_channelId: any, _uid: any, _state: any, reason: any) => {
switch (reason) { switch (reason) {
case 1: case 1:
message.error('录制文件写入失败') 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}`) message.success(`文件已保存至${info.fileName}`)
}, },
}) })