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

优化

This commit is contained in:
yj 2024-08-16 15:00:26 +08:00
parent 05330d2af3
commit c7644b9607
3 changed files with 114 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/JoinSetting/index.tsx
View File

@ -123,31 +123,35 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
{
joinRoomSettingForm.map((item, index) => {
return <div key={index} onClick={async () => {
let msg = '';
if (index === 0) {
await agora.getAudioMediaList().then(res => {
if (!res.ecordingList.length) {
msg = '未检测到麦克风!'
}
})
} else {
await agora.getVideoDeviceManager().then(res => {
if (!res.list.length) {
msg = '未检测到摄像头!'
}
})
}
if (msg) {
message.error('未检测到麦克风!')
return
}
const list = [...joinRoomSettingForm]
list[index].active = !list[index].active
setJoinRoomSettingForm(list)
if (index === 1) {
if (list[index].active) {
agora.startPreview('videoPreview', Number(user.account))
if (user.roleId === '1'){
let msg = '';
if (index === 0) {
await agora.getAudioMediaList().then(res => {
if (!res.ecordingList.length) {
msg = '未检测到麦克风!'
}
})
} else {
await agora.getVideoDeviceManager().then(res => {
if (!res.list.length) {
msg = '未检测到摄像头!'
}
})
}
if (msg) {
message.error('未检测到麦克风!')
return
}
const list = [...joinRoomSettingForm]
list[index].active = !list[index].active
setJoinRoomSettingForm(list)
if (index === 1) {
if (list[index].active) {
agora.startPreview('videoPreview', Number(user.account))
}
}
}else{
message.error('您不是管理员，无法开启此功能！')
}
}}>
<img src={item.active ? item.icon : item.iconActive} alt="" />

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

@ -122,6 +122,7 @@ const Meeting: React.FC = () => {
const [isShareUser, setIsShareUser] = useState<any>(null)
const [currentLookUserStatus, setCurrentLookUserStatus] = useState<0 | 1 | 2 | 3 | 4>(1)
let userInfo = JSON.parse(storage.getItem('user') as string)
const msgTips = '您不是管理员，无法开启此功能！'
useEffect(() => {
let time = null as any;
setUser(userInfo)
@ -188,6 +189,7 @@ const Meeting: React.FC = () => {
channelId: state.channelId,
uid: userInfo.uid,
token: state.token,
roleId: userInfo.roleId,
})
storage.setItem('noViewChatList', 0)
window.addEventListener('customStorageChange', handleCustomStorageChange);
@ -227,18 +229,6 @@ const Meeting: React.FC = () => {
const item = roomUserList.find((item: any) => item.screenShareId === String(isShare))
setIsShareUser(item || null)
}
function moveObjectToFront(arr: any, objToMove: any) {
const index = arr.findIndex((item: any) => {
return item.uid === objToMove.uid;
});
if (index !== -1) {
const movedObj = arr.splice(index, 1)[0];
arr.unshift(movedObj);
}
return arr;
}
setRoomUserList(moveObjectToFront(roomUserList, userInfo))
}, [isShare, roomUserList]);
useEffect(() => {
@ -306,7 +296,7 @@ const Meeting: React.FC = () => {
case 'OperCamera':
setAllUserListData('OperCamera', item)
break;
// 管理员用户信息刷新
// 主讲人用户信息刷新
case 'ManagerRefresh':
setAllUserListData('ManagerRefresh', item)
break;
@ -351,6 +341,24 @@ const Meeting: React.FC = () => {
}, [recorder])
const changeAgoraDevice = () => {
function moveAdminsAndSpeakersToFront(arr: any[]): any[] {
// 创建一个新的数组来存放管理员和主讲人
const adminsAndSpeakers = [] as any;
// 创建一个新的数组来存放其他用户
const otherUsers = [] as any;
// 遍历原始数组
arr.forEach((item: any) => {
if (item.role === '1' || item.isRoomManager) {
// 如果是管理员或主讲人，添加到 adminsAndSpeakers 数组
adminsAndSpeakers.push(item);
} else {
// 否则，添加到 otherUsers 数组
otherUsers.push(item);
}
});
// 将管理员和主讲人放在数组的最前面
return [...adminsAndSpeakers, ...otherUsers];
}
setRoomUserList((res: any) => {
res.forEach((item: any) => {
if (item.uid === userInfo.uid) {
@ -373,7 +381,7 @@ const Meeting: React.FC = () => {
item.isShow = true;
}
});
return res
return moveAdminsAndSpeakersToFront(res)
})
}
// 替换数据
@ -709,17 +717,43 @@ const Meeting: React.FC = () => {
}
// 开关麦克风
const postOpenMicr = async (enableMicr: boolean, uid: string, isAll?: boolean): Promise<void> => {
if (isAll) {
await PostMuteAll({
roomNum: state.channelId,
enableMicr
})
if (user.roleId === '1') {
if (isAll) {
await PostMuteAll({
roomNum: state.channelId,
enableMicr
})
} else {
let msg = '';
if (uid === user.uid) {
await agora.getAudioMediaList().then(res => {
if (!res.ecordingList.length) {
msg = '未检测到麦克风!'
}
})
}
if (msg) {
message.error(msg)
return
}
await PostOpenMicr({
roomNum: state.channelId,
uid,
enableMicr
})
}
} else {
message.error(msgTips)
}
}
// 开关视频
const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
if (user.roleId === '1') {
let msg = '';
if (uid === user.uid) {
await agora.getAudioMediaList().then(res => {
if (!res.ecordingList.length) {
msg = '未检测到麦克风!'
await agora.getVideoDeviceManager().then(res => {
if (!res.list.length) {
msg = '未检测到摄像头!'
}
})
}
@ -727,37 +761,19 @@ const Meeting: React.FC = () => {
message.error(msg)
return
}
await PostOpenMicr({
if (enableCamera) {
await agora.startCameraCapture()
} else {
await agora.stopCameraCapture();
}
await PostOpenCamera({
roomNum: state.channelId,
uid,
enableMicr
enableCamera
})
}
}
// 开关视频
const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
let msg = '';
if (uid === user.uid) {
await agora.getVideoDeviceManager().then(res => {
if (!res.list.length) {
msg = '未检测到摄像头!'
}
})
}
if (msg) {
message.error(msg)
return
}
if (enableCamera) {
await agora.startCameraCapture()
} else {
await agora.stopCameraCapture();
message.error(msgTips)
}
await PostOpenCamera({
roomNum: state.channelId,
uid,
enableCamera
})
}
// 演讲者模式
// const changeSpeakerMode = (): void => {
@ -910,9 +926,9 @@ const Meeting: React.FC = () => {
{String(isShare) === item.screenShareId ? <div className={styles.meetingContentSwiperCardShare}>
屏幕分享中
</div> : null}
<Popover placement="bottom" title={''} content={
{user.roleId === '1' ? <Popover placement="bottom" title={''} content={
<div className={styles.meetingContentSwiperCardPopover}>
{user.roleId === '1' ? <Button
<Button
type="primary"
className='m-ant-btn'
size={'small'}
@ -920,8 +936,8 @@ const Meeting: React.FC = () => {
event.stopPropagation();
setAllUserLook(item)
}}
>全员看Ta</Button> : ''}
{item.uid !== user.uid && user.roleId === '1' ? <Button
>全员看Ta</Button>
{item.uid !== user.uid ? <Button
type="primary"
className='m-ant-btn'
size={'small'}
@ -930,7 +946,7 @@ const Meeting: React.FC = () => {
GetRoomKickout(state.channelId, item.uid)
}}
>踢出房间</Button> : null}
{item.uid !== user.uid && user.roleId === '1' ? <Button
{item.uid !== user.uid ? <Button
type="primary"
className='m-ant-btn'
size={'small'}
@ -950,7 +966,7 @@ const Meeting: React.FC = () => {
})
}
}}
>{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button> : null}
>{item.isRoomManager ? '取消房间主讲人' : '设为房间主讲人'}</Button> : null}
<Button
type="primary"
className='m-ant-btn'
@ -977,7 +993,7 @@ const Meeting: React.FC = () => {
fontSize: '20px'
}} />
</div>
</Popover>
</Popover> : null}
<div className={styles.meetingContentSwiperCardBorder}>
{item.enableMicr ? <div id={`micr-${item.uid}`}></div> : null}
</div>
@ -1120,7 +1136,7 @@ const Meeting: React.FC = () => {
})
}
}}
>{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button>
>{item.isRoomManager ? '取消房间主讲人' : '设为房间主讲人'}</Button>
<Button
type="primary"
className='m-ant-btn'

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

@ -13,7 +13,8 @@ const option: any = {
appId: 'dcfc466a6ecb4a1f972630065dfb1e75',
token: '',
channelId: '',
uid: ''
uid: '',
roleId: ''
}
let rtcEngine: any = '';
@ -185,16 +186,22 @@ const agora = {
agora.release()
},
// 加入频道
joinChannel: () => {
rtcEngine.enableAudioVolumeIndication(100, 1, true)
rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
joinChannel: async () => {
await rtcEngine.enableAudioVolumeIndication(100, 1, true)
await rtcEngine.joinChannel(option.token, option.channelId, option.uid, {
autoSubscribeAudio: true,//设置是否自动订阅所有音频流
autoSubscribeVideo: true,//设置是否自动订阅所有视频流
publishMicrophoneTrack: true,//设置是否发布麦克风采集到的音频
publishCameraTrack: true,//设置是否发布摄像头采集的视频
clientRoleType: ClientRoleType.ClientRoleBroadcaster, //用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众
publishScreenTrack: false,//设置是否发布屏幕采集的视频
});
await agora.updateChannelMediaOptions()
},
// 更新频道配置
updateChannelMediaOptions: async () => {
await rtcEngine.updateChannelMediaOptions({
clientRoleType: option.roleId === '1' ? ClientRoleType.ClientRoleBroadcaster : ClientRoleType.ClientRoleAudience, //用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众
})
},
// 共享屏幕单独用户
joinChannelEx: async (uid: any) => {
@ -242,7 +249,8 @@ const agora = {
option.token = data.token;
option.channelId = data.channelId;
option.uid = Number(data.uid);
agora.joinChannel()
option.roleId = data.roleId;
await agora.joinChannel()
},
// 桌面捕获音频和视频的媒体源的信息
getDesktopCapturerVideo: async () => {