Add camera picker dropdown to controls row

After getUserMedia resolves we enumerateDevices and, if there's more
than one video input, expose a dropdown next to the mirror toggle.
Selecting a different camera stops the current stream and restarts
with deviceId: { exact: ... }. The tracking loop reads from the same
<video> element so the swap is transparent.

Hidden when there's only one camera (typical laptop case).

index.html

@@ -93,6 +93,13 @@
                                 <input type="checkbox" id="toggleMirror" checked />
                                 <span>Mirror mode</span>
                             </label>
+                            <!-- Hidden until camera permission resolves and we
+                                 enumerate at least 2 video devices; for a
+                                 single-camera laptop we don't bother showing it. -->
+                            <label class="camera-select hidden" id="cameraSelectWrap">
+                                <span>Camera</span>
+                                <select id="cameraSelect"></select>
+                            </label>
                             <button class="btn btn-secondary" id="btnReset">Reset tuner</button>
                             <button class="btn btn-danger" id="btnStop">Stop</button>
                         </div>

main.js

@@ -402,15 +402,18 @@ function setPickerHeader(text) {
 }
 
 // ─── Webcam ────────────────────────────────────────────────
-// Prefer the front-facing ("user") camera on phones. On laptops the
-// constraint is ignored and the only camera is used.
-async function startCamera() {
+// First call: no deviceId — we ask for `facingMode: "user"` to get
+// the selfie cam on phones and fall back to whatever the browser
+// chooses on laptops. Once permission resolves we can `enumerateDevices`
+// for the camera-picker dropdown; on subsequent calls (camera switch)
+// we pass an explicit deviceId.
+async function startCamera(deviceId = null) {
     if (cameraStream) return cameraStream;
+    const video = deviceId
+        ? { deviceId: { exact: deviceId }, width: { ideal: 640 }, height: { ideal: 480 } }
+        : { facingMode: "user",            width: { ideal: 640 }, height: { ideal: 480 } };
     try {
-        cameraStream = await navigator.mediaDevices.getUserMedia({
-            video: { facingMode: "user", width: { ideal: 640 }, height: { ideal: 480 } },
-            audio: false,
-        });
+        cameraStream = await navigator.mediaDevices.getUserMedia({ video, audio: false });
     } catch (e) {
         console.error("getUserMedia failed:", e);
         alert("Camera permission denied — Mime Bot needs the camera to track your face.");
@@ -424,9 +427,52 @@ async function startCamera() {
         v.srcObject = cameraStream;
         await v.play().catch(() => {});
     }
+    populateCameraSelect();
     return cameraStream;
 }
 
+// Populate the camera-picker dropdown. Browsers hide device LABELS
+// until camera permission is granted, so this is only meaningful
+// after a successful getUserMedia. If there's only one camera, hide
+// the picker — no point showing a one-option dropdown.
+async function populateCameraSelect() {
+    const select = $("cameraSelect");
+    const wrap = $("cameraSelectWrap");
+    if (!select || !wrap) return;
+    let devices;
+    try {
+        devices = await navigator.mediaDevices.enumerateDevices();
+    } catch (e) {
+        console.warn("enumerateDevices failed:", e);
+        return;
+    }
+    const cams = devices.filter((d) => d.kind === "videoinput");
+    if (cams.length <= 1) {
+        wrap.classList.add("hidden");
+        return;
+    }
+    wrap.classList.remove("hidden");
+
+    const currentId = cameraStream?.getVideoTracks?.()[0]?.getSettings?.().deviceId;
+    select.innerHTML = "";
+    for (const d of cams) {
+        const opt = document.createElement("option");
+        opt.value = d.deviceId;
+        opt.textContent = d.label || `Camera ${d.deviceId.slice(0, 8)}`;
+        if (d.deviceId === currentId) opt.selected = true;
+        select.appendChild(opt);
+    }
+}
+
+// Swap the active camera mid-session. The tracking loop and 20 Hz
+// send loop don't care — they read from the same <video> element,
+// which gets its srcObject reattached transparently.
+async function switchCamera(deviceId) {
+    if (!deviceId) return;
+    stopCamera();
+    await startCamera(deviceId);
+}
+
 function stopCamera() {
     if (cameraStream) {
         for (const t of cameraStream.getTracks()) t.stop();
@@ -1157,6 +1203,11 @@ document.addEventListener("DOMContentLoaded", () => {
         if (!isMaster()) sendNeutral();
     });
 
+    // Camera picker — switch to the selected device on change.
+    $("cameraSelect").addEventListener("change", (e) => {
+        switchCamera(e.target.value);
+    });
+
     // +Add mapping: appends a neutral rule to the channel.
     document.querySelectorAll(".btn-add[data-channel]").forEach((btn) => {
         btn.addEventListener("click", () => {

style.css

@@ -321,6 +321,23 @@ body {
     accent-color: var(--coral);
     cursor: pointer;
 }
+.camera-select {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+.camera-select select {
+    background: var(--card-light);
+    color: var(--text);
+    border: 1px solid var(--card-light);
+    border-radius: 6px;
+    padding: 4px 8px;
+    font-size: 0.85em;
+    max-width: 200px;
+    cursor: pointer;
+}
 
 /* ─── Sliders (head amplitudes + rule weights) ───────────── */
 .slider-row {