handle onmute track

Author: lherman-cs

demo/index.html

@@ -30,7 +30,8 @@ <h3>Local</h3>
       </div>
       <div class="card">
         <h3>Remote</h3>
-        <video id="remote" autoplay style="width: 100%; height: auto; background:black;"></video>
+        <video id="remote-video" autoplay style="width: 100%; height: auto; background:black;"></video>
+        <audio id="remote-audio" autoplay></audio>
       </div>
     </div>
   </main>

demo/src/main.ts

@@ -1,5 +1,6 @@
 const localVideo = document.getElementById("local") as HTMLVideoElement;
-const remoteVideo = document.getElementById("remote") as HTMLVideoElement;
+const remoteVideo = document.getElementById("remote-video") as HTMLVideoElement;
+const remoteAudio = document.getElementById("remote-audio") as HTMLAudioElement;
 const form = document.getElementById("controls") as HTMLFormElement;
 const endpointInput = document.getElementById("endpoint") as HTMLInputElement;
 const toggleBtn = document.getElementById("toggle") as HTMLButtonElement;
@@ -17,7 +18,11 @@ form.onsubmit = async (e) => {
     const endpoint = endpointInput.value.trim();
     if (!endpoint) return alert("Please enter a valid endpoint");
     toggleBtn.textContent = "Stop";
-    await start(endpoint);
+    try {
+      await start(endpoint);
+    } catch(e) {
+      stop();
+    }
   }
 };
 
@@ -46,10 +51,27 @@ async function start(endpoint: string) {
   // WHEP: recv-only transceivers
   pc.addTransceiver("video", { direction: "recvonly" });
   pc.addTransceiver("audio", { direction: "recvonly" });
-  const remoteStream = new MediaStream();
-  remoteVideo.srcObject = remoteStream;
+  const remoteVideoStream = new MediaStream();
+  const remoteAudioStream = new MediaStream();
+  remoteAudio.srcObject = remoteAudioStream;
   pc.ontrack = (e) => {
-    remoteStream.addTrack(e.track);
+    if (e.track.kind === "video") {
+      e.track.onended = () => {
+        console.log(`Remote track ended: ${e.track.kind}`);
+        remoteVideo.srcObject = null;
+      }
+      e.track.onmute = () => {
+        console.log(`Remote track muted: ${e.track.kind}`);
+        remoteVideo.srcObject = null;
+      }
+      e.track.onunmute = () => {
+        console.log(`Remote track unmuted: ${e.track.kind}`);
+        remoteVideo.srcObject = remoteVideoStream;
+      }
+      remoteVideoStream.addTrack(e.track);
+    } else if (e.track.kind === "audio") {
+      remoteAudioStream.addTrack(e.track);
+    }
   };
 
   pc.onconnectionstatechange = () => {

pulsebeam/src/main.rs

@@ -77,7 +77,7 @@ pub async fn run(cpu_rt: rt::Runtime) {
         external_ip,
     );
 
-    node::run(cpu_rt, external_addr, unified_socket, http_socket, false)
+    node::run(cpu_rt, external_addr, unified_socket, http_socket, true)
         .await
         .unwrap();
 }

pulsebeam/src/participant.rs

@@ -589,7 +589,7 @@ impl ParticipantActor {
             return;
         };
 
-        tracing::debug!("wrote to rtp");
+        tracing::trace!("wrote to rtp");
         if let Err(err) = writer.write(pt, data.network_time, data.time, data.data.clone()) {
             tracing::error!("failed to write media: {}", err);
             self.rtc.disconnect();