web: keep moq-watch muted until user gesture

This commit is contained in:
every.channel 2026-02-24 23:24:47 -08:00
parent ad81b9791a
commit 5a28a24294
No known key found for this signature in database
2 changed files with 4 additions and 19 deletions

View file

@ -162,6 +162,7 @@ function mountPlayer(relayUrl, name) {
watch.setAttribute("name", name); watch.setAttribute("name", name);
watch.setAttribute("path", name); watch.setAttribute("path", name);
watch.setAttribute("volume", "1"); watch.setAttribute("volume", "1");
watch.setAttribute("muted", "");
// Force WebTransport in-browser; websocket fallback has shown degraded // Force WebTransport in-browser; websocket fallback has shown degraded
// media behavior (especially audio) against public relay paths. // media behavior (especially audio) against public relay paths.
@ -199,22 +200,8 @@ function mountPlayer(relayUrl, name) {
}; };
document.addEventListener("pointerdown", unlockAudio, { once: true }); document.addEventListener("pointerdown", unlockAudio, { once: true });
video.addEventListener("pointerdown", unlockAudio, { once: true }); video.addEventListener("pointerdown", unlockAudio, { once: true });
setHint(`Live: subscribed to ${name} (tap video to unmute)`, "warn");
void video.play().catch(() => {}); void video.play().catch(() => {});
// If video-element rendering stalls, fall back to canvas rendering.
window.setTimeout(() => {
const stalled = video.readyState < 2 || (video.currentTime === 0 && !video.paused);
if (!stalled) return;
const canvas = document.createElement("canvas");
canvas.className = "canvas";
try {
video.remove();
watch.appendChild(canvas);
setHint(`Live: subscribed to ${name} (canvas fallback)`, "warn");
} catch (_) {
// Ignore fallback errors.
}
}, 9000);
bindPlayerSignals(watch, name); bindPlayerSignals(watch, name);
} }

View file

@ -9,18 +9,16 @@ Live browser playback currently prioritizes canvas rendering. Audio can fail on
In the web watcher mount path: In the web watcher mount path:
1. Render live playback with a `<video>` child in `<moq-watch>` first. 1. Render live playback with a `<video>` child in `<moq-watch>` first.
2. Start muted for autoplay compatibility, then unlock audio on first user gesture by: 2. Start muted at the watcher signal layer for autoplay compatibility, then unlock audio on first user gesture by:
- forcing backend `muted=false`, `volume=1`, - forcing backend `muted=false`, `volume=1`,
- toggling paused state to trigger resume, - toggling paused state to trigger resume,
- unmuting the `<video>` element. - unmuting the `<video>` element.
3. If `<video>` playback stalls during startup, automatically fall back to canvas rendering.
## Rationale ## Rationale
- Preserves the `<video>` UX target while handling browser autoplay constraints explicitly. - Preserves the `<video>` UX target while handling browser autoplay constraints explicitly.
- Avoids total playback failure by retaining a tested canvas fallback path.
- Keeps changes local to app wiring without forking upstream MoQ player internals. - Keeps changes local to app wiring without forking upstream MoQ player internals.
## Reversibility ## Reversibility
- Remove the fallback timer and unlock wiring to return to a fixed rendering mode. - Remove the unlock wiring (or return to canvas renderer) to restore prior behavior.