One tile per live broadcast announced under the prefix. Click a tile to make it active; only the
active tile plays sound, and the panel on the right shows its live stats. Everything is discovered
over a single connection.
How it works:
Each tile is a <moq-watch-ui> wrapping a
<moq-watch> Web Component .
A single connection discovers broadcasts via MoQ announcements
(connection.announced(prefix)) and we reconcile one
tile per live .hang broadcast, adding and removing them as publishers come and go.
No F5 needed; restart a publisher and its tile reconnects on its own.
The right panel reads everything reactively off the active tile's element:
const watch = document.querySelector("moq-watch");
watch.broadcast.out.catalog.subscribe((catalog) => { /* video/audio config */ });
watch.video.out.stats.subscribe((stats) => { /* decoded frames, bytes */ });
The metadata panel subscribes to a custom meta.json track carried within the
broadcast (see the publish demo ), advertised in the catalog's
metadata list and reconstructed from a snapshot plus merge-patch deltas via
@moq/json.
Don't want sound from a tile? It only downloads audio while active. Don't want video at all?
Remove the canvas and nothing is downloaded, decoded, or rendered.
This demo uses http so it's extra not secure: it insecurely fetches the certificate
hash and tells WebTransport to trust it. In production you'll need a real certificate (ex.
LetsEncrypt) and https.
Other demos: