fix: muted functionality

Author: varshith15

ui/src/components/room.tsx

@@ -20,6 +20,7 @@ interface MediaStreamPlayerProps {
 function MediaStreamPlayer({ stream }: MediaStreamPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [needsPlayButton, setNeedsPlayButton] = useState(false);
+  const hasVideo = stream.getVideoTracks().length > 0;
 
   useEffect(() => {
     if (!videoRef.current || !stream) return;
@@ -124,7 +125,6 @@ function Stage({ connected, onStreamReady }: StageProps) {
           className="w-full h-full object-cover"
           autoPlay
           loop
-          // muted
           playsInline
         >
           <source src="/loading.mp4" type="video/mp4" />
@@ -133,19 +133,23 @@ function Stage({ connected, onStreamReady }: StageProps) {
     );
   }
 
+  const hasVideo = remoteStream.getVideoTracks().length > 0;
+
   return (
     <div className="relative w-full h-full">
       <MediaStreamPlayer stream={remoteStream} />
-      <div className="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-sm">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger>{frameRate} FPS</TooltipTrigger>
-            <TooltipContent>
-              <p>This is the FPS of the output stream.</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      {hasVideo && (
+        <div className="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-sm">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>{frameRate} FPS</TooltipTrigger>
+              <TooltipContent>
+                <p>This is the FPS of the output stream.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      )}
     </div>
   );
 }
@@ -200,18 +204,16 @@ export function Room() {
 
   const handleConnected = useCallback(() => {
     setIsConnected(true);
-
-    console.debug("Connected!");
-
     connectingRef.current = false;
   }, []);
 
   const handleDisconnected = useCallback(() => {
     setIsConnected(false);
-
-    console.debug("Disconnected!");
   }, []);
 
+  // Check if we have video tracks in the local stream
+  const hasLocalVideo = localStream && localStream.getVideoTracks().length > 0;
+
   return (
     <main className="fixed inset-0 overflow-hidden overscroll-none">
       <meta

ui/src/components/webcam.tsx

@@ -162,25 +162,7 @@ export function Webcam({ onStreamReady, deviceId, frameRate, selectedAudioDevice
       };
 
       const newStream = await navigator.mediaDevices.getUserMedia(constraints);
-      
-      // Create a new stream with only the tracks we want
-      const filteredTracks: MediaStreamTrack[] = [];
-      if (deviceId !== "none") {
-        filteredTracks.push(...newStream.getVideoTracks());
-      }
-      if (selectedAudioDeviceId !== "none") {
-        filteredTracks.push(...newStream.getAudioTracks());
-      }
-      
-      // Stop any tracks we're not using
-      newStream.getTracks().forEach(track => {
-        if (!filteredTracks.includes(track)) {
-          track.stop();
-        }
-      });
-
-      const filteredStream = new MediaStream(filteredTracks);
-      return filteredStream;
+      return newStream;
     } catch (error) {
       console.error("Error accessing media devices.", error);
       return null;
@@ -192,13 +174,9 @@ export function Webcam({ onStreamReady, deviceId, frameRate, selectedAudioDevice
     if (frameRate == 0) return;
 
     startWebcam().then((newStream) => {
-      replaceStream(newStream);
       if (newStream) {
-        // Only pass to StreamCanvas if we have video
-        if (deviceId !== "none") {
-          setStream(newStream);
-        }
-        // Only call onStreamReady if we have a valid stream
+        replaceStream(newStream);
+        setStream(newStream);
         onStreamReady(newStream);
       }
     });
@@ -208,8 +186,20 @@ export function Webcam({ onStreamReady, deviceId, frameRate, selectedAudioDevice
     };
   }, [deviceId, frameRate, selectedAudioDeviceId, startWebcam, replaceStream, onStreamReady]);
 
-  // Only render StreamCanvas if video is enabled
-  if (deviceId === "none") {
+  const hasVideo = stream && stream.getVideoTracks().length > 0;
+  const hasAudio = stream && stream.getAudioTracks().length > 0;
+
+  // Return audio-only placeholder if we have audio but no video
+  if (!hasVideo && hasAudio) {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="text-white">Audio Only</span>
+      </div>
+    );
+  }
+
+  // Return null if we have neither video nor audio
+  if (!stream || (!hasVideo && !hasAudio)) {
     return null;
   }
 
@@ -218,9 +208,7 @@ export function Webcam({ onStreamReady, deviceId, frameRate, selectedAudioDevice
       <StreamCanvas
         stream={stream}
         frameRate={frameRate}
-        onStreamReady={(processedStream) => {
-          // Don't call onStreamReady here anymore since we handle it above
-        }}
+        onStreamReady={() => {}} // We handle stream ready in the parent component
       />
     </div>
   );

ui/src/hooks/use-peer.ts

@@ -81,7 +81,6 @@ export function usePeer(props: PeerProps): Peer {
       const pc = new RTCPeerConnection(configuration);
       setPeerConnection(pc);
 
-      // Only add video transceiver if we have video tracks
       if (localStream.getVideoTracks().length > 0) {
         pc.addTransceiver("video");
       }
@@ -90,38 +89,19 @@ export function usePeer(props: PeerProps): Peer {
         pc.addTrack(track, localStream);
       });
 
-      // Create control channel for both negotiation and control
       const channel = pc.createDataChannel("control");
 
       channel.onopen = () => {
-        console.log("[usePeer] Control channel opened, readyState:", channel.readyState);
         setControlChannel(channel);
       };
 
       channel.onclose = () => {
-        console.log("[usePeer] Control channel closed");
         setControlChannel(null);
       };
 
-      channel.onerror = (error) => {
-        console.error("Control channel error:", error);
-      };
-
-      channel.onmessage = (event) => {
-        console.log("Received message on control channel:", event.data);
-      };
-
       pc.ontrack = (event) => {
-        if (event.track.kind === "video") {
+        if (event.streams && event.streams[0]) {
           setRemoteStream(event.streams[0]);
-        } else if (event.track.kind === "audio") {
-          // If we already have a remote stream, add the audio track to it
-          if (remoteStream) {
-            remoteStream.addTrack(event.track);
-          } else {
-            // Otherwise create a new stream with the audio track
-            setRemoteStream(new MediaStream([event.track]));
-          }
         }
       };
 
@@ -141,7 +121,7 @@ export function usePeer(props: PeerProps): Peer {
         await pc.setLocalDescription(offer);
       };
 
-      createOffer().catch(console.error);
+      createOffer();
     } else {
       if (connectionStateTimeoutRef.current) {
         clearTimeout(connectionStateTimeoutRef.current);