关闭声音视频

src/page/Meeting/index.module.scss

@@ -157,6 +157,7 @@
           bottom: 10px;
           display: flex;
           align-items: center;
+          z-index: 2;
 
           .meetingContentUserRole {
             background: #FDC229;
@@ -191,6 +192,21 @@
             }
           }
         }
+
+        .meetingContentError {
+          position: absolute;
+          justify-content: center;
+          display: flex;
+          align-items: center;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          background-color: black;
+          color: white;
+          font-size: 20px;
+        }
       }
 
       .meetingContentBodyRight {

src/page/Meeting/index.tsx

@@ -207,24 +207,48 @@ const Meeting: React.FC = () => {
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
         agora.muteLocalAudioStream(true)
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          isMute: false,
+          isCloseCamera: true
+        })
+        getRoomUser()
         break;
       case '开启声音':
         footerListTemplate[itemIndex][rowIndex].title = '关闭声音'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
         agora.muteLocalAudioStream(false)
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          isMute: true,
+          isCloseCamera: true
+        })
+        getRoomUser()
         break;
       case '关闭视频':
         footerListTemplate[itemIndex][rowIndex].title = '开启视频'
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
         agora.muteLocalVideoStream(true)
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          isMute: true,
+          isCloseCamera: false
+        })
+        getRoomUser()
         break;
       case '开启视频':
         footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
         agora.muteLocalVideoStream(false)
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          isMute: true,
+          isCloseCamera: true
+        })
+        getRoomUser()
         break;
       case '设置向导':
         stupWizardRef.current.changeIsStupWizard()
@@ -309,11 +333,13 @@ const Meeting: React.FC = () => {
     })
   }
 
-  const handleCustomStorageChange = (e: any): void => {
+  const handleCustomStorageChange = async (e: any): Promise<void> => {
     if (e.key === 'isJoin') {
       if (e.value) {
-        onInvoke('joinChannel', {
-          roomNum: state.channelId
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          isMute: true,
+          isCloseCamera: true
         })
         getRoomUser()
       } else {
@@ -381,6 +407,7 @@ const Meeting: React.FC = () => {
                       </div>
                     </div>
                     {meetingContentUser(item)}
+                    {item.isCloseCamera ? null : meetingContentError()}
                   </div>
                 )}
               </div>
@@ -705,12 +732,21 @@ const meetingContentUser = (item: any) => {
           <img src={ImageUrl.icon32} alt="" />
         </div> : null}
         <div className={styles.meetingContentUserName}>
-          <img src={ImageUrl.icon22} alt="" />
+          <img src={item.isMute ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
           <span>{item.userName}</span>
         </div>
       </div>
     </>
   )
 }
+const meetingContentError = () => {
+  return (
+    <>
+      <div className={styles.meetingContentError}>
+        无视频
+      </div>
+    </>
+  )
+}
 
 export default Meeting

src/utils/package/signalr.ts

@@ -23,14 +23,16 @@ export const onSignalr = (callBack: Function) => {
     })
   });
 }
-export const onInvoke = (str: string, data: any) => {
+export const onInvoke = async (str: string, data: any) => {
   switch (str) {
     case 'joinChannel':
+      await connection.invoke(str, data.roomNum, data.isMute, data.isCloseCamera)
+      break;
     case 'levelChannel':
-      connection.invoke(str, data.roomNum)
+      await connection.invoke(str, data.roomNum)
       break;
     case 'sendChannelMsg':
-      connection.invoke(str, data.roomNum, data.msg)
+      await connection.invoke(str, data.roomNum, data.msg)
       break;
   }
 }