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

视频监控

This commit is contained in:
yj 2025-03-10 14:19:16 +08:00
parent bde5002e1e
commit 3a43f75c91
5 changed files with 33 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,11 +83,10 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
})
}
const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
Promise.all([GetRoomRtcToken(roomNum), GetRoomRtcToken(roomNum + 'a')]).then(res => {
if (res[0].code === 200 && res[1].code === 200) {
GetRoomRtcToken(roomNum).then(res => {
if (res.code === 200) {
callBack({
token: res[0].data,
tokenA: res[1].data,
token: res.data,
})
} else {
storage.setItem('loading', false)
@ -213,7 +212,6 @@ const JoinSetting = forwardRef((_props: any, ref: any) => {
state: {
channelId: roomNumber,
token: options.token,
tokenA: options.tokenA,
roomId: res.data.id,
roomName: res.data.roomName,
enableMicr: joinRoomSettingForm[0].active,

8
src/page/Home/Index/index.tsx
View File

@ -111,11 +111,10 @@ const Index: React.FC = () => {
})
}
const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
Promise.all([GetRoomRtcToken(roomNum), GetRoomRtcToken(roomNum + 'a')]).then(res => {
if (res[0].code === 200 && res[1].code === 200) {
GetRoomRtcToken(roomNum).then(res => {
if (res.code === 200) {
callBack({
token: res[0].data,
tokenA: res[1].data,
token: res.data,
})
}
}).finally(() => {
@ -334,7 +333,6 @@ const Index: React.FC = () => {
state: {
channelId: item.roomNum,
token: options.token,
tokenA: options.tokenA,
roomId: item.id,
roomName: item.roomName,
enableMicr: false,

32
src/page/Meeting/index.module.scss
View File

@ -741,38 +741,6 @@
}
}
.meetingUserVideoList {
padding: 10px 10px 10px;
box-sizing: border-box;
height: 100%;
background-color: #16191E;
display: flex;
flex-direction: column;
.meetingUserVideoListTitle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
>span {
color: #EEEEEE;
font-size: 18px;
}
>img {
cursor: pointer;
}
}
.meetingUserVideoListContent {
flex-grow: 1;
height: 0px;
overflow-y: auto;
box-sizing: border-box;
}
}
}
}

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

@ -18,7 +18,6 @@ import Avatar from '@/components/Avatar';
import SharedFilesModel from '@/components/SharedFilesModel';
import StupWizard from '@/components/StupWizard';
import EquipmentManagement from '@/components/EquipmentManagement';
import UserVideo from '@/components/UserVideo';
import { role } from '@/config/role';
import { fixWebmDuration } from "webm-duration-fix-buffer";
import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
@ -47,8 +46,7 @@ const Meeting: React.FC = () => {
const [isClickedMediaSteam, setIsClickedMediaSteam] = useState(false);
const [statusList, setStatusList] = useState({
userList: false,
userChatList: false,
userVideo: false,
userChatList: false
})
const [isSharedScreenModal, setIsSharedScreenModal] = useState(false);
const [quitMeetingModal, setQuitMeetingModal] = useState(false);
@ -171,6 +169,7 @@ const Meeting: React.FC = () => {
const [currentVideoUid, setCurrentVideoUid] = useState('')
let [currentSeconds, setCurrentSeconds] = useState(0)
const [isNetworkQuality, setIsNetworkQuality] = useState(false)
const [userVideoWindow, _setUserVideoWindow] = useState(false)
const [currentEffective, setCurrentEffective] = useState(3)
const [networkQuality, setNetworkQuality] = useState({
level: '佳',
@ -797,7 +796,7 @@ const Meeting: React.FC = () => {
setAllUserListData('ManagerRefresh', item, async () => {
if (item.user.uid === item.uid) {
if (item.user.uid === userInfo.uid) {
await agora.allLeaveChannelEx()
await agora.allJoinChannelEx(item.user, false)
message.success(`操作成功`)
await agora.updateChannelMediaOptions(item.user.isRoomManager)
await postOpenMicrApi(item.user.isRoomManager, userInfo.uid, false)
@ -808,9 +807,7 @@ const Meeting: React.FC = () => {
}
} else {
if (item.user.uid === userInfo.uid) {
if (item.user.isRoomManager) {
await agora.allLeaveChannelEx()
}
await agora.allJoinChannelEx(item.user, false)
message.success(`管理员${item.user.isRoomManager ? '设置' : '取消'}您为发言人`)
await agora.updateChannelMediaOptions(item.user.isRoomManager)
setCurrentRequestSpeakType(res => {
@ -846,15 +843,15 @@ const Meeting: React.FC = () => {
case 'Watch':
if (!role.ID.includes(userInfo.roleId)) {
let userId = item.watchUids.find((uid: any) => uid === userInfo.uid)
if (userId) {
GetRoomRtcToken(state.channelId + 'a').then(async res => {
if (res.code === 200) {
await agora.allJoinChannelEx(false, res.data)
}
})
} else {
await agora.allLeaveChannelEx()
}
setRoomUserList((res: any) => {
let userRow = res.find((row: any) => row.uid === userId)
if (userId) {
agora.allJoinChannelEx(userRow, true)
} else {
agora.allJoinChannelEx(userRow, false)
}
return res
})
}
break;
// 设备列表
@ -1832,14 +1829,12 @@ const Meeting: React.FC = () => {
setStatusList({
userList: statusList.userList ? false : true,
userChatList: false,
userVideo: false,
})
break;
case '聊天':
setStatusList({
userList: false,
userChatList: statusList.userChatList ? false : true,
userVideo: false,
})
storage.setItem('noViewChatList', 0)
setNoViewChatList(0)
@ -2012,22 +2007,7 @@ const Meeting: React.FC = () => {
}
break;
case '会议监控':
if (!statusList.userVideo) {
GetRoomRtcToken(state.channelId + 'a').then(async res => {
if (res.code === 200) {
await agora.allJoinChannelEx(true, res.data)
}
})
} else {
await agora.allLeaveChannelEx()
}
setStatusList({
userVideo: statusList.userVideo ? false : true,
userChatList: false,
userList: false,
})
storage.setItem('noViewChatList', 0)
setNoViewChatList(0)
window.open(`http://localhost:8080?uid=${Number('1' + userInfo.screenShareId)}&channel=${state.channelId}&token=${userInfo.token}`)
break;
case '签到':
singInRef.current.changeModal()
@ -3026,7 +3006,7 @@ const Meeting: React.FC = () => {
</div>
</div>
{
(statusList.userList || statusList.userChatList || statusList.userVideo) ? (
(statusList.userList || statusList.userChatList) ? (
<div className={`${styles.meetingContentBodyRight} drag`}>
{statusList.userList ?
<div className={styles.meetingUserList}>
@ -3036,7 +3016,6 @@ const Meeting: React.FC = () => {
setStatusList({
userList: false,
userChatList: false,
userVideo: false,
})
}} />
</div>
@ -3182,7 +3161,6 @@ const Meeting: React.FC = () => {
setStatusList({
userList: false,
userChatList: false,
userVideo: false,
})
}} />
</div>
@ -3345,22 +3323,7 @@ const Meeting: React.FC = () => {
</div>
</div>
:
<div className={styles.meetingUserVideoList} style={{ width: statusList.userVideo ? '500px' : '500px' }}>
<div className={styles.meetingUserVideoListTitle}>
<span>会议监控</span>
<img src={ImageUrl.icon18} alt="" onClick={async () => {
await agora.allLeaveChannelEx()
setStatusList({
userList: false,
userChatList: false,
userVideo: false,
})
}} />
</div>
<div className={styles.meetingUserVideoListContent}>
<UserVideo />
</div>
</div>
null
}
</div>
) : null
@ -3466,7 +3429,7 @@ const Meeting: React.FC = () => {
onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
key={rowIndex}>
{statusList.userVideo ? <img src={row.iconSelect} alt="" /> : row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
{userVideoWindow ? <img src={row.iconSelect} alt="" /> : row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
<span>{row.title}</span>
</div>
}

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

@ -346,34 +346,20 @@ export const agora = {
}
);
},
// 所有用户加入的第二个房间
allJoinChannelEx: async (bool: boolean = false, token: string) => {
const user = await JSON.parse(storage.getItem('user') as string)
await agora.startCameraCapture(true)
await rtcEngine.joinChannelEx(
token,
{ channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) },
{
clientRoleType: bool ? ClientRoleType.ClientRoleAudience : ClientRoleType.ClientRoleBroadcaster, //用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众
// 监控
allJoinChannelEx: async (user: any, bool: boolean) => {
if (!role.ID.includes(user.roleId) || !user.isRoomManager) {
await rtcEngine.updateChannelMediaOptions({
clientRoleType: bool ? ClientRoleType.ClientRoleBroadcaster : ClientRoleType.ClientRoleAudience, //用户角色 ClientRoleBroadcaster 主播 ClientRoleAudience 观众
autoSubscribeAudio: false,//设置是否自动订阅所有音频流
autoSubscribeVideo: role.ID.includes(user.roleId) ? true : false,//设置是否自动订阅所有视频流
autoSubscribeVideo: false,//设置是否自动订阅所有视频流
publishMicrophoneTrack: false,//设置是否发布麦克风采集到的音频
publishCameraTrack: true,//设置是否发布摄像头采集的视频
publishScreenTrack: false,//设置是否发布屏幕采集的视频
audienceLatencyLevel: bool ? AudienceLatencyLevelType.AudienceLatencyLevelLowLatency : AudienceLatencyLevelType.AudienceLatencyLevelUltraLowLatency,
}
);
await rtcEngine.setDualStreamModeEx(
SimulcastStreamMode.EnableSimulcastStream,
{
dimensions: {
width: 320,
height: 180
},
framerate: 5,
},
{ channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) }
);
audienceLatencyLevel: bool ? AudienceLatencyLevelType.AudienceLatencyLevelUltraLowLatency : AudienceLatencyLevelType.AudienceLatencyLevelLowLatency,
})
bool ? agora.startCameraCapture() : agora.stopCameraCapture()
}
},
// 退出第二个房间
allLeaveChannelEx: async () => {