feat: add mic audio to broadcast, viewer mute/unmute toggle

Author: mohitgauniyal

client/index.html

@@ -57,6 +57,7 @@
         <button onclick="captureToChannel()" class="viewer-capture-btn" title="Save frame to channel">📸
           Capture</button>
         <button onclick="raiseHand()" class="viewer-raise-btn" title="Raise hand">✋</button>
+        <button onclick="toggleAudio()" class="viewer-audio-btn" id="audioToggleBtn" title="Unmute audio">🔇</button>
         <button onclick="toggleMinimize()" class="viewer-minimize-btn" title="Minimize">─</button>
         <button onclick="leaveBroadcast()" class="viewer-close-btn" title="Leave broadcast">✕</button>
       </div>

client/js/app.js

@@ -1724,8 +1724,16 @@ async function startBroadcast() {
     try {
         stream = await navigator.mediaDevices.getDisplayMedia({
             video: { frameRate: { ideal: 30 }, width: { ideal: 1920 }, height: { ideal: 1080 } },
-            audio: false
+            audio: true
         });
+
+        // Mix in microphone if available — failure is silent, broadcast continues without mic
+        try {
+            const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            micStream.getAudioTracks().forEach(track => stream.addTrack(track));
+        } catch (e) {
+            // Mic denied or unavailable — continue without it
+        }
     } catch (e) {
         return;
     }
@@ -1884,17 +1892,25 @@ function leaveBroadcast() {
     const joinBtn = document.getElementById('broadcastJoinBtn');
     if (joinBtn) joinBtn.style.display = 'inline-block';
 
+    // Reset audio button to muted state
+    const audioBtn = document.getElementById('audioToggleBtn');
+    if (audioBtn) {
+        audioBtn.textContent = '🔇';
+        audioBtn.title = 'Unmute audio';
+    }
+
     // Clean up viewer peer connection
     if (viewerPeerConnection) {
         viewerPeerConnection.close();
         viewerPeerConnection = null;
     }
     broadcasterId = null;
 
-    // Stop video stream on viewer element
+    // Stop video stream and reset audio on viewer element
     const video = document.getElementById('viewerFrame');
     if (video) {
         video.srcObject = null;
+        video.muted = true;
     }
 }
 
@@ -1953,6 +1969,16 @@ function toggleMinimize() {
     panel.classList.toggle('minimized');
 }
 
+function toggleAudio() {
+    const video = document.getElementById('viewerFrame');
+    const btn = document.getElementById('audioToggleBtn');
+    if (!video || !btn) return;
+
+    video.muted = !video.muted;
+    btn.textContent = video.muted ? '🔇' : '🔊';
+    btn.title = video.muted ? 'Unmute audio' : 'Mute audio';
+}
+
 function makeDraggable(panel) {
     const header = panel.querySelector('.viewer-panel-header');
     if (!header) return;