web: use video element and force live audio on

apps/web/app.js

@@ -169,12 +169,27 @@ function mountPlayer(relayUrl, name) {
     watch.connection.websocket = { enabled: false };
   }
 
-  // A canvas enables video rendering. Without it, only audio is played.
+  // Use a media element for live playback so browser audio controls/policies apply naturally.
-  const canvas = document.createElement("canvas");
+  const video = document.createElement("video");
-  canvas.className = "canvas";
+  video.className = "archiveVideo";
-  watch.appendChild(canvas);
+  video.controls = true;
+  video.autoplay = true;
+  video.muted = false;
+  video.playsInline = true;
+  watch.appendChild(video);
 
   mount.appendChild(watch);
+  const forceAudioOn = () => {
+    try {
+      watch.backend?.audio?.muted?.set?.(false);
+      watch.backend?.audio?.volume?.set?.(1);
+    } catch (_) {
+      // Best effort only.
+    }
+  };
+  forceAudioOn();
+  window.setTimeout(forceAudioOn, 1000);
+  window.setTimeout(forceAudioOn, 4000);
   bindPlayerSignals(watch, name);
 }
 

evolution/proposals/ECP-0076-webtransport-only-web-watcher.md

@@ -10,7 +10,7 @@ In `apps/web/app.js`, configure each `<moq-watch>` instance to disable WebSocket
 
 - `watch.connection.websocket = { enabled: false }`
 
-Also set default watcher volume to full (`volume="1"`) to avoid low-volume false negatives during validation.
+Also set default watcher volume to full (`volume="1"`) and mount live playback on a `<video>` element (with controls) inside `<moq-watch>` so browser audio policies and controls apply predictably. On mount, force audio signals to `muted=false` and `volume=1`.
 
 ## Rationale