Fix list devices on web client

examples/web_client.html

@@ -298,6 +298,7 @@
           </div>
         </div>
         <div class="btn-row">
+          <button class="secondary" id="refreshDevicesBtn">Refresh Devices</button>
           <button class="good" id="startMicBtn">Start Mic</button>
           <button class="secondary" id="stopMicBtn">Stop Mic</button>
           <button class="bad" id="interruptBtn">Interrupt</button>
@@ -336,6 +337,7 @@
       const startMicBtn = document.getElementById("startMicBtn");
       const stopMicBtn = document.getElementById("stopMicBtn");
       const interruptBtn = document.getElementById("interruptBtn");
+      const refreshDevicesBtn = document.getElementById("refreshDevicesBtn");
       const sendChatBtn = document.getElementById("sendChatBtn");
       const clearLogBtn = document.getElementById("clearLogBtn");
       const chatInput = document.getElementById("chatInput");
@@ -558,6 +560,17 @@
         });
       }
 
+      async function requestDeviceAccess() {
+        // Needed to reveal device labels in most browsers
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          stream.getTracks().forEach((t) => t.stop());
+          logLine("sys", "Microphone permission granted");
+        } catch (err) {
+          logLine("sys", "Microphone permission denied", { err: String(err) });
+        }
+      }
+
       async function setOutputDevice(deviceId) {
         if (!audioOut.setSinkId) {
           logLine("sys", "setSinkId not supported in this browser");
@@ -569,6 +582,10 @@
 
       connectBtn.addEventListener("click", connect);
       disconnectBtn.addEventListener("click", disconnect);
+      refreshDevicesBtn.addEventListener("click", async () => {
+        await requestDeviceAccess();
+        await refreshDevices();
+      });
       inviteBtn.addEventListener("click", () => {
         sendCommand({ command: "invite", option: { codec: "pcm", sampleRate: targetSampleRate } });
       });