视频监控

src/components/JoinSetting/index.tsx

@@ -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 => {
+    GetRoomRtcToken(roomNum).then(res => {
-      if (res[0].code === 200 && res[1].code === 200) {
+      if (res.code === 200) {
         callBack({
-          token: res[0].data,
+          token: res.data,
-          tokenA: res[1].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,

src/page/Home/Index/index.tsx

@@ -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 => {
+    GetRoomRtcToken(roomNum).then(res => {
-      if (res[0].code === 200 && res[1].code === 200) {
+      if (res.code === 200) {
         callBack({
-          token: res[0].data,
+          token: res.data,
-          tokenA: res[1].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,

src/page/Meeting/index.module.scss

@@ -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;
-          }
-        }
       }
     }
 

src/page/Meeting/index.tsx

@@ -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,
+    userChatList: false
-    userVideo: 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.allJoinChannelEx(item.user, false)
-                  await agora.allLeaveChannelEx()
-                }
                 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) {
+            setRoomUserList((res: any) => {
-              GetRoomRtcToken(state.channelId + 'a').then(async res => {
+              let userRow = res.find((row: any) => row.uid === userId)
-                if (res.code === 200) {
+              if (userId) {
-                  await agora.allJoinChannelEx(false, res.data)
+                agora.allJoinChannelEx(userRow, true)
-                }
+              } else {
-              })
+                agora.allJoinChannelEx(userRow, false)
-            } else {
+              }
-              await agora.allLeaveChannelEx()
+              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) {
+        window.open(`http://localhost:8080?uid=${Number('1' + userInfo.screenShareId)}&channel=${state.channelId}&token=${userInfo.token}`)
-          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)
         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' }}>
+                      null
-                        <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>
                   }
                 </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>
                         }

src/utils/package/agora.ts

@@ -346,34 +346,20 @@ export const agora = {
       }
     );
   },
-  // 所有用户加入的第二个房间
+  // 监控
-  allJoinChannelEx: async (bool: boolean = false, token: string) => {
+  allJoinChannelEx: async (user: any, bool: boolean) => {
-    const user = await JSON.parse(storage.getItem('user') as string)
+    if (!role.ID.includes(user.roleId) || !user.isRoomManager) {
-    await agora.startCameraCapture(true)
+      await rtcEngine.updateChannelMediaOptions({
-    await rtcEngine.joinChannelEx(
+        clientRoleType: bool ? ClientRoleType.ClientRoleBroadcaster : ClientRoleType.ClientRoleAudience,  //用户角色  ClientRoleBroadcaster 主播  ClientRoleAudience 观众
-      token,
-      { channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) },
-      {
-        clientRoleType: bool ? ClientRoleType.ClientRoleAudience : ClientRoleType.ClientRoleBroadcaster,  //用户角色  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,
+        audienceLatencyLevel: bool ? AudienceLatencyLevelType.AudienceLatencyLevelUltraLowLatency : AudienceLatencyLevelType.AudienceLatencyLevelLowLatency,
-      }
+      })
-    );
+      bool ? agora.startCameraCapture() : agora.stopCameraCapture()
-    await rtcEngine.setDualStreamModeEx(
+    }
-      SimulcastStreamMode.EnableSimulcastStream,
-      {
-        dimensions: {
-          width: 320,
-          height: 180
-        },
-        framerate: 5,
-      },
-      { channelId: option.channelId + 'a', localUid: Number('1' + option.screenShareId) }
-    );
   },
   // 退出第二个房间
   allLeaveChannelEx: async () => {