diff --git a/examples/web_client.html b/examples/web_client.html index b079209..05edb2a 100644 --- a/examples/web_client.html +++ b/examples/web_client.html @@ -298,6 +298,7 @@
+ @@ -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 } }); });