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

优化

This commit is contained in:
yj 2024-08-06 17:18:39 +08:00
parent cad0931c87
commit 9be4e89302
2 changed files with 40 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,10 +161,10 @@ const Meeting: React.FC = () => {
agora.setCameraCapture() agora.setCameraCapture()
agora.setJoinChannel({ agora.setJoinChannel({
channelId: state.channelId, channelId: state.channelId,
userid: userInfo.account, uid: userInfo.uid,
token: state.token, token: state.token,
}) })
setCurrentVideoId(userInfo.account) setCurrentVideoId(userInfo.uid)
storage.setItem('noViewChatList', 0) storage.setItem('noViewChatList', 0)
window.addEventListener('customStorageChange', handleCustomStorageChange); window.addEventListener('customStorageChange', handleCustomStorageChange);
window.addEventListener('online', handleNetworkChange); window.addEventListener('online', handleNetworkChange);
@ -183,7 +183,7 @@ const Meeting: React.FC = () => {
useEffect(() => { useEffect(() => {
roomUserList.forEach((item: any) => { roomUserList.forEach((item: any) => {
if (item.account === user.account) { if (item.uid === user.uid) {
const footerListTemplate = [...footerList] const footerListTemplate = [...footerList]
footerListTemplate[0][0].title = item.enableMicr ? '关闭声音' : '开启声音' footerListTemplate[0][0].title = item.enableMicr ? '关闭声音' : '开启声音'
footerListTemplate[0][0].active = !item.enableMicr footerListTemplate[0][0].active = !item.enableMicr
@ -253,18 +253,18 @@ const Meeting: React.FC = () => {
}, [currentVideoId]) }, [currentVideoId])
useEffect(() => { useEffect(() => {
const userItem = allUserList.find((item: any) => item.account === currentLookUserAccount) const userItem = allUserList.find((item: any) => item.uid === currentLookUserAccount)
if (userItem) { if (userItem) {
if (userItem.account === user.account) { if (userItem.uid === user.uid) {
// agora.setupLocalVideo({ // agora.setupLocalVideo({
// account: Number(userItem.account), // account: Number(userItem.uid),
// view: document.getElementById(`look-video`) as HTMLElement, // view: document.getElementById(`look-video`) as HTMLElement,
// channelId: state.channelId, // channelId: state.channelId,
// sourceType: VideoSourceType.VideoSourceCameraPrimary, // sourceType: VideoSourceType.VideoSourceCameraPrimary,
// }) // })
} else { } else {
// agora.setupRemoteVideoJoin({ // agora.setupRemoteVideoJoin({
// account: Number(userItem.account), // account: Number(userItem.uid),
// view: document.getElementById(`look-video`) as HTMLElement, // view: document.getElementById(`look-video`) as HTMLElement,
// channelId: state.channelId, // channelId: state.channelId,
// sourceType: VideoSourceType.VideoSourceCameraPrimary, // sourceType: VideoSourceType.VideoSourceCameraPrimary,
@ -371,7 +371,7 @@ const Meeting: React.FC = () => {
break; break;
case '录制': case '录制':
const setting = await JSON.parse(storage.getItem('setting') as string) const setting = await JSON.parse(storage.getItem('setting') as string)
if (currentVideoId === user.account) { if (currentVideoId === user.uid) {
message.error('请勿自己录制自己！') message.error('请勿自己录制自己！')
} else { } else {
try { try {
@ -454,12 +454,14 @@ const Meeting: React.FC = () => {
if (res[0].code === 200 && res[1].code === 200) { if (res[0].code === 200 && res[1].code === 200) {
setRoomUserList(res[0].data.map((item: any) => { setRoomUserList(res[0].data.map((item: any) => {
return { return {
...item,
isShow: true, isShow: true,
...item uid: item.id,
} }
})) }))
res[1].data.items.forEach((item: any) => { res[1].data.items.forEach((item: any) => {
const itemUser = res[0].data.find((row: any) => row.account === item.account) item.uid = item.id;
const itemUser = res[0].data.find((row: any) => row.id === item.id)
if (itemUser) { if (itemUser) {
item.isRoom = true; item.isRoom = true;
for (const itemUserKey in itemUser) { for (const itemUserKey in itemUser) {
@ -570,8 +572,8 @@ const Meeting: React.FC = () => {
return '' return ''
} }
// 设置单个视频样式 // 设置单个视频样式
const setMeetingContentSwiperCardClass = (account: string, bool: boolean = false): string => { const setMeetingContentSwiperCardClass = (uid: string, bool: boolean = false): string => {
if ((bool || currentVideoId === account) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) { if ((bool || currentVideoId === uid) && (meetingMode === 'StandardMode' || meetingMode === 'SpeakerMode')) {
switch (meetingMode) { switch (meetingMode) {
case 'StandardMode': case 'StandardMode':
return styles.meetingContentSwiperCardStandardMode return styles.meetingContentSwiperCardStandardMode
@ -601,7 +603,7 @@ const Meeting: React.FC = () => {
<div className={styles.meetingContentBody}> <div className={styles.meetingContentBody}>
<div className={`${styles.meetingContentBodyLeft} drag`}> <div className={`${styles.meetingContentBodyLeft} drag`}>
<div className={getMeetingContentBodyLeftModeClass()} > <div className={getMeetingContentBodyLeftModeClass()} >
{/* ${setMeetingContentSwiperCardClass(item.account)} */} {/* ${setMeetingContentSwiperCardClass(item.uid)} */}
{allUserList.map((item: any, index: number) => { {allUserList.map((item: any, index: number) => {
return ( return (
item.isRoom ? item.isRoom ?
@ -612,10 +614,10 @@ const Meeting: React.FC = () => {
if (footerList[1][3].active) { if (footerList[1][3].active) {
return message.error('视频录制中请勿切换，或结束录制再切换！') return message.error('视频录制中请勿切换，或结束录制再切换！')
} }
setCurrentVideoId(item.account) setCurrentVideoId(item.uid)
}} }}
> >
<div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.account ? styles.active : ''}`} id={`video-${item.account}`}> <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''}`} id={`video-${item.uid}`}>
<div className={styles.meetingContentSwiperCardVdeioLoading}> <div className={styles.meetingContentSwiperCardVdeioLoading}>
<Avatar name={item.userName} /> <Avatar name={item.userName} />
</div> </div>
@ -626,19 +628,11 @@ const Meeting: React.FC = () => {
) )
} }
)} )}
{currentLookUserAccount ? <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount)}`}> <div className={`${styles.meetingContentSwiperCardVdeio}`} id='look-video'>
<div className={`${styles.meetingContentSwiperCardVdeio}`} id={`look-video`}> <span style={{ color: 'white', position: 'absolute', transform: 'translate(-50%,-50%)', left: '50%', top: '50%' }}>暂无视频</span>
</div>
</div> </div>
: </div>
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(currentLookUserAccount, true)}`}>
<div className={`${styles.meetingContentSwiperCardVdeio}`} style={{ color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
暂无视频
</div>
</div>
}
</div> </div>
</div> </div>
{ {
@ -702,7 +696,7 @@ const Meeting: React.FC = () => {
postOpenCamera(!item.enableCamera, item.id) postOpenCamera(!item.enableCamera, item.id)
}} title={item.enableCamera ? '关闭视频' : '打开视频'} /> }} title={item.enableCamera ? '关闭视频' : '打开视频'} />
</div> </div>
{item.account !== user.account && user.roleId === '1' ? <div className='drag'> {item.uid !== user.uid && user.roleId === '1' ? <div className='drag'>
{!item.isManager ? <Button {!item.isManager ? <Button
type="primary" type="primary"
className='m-ant-btn' className='m-ant-btn'
@ -898,7 +892,7 @@ const meetingContentUser = (item: any) => {
const meetingContentError = (currentVideoId: any, item: any) => { const meetingContentError = (currentVideoId: any, item: any) => {
return ( return (
<> <>
<div className={`${styles.meetingContentError} ${currentVideoId === item.account ? styles.active : ''}`}> <div className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}>
<Avatar name={item.userName} /> <Avatar name={item.userName} />
</div> </div>
</> </>

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

@ -16,7 +16,7 @@ const option: any = {
appId: 'dcfc466a6ecb4a1f972630065dfb1e75', appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
token: '', token: '',
channelId: '', channelId: '',
userid: '', uid: ''
} }
let iMediaRecorder: any = ''; let iMediaRecorder: any = '';
let rtcEngine: any = ''; let rtcEngine: any = '';
@ -80,7 +80,7 @@ const agora = {
await rtcEngine.setupLocalVideo({ await rtcEngine.setupLocalVideo({
renderMode: RenderModeType.RenderModeFit, renderMode: RenderModeType.RenderModeFit,
sourceType: item.sourceType, sourceType: item.sourceType,
uid: item.account, uid: item.uid,
view: item.view, view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupAdd, setupMode: VideoViewSetupMode.VideoViewSetupAdd,
}); });
@ -91,7 +91,7 @@ const agora = {
{ {
renderMode: RenderModeType.RenderModeFit, renderMode: RenderModeType.RenderModeFit,
sourceType: VideoSourceType.VideoSourceRemote, sourceType: VideoSourceType.VideoSourceRemote,
uid: item.account, uid: item.uid,
view: item.view, view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupAdd, setupMode: VideoViewSetupMode.VideoViewSetupAdd,
}, },
@ -104,7 +104,7 @@ const agora = {
{ {
renderMode: RenderModeType.RenderModeFit, renderMode: RenderModeType.RenderModeFit,
sourceType: VideoSourceType.VideoSourceRemote, sourceType: VideoSourceType.VideoSourceRemote,
uid: item.account, uid: item.uid,
view: item.view, view: item.view,
setupMode: VideoViewSetupMode.VideoViewSetupRemove, setupMode: VideoViewSetupMode.VideoViewSetupRemove,
}, },
@ -126,7 +126,7 @@ const agora = {
}, },
// 加入频道 // 加入频道
joinChannel: () => { joinChannel: () => {
rtcEngine.joinChannel(option.token, option.channelId, option.userid, { rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
autoSubscribeAudio: true, autoSubscribeAudio: true,
autoSubscribeVideo: true, autoSubscribeVideo: true,
publishMicrophoneTrack: true, publishMicrophoneTrack: true,
@ -152,8 +152,8 @@ const agora = {
agora.stopScreenCapture() agora.stopScreenCapture()
// rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account) // rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
agora.setupLocalVideo({ agora.setupLocalVideo({
account: Number(option.userid), account: Number(option.uid),
view: document.getElementById(`video-${option.userid}`), view: document.getElementById(`video-${option.uid}`),
channelId: option.channelId, channelId: option.channelId,
sourceType: VideoSourceType.VideoSourceCameraPrimary, sourceType: VideoSourceType.VideoSourceCameraPrimary,
}) })
@ -163,7 +163,7 @@ const agora = {
setJoinChannel: async (data: any) => { setJoinChannel: async (data: any) => {
option.token = data.token; option.token = data.token;
option.channelId = data.channelId; option.channelId = data.channelId;
option.userid = Number(data.userid); option.uid = Number(data.uid);
agora.joinChannel() agora.joinChannel()
}, },
// 桌面捕获音频和视频的媒体源的信息 // 桌面捕获音频和视频的媒体源的信息
@ -174,16 +174,10 @@ const agora = {
setDesktopCapturerVideo: async (targetSource: any) => { setDesktopCapturerVideo: async (targetSource: any) => {
// await rtcEngine.stopCameraCapture(option.sourceType) // await rtcEngine.stopCameraCapture(option.sourceType)
// rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account) // rtcEngine.destroyRendererByConfig(option.sourceType, option.channelId, option.account)
await agora.setupLocalVideo({ const user = JSON.parse(storage.getItem('user') as string)
account: Number(option.userid),
view: document.getElementById(`look-video`),
channelId: option.channelId,
sourceType: VideoSourceType.VideoSourceScreen,
})
agora.stopScreenCapture();
rtcEngine.joinChannelEx( rtcEngine.joinChannelEx(
option.token, option.token,
{ channelId: option.channelId, localUid: option.account }, { channelId: option.channelId, localUid: Number(user.uid) },
{ {
autoSubscribeAudio: false, autoSubscribeAudio: false,
autoSubscribeVideo: false, autoSubscribeVideo: false,
@ -193,6 +187,13 @@ const agora = {
publishScreenTrack: true, publishScreenTrack: true,
} }
); );
await agora.setupLocalVideo({
account: Number(user.uid),
view: document.getElementById(`look-video`),
channelId: option.channelId,
sourceType: VideoSourceType.VideoSourceScreen,
})
agora.stopScreenCapture();
if ( if (
targetSource.type === targetSource.type ===
ScreenCaptureSourceType.ScreencapturesourcetypeScreen ScreenCaptureSourceType.ScreencapturesourcetypeScreen