Add video/mic mute

src/ConferenceCallManager.js

@@ -171,6 +171,9 @@ export class ConferenceCallManager extends EventEmitter {
 
     this.localParticipant = null;
 
+    this.micMuted = false;
+    this.videoMuted = false;
+
     this.client.on("RoomState.members", this._onRoomStateMembers);
     this.client.on("Call.incoming", this._onIncomingCall);
     this.callDebugger = new ConferenceCallDebugger(this);
@@ -307,12 +310,66 @@ export class ConferenceCallManager extends EventEmitter {
     this.participants = [];
     this.localParticipant.stream = null;
     this.localParticipant.call = null;
+    this.micMuted = false;
+    this.videoMuted = false;
     clearTimeout(this._memberParticipantStateTimeout);
 
     this.emit("participants_changed");
     this.emit("left");
   }
 
+  setMicMuted(muted) {
+    this.micMuted = muted;
+
+    const localStream = this.client.localAVStream;
+
+    if (localStream) {
+      for (const track of localStream.getTracks()) {
+        if (track.kind === "audio") {
+          track.enabled = !this.micMuted;
+        }
+      }
+    }
+
+    for (let participant of this.participants) {
+      const call = participant.call;
+
+      if (
+        call &&
+        call.localUsermediaStream &&
+        call.isMicrophoneMuted() !== this.micMuted
+      ) {
+        call.setMicrophoneMuted(this.micMuted);
+      }
+    }
+  }
+
+  setVideoMuted(muted) {
+    this.videoMuted = muted;
+
+    const localStream = this.client.localAVStream;
+
+    if (localStream) {
+      for (const track of localStream.getTracks()) {
+        if (track.kind === "video") {
+          track.enabled = !this.videoMuted;
+        }
+      }
+    }
+
+    for (let participant of this.participants) {
+      const call = participant.call;
+
+      if (
+        call &&
+        call.localUsermediaStream &&
+        call.isLocalVideoMuted() !== this.videoMuted
+      ) {
+        call.setLocalVideoMuted(this.videoMuted);
+      }
+    }
+  }
+
   logout() {
     localStorage.removeItem("matrix-auth-store");
   }
@@ -557,6 +614,20 @@ export class ConferenceCallManager extends EventEmitter {
    */
 
   _onCallStateChanged = (participant, call, state) => {
+    if (
+      call.localUsermediaStream &&
+      call.isMicrophoneMuted() !== this.micMuted
+    ) {
+      call.setMicrophoneMuted(this.micMuted);
+    }
+
+    if (
+      call.localUsermediaStream &&
+      call.isLocalVideoMuted() !== this.videoMuted
+    ) {
+      call.setLocalVideoMuted(this.videoMuted);
+    }
+
     this.emit("debugstate", participant.userId, call.callId, state);
   };
 

src/ConferenceCallManagerHooks.js

@@ -139,15 +139,28 @@ export function useConferenceCallManager(homeserverUrl) {
 }
 
 export function useVideoRoom(manager, roomId, timeout = 5000) {
-  const [{ loading, joined, joining, room, participants, error }, setState] =
-    useState({
-      loading: true,
-      joining: false,
-      joined: false,
-      room: undefined,
-      participants: [],
-      error: undefined,
-    });
+  const [
+    {
+      loading,
+      joined,
+      joining,
+      room,
+      participants,
+      error,
+      videoMuted,
+      micMuted,
+    },
+    setState,
+  ] = useState({
+    loading: true,
+    joining: false,
+    joined: false,
+    room: undefined,
+    participants: [],
+    error: undefined,
+    videoMuted: false,
+    micMuted: false,
+  });
 
   useEffect(() => {
     setState((prevState) => ({
@@ -305,6 +318,16 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
     };
   }, [manager]);
 
+  const toggleMuteMic = useCallback(() => {
+    manager.setMicMuted(!manager.micMuted);
+    setState((prevState) => ({ ...prevState, micMuted: manager.micMuted }));
+  }, [manager]);
+
+  const toggleMuteVideo = useCallback(() => {
+    manager.setVideoMuted(!manager.videoMuted);
+    setState((prevState) => ({ ...prevState, videoMuted: manager.videoMuted }));
+  }, [manager]);
+
   return {
     loading,
     joined,
@@ -314,6 +337,10 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
     error,
     joinCall,
     leaveCall,
+    toggleMuteVideo,
+    toggleMuteMic,
+    videoMuted,
+    micMuted,
   };
 }
 

src/Room.jsx

@@ -46,6 +46,10 @@ export function Room({ manager }) {
     error,
     joinCall,
     leaveCall,
+    toggleMuteVideo,
+    toggleMuteMic,
+    videoMuted,
+    micMuted,
   } = useVideoRoom(manager, roomId);
   const debugStr = query.get("debug");
   const [debug, setDebug] = useState(debugStr === "" || debugStr === "true");
@@ -113,8 +117,8 @@ export function Room({ manager }) {
       )}
       {!loading && room && joined && (
         <div className={styles.footer}>
-          <MicButton />
-          <VideoButton />
+          <MicButton muted={micMuted} onClick={toggleMuteMic} />
+          <VideoButton enabled={videoMuted} onClick={toggleMuteVideo} />
           <HangupButton onClick={leaveCall} />
         </div>
       )}