fix mute button

index.html

@@ -509,18 +509,14 @@
                         <button class="btn btn-primary" id="startBtn" onclick="startStream()" disabled>Start</button>
                         <button class="btn btn-danger" id="stopBtn" onclick="stopStream()" disabled>Stop</button>
                         <button class="btn btn-mute muted" id="muteBtn" onclick="toggleMute()" disabled>
-                            <svg id="micOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <line x1="1" y1="1" x2="23" y2="23"></line>
-                                <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path>
-                                <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
-                                <line x1="12" y1="19" x2="12" y2="23"></line>
-                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            <svg id="speakerOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <line x1="23" y1="9" x2="17" y2="15"></line>
+                                <line x1="17" y1="9" x2="23" y2="15"></line>
                             </svg>
-                            <svg id="micOnIcon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                                <line x1="12" y1="19" x2="12" y2="23"></line>
-                                <line x1="8" y1="23" x2="16" y2="23"></line>
+                            <svg id="speakerOnIcon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                             </svg>
                             <span id="muteText">Unmute</span>
                         </button>
@@ -620,8 +616,7 @@
         // Latency monitor
         let latencyMonitorId = null;
 
-        // Microphone state
-        let localStream = null;
+        // Audio mute state (for robot's audio playback)
         let isMuted = true; // Default to muted
 
         // Export functions
@@ -813,31 +808,16 @@
             if (!selectedProducerId) return;
             updateStatus('connecting', 'Connecting...');
 
-            // Get microphone access
-            try {
-                localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                // Start muted by default
-                localStream.getAudioTracks().forEach(track => {
-                    track.enabled = false;
-                });
-                isMuted = true;
-                updateMuteButton();
-            } catch (e) {
-                console.warn('Could not access microphone:', e);
-                localStream = null;
-            }
+            // Ensure video is muted by default
+            const video = document.getElementById('remoteVideo');
+            video.muted = true;
+            isMuted = true;
+            updateMuteButton();
 
             peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
 
-            // Add microphone track to peer connection
-            if (localStream) {
-                localStream.getAudioTracks().forEach(track => {
-                    peerConnection.addTrack(track, localStream);
-                });
-            }
-
             peerConnection.ontrack = (e) => {
                 if (e.track.kind === 'video') {
                     const video = document.getElementById('remoteVideo');
@@ -936,21 +916,12 @@
             if (peerConnection) peerConnection.close();
             if (dataChannel) dataChannel.close();
 
-            // Stop microphone
-            if (localStream) {
-                localStream.getTracks().forEach(track => track.stop());
-                localStream = null;
-            }
-            isMuted = true;
-            updateMuteButton();
-
             peerConnection = null;
             dataChannel = null;
             currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
             document.getElementById('startBtn').disabled = !selectedProducerId;
             document.getElementById('stopBtn').disabled = true;
-            document.getElementById('muteBtn').disabled = true;
             document.getElementById('robotSelector').classList.remove('hidden');
             enableControls(false);
             updateStatus('connected', 'Connected');
@@ -958,33 +929,30 @@
 
         function enableControls(enabled) {
             document.getElementById('btnPlaySound').disabled = !enabled;
-            document.getElementById('muteBtn').disabled = !enabled || !localStream;
+            document.getElementById('muteBtn').disabled = !enabled;
         }
 
         function toggleMute() {
-            if (!localStream) return;
             isMuted = !isMuted;
-            localStream.getAudioTracks().forEach(track => {
-                track.enabled = !isMuted;
-            });
+            document.getElementById('remoteVideo').muted = isMuted;
             updateMuteButton();
         }
 
         function updateMuteButton() {
             const btn = document.getElementById('muteBtn');
-            const micOffIcon = document.getElementById('micOffIcon');
-            const micOnIcon = document.getElementById('micOnIcon');
+            const speakerOffIcon = document.getElementById('speakerOffIcon');
+            const speakerOnIcon = document.getElementById('speakerOnIcon');
             const muteText = document.getElementById('muteText');
 
             if (isMuted) {
                 btn.classList.add('muted');
-                micOffIcon.classList.remove('hidden');
-                micOnIcon.classList.add('hidden');
+                speakerOffIcon.classList.remove('hidden');
+                speakerOnIcon.classList.add('hidden');
                 muteText.textContent = 'Unmute';
             } else {
                 btn.classList.remove('muted');
-                micOffIcon.classList.add('hidden');
-                micOnIcon.classList.remove('hidden');
+                speakerOffIcon.classList.add('hidden');
+                speakerOnIcon.classList.remove('hidden');
                 muteText.textContent = 'Mute';
             }
         }