moq-dev · kixelated · Dec 23, 2025 · Jan 2, 2026 · Jan 6, 2026 · Jan 7, 2026
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/bun.lock b/bun.lock
diff --git a/deno.lock b/deno.lock
diff --git a/js/hang-demo/src/index.html b/js/hang-demo/src/index.html
@@ -24,14 +24,16 @@
 
 		The broadcast path is overwritten by the ?path query parameter in index.ts.
 
-		TODO: There's a bug with Big Buck Bunny causing audio to stutter, so we need to increase the latency to 100ms.
-
 		NOTE: `reload` will detect when the broadcast goes offline/online and automatically reconnect.
 		TODO: Cloudflare doesn't support it yet (SUBSCRIBE_NAMESPACE), so make sure you remove it if you're using Cloudflare.
+
+		NOTE: You can use a <video> element instead of a <canvas> element to use the MSE backend.
+		This is not as well tested as has higher latency, but will support more devices.
 	-->
 	<hang-watch-ui>
-		<hang-watch id="watch" url="%VITE_RELAY_URL%" path="bbb" muted latency="100" reload>
+		<hang-watch id="watch" url="%VITE_RELAY_URL%" path="bbb" muted buffer="100" reload>
 			<canvas style="width: 100%; height: auto;"></canvas>
+			<!-- <video style="width: 100%; height: auto;" autoplay muted></video> -->
 		</hang-watch>
 	</hang-watch-ui>
 
@@ -40,6 +42,7 @@
 
 	<h3>Other demos:</h3>
 	<ul>
+		<li><a href="mse.html">Watch a broadcast (MSE).</a></li>
 		<li><a href="publish.html">Publish a broadcast.</a></li>
 		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
 		<li><a href="support.html">Check browser support.</a></li>
@@ -117,8 +120,8 @@ <h3>Tips:</h3>
 		</code></pre>
 	</p>
 	<p>
-		Using something more niche? There's also a <code
-			class="language-typescript">subscribe()</code> method to trigger a callback on change.
+		Using something more niche? There's also a <code class="language-typescript">subscribe()</code> method to
+		trigger a callback on change.
 
 	<pre><code class="language-typescript">
 const cleanup = hang.volume.subscribe((volume) => {

diff --git a/js/hang-demo/src/meet.html b/js/hang-demo/src/meet.html
@@ -36,8 +36,9 @@
 
 	<h3>Other demos:</h3>
 	<ul>
-		<li><a href="index.html">Watch a single broadcast.</a></li>
-		<li><a href="publish.html">Publish a single broadcast.</a></li>
+		<li><a href="index.html">Watch a broadcast (WebCodecs).</a></li>
+		<li><a href="mse.html">Watch a broadcast (MSE).</a></li>
+		<li><a href="publish.html">Publish a broadcast.</a></li>
 		<li><a href="support.html">Check browser support.</a></li>
 	</ul>
 

diff --git a/js/hang-demo/src/mse.html b/js/hang-demo/src/mse.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en" class="dark">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>MoQ Demo (MSE)</title>
+
+	<link rel="stylesheet" href="index.css">
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+</head>
+
+<body class="dark:bg-black p-4">
+	<!-- Show if this browser supports everything we need. -->
+	<hang-support mode="watch" show="partial"></hang-support>
+
+	<!--
+		This demo uses MSE (Media Source Extensions) instead of WebCodecs.
+		MSE has broader device support but higher latency compared to the WebCodecs canvas renderer.
+
+		The relay url is loaded from an environment as it contains a generated JWT authentication token.
+		Feel free to hard-code it if you have public access configured, like `url="https://cdn.moq.dev/anon"`
+		NOTE: `http` performs an insecure certificate check. You must use `https` in production.
+
+		The broadcast path is overwritten by the ?path query parameter in index.ts.
+
+		NOTE: `reload` will detect when the broadcast goes offline/online and automatically reconnect.
+		TODO: Cloudflare doesn't support it yet (SUBSCRIBE_NAMESPACE), so make sure you remove it if you're using Cloudflare.
+	-->
+	<hang-watch-ui>
+		<hang-watch id="watch" url="%VITE_RELAY_URL%" path="bbb" muted buffer="150" reload>
+			<video style="width: 100%; height: auto;" autoplay muted></video>
+		</hang-watch>
+	</hang-watch-ui>
+
+	<!-- Configure the relay URL and broadcast name. Auto-discovers available broadcasts. -->
+	<hang-config id="config" url="%VITE_RELAY_URL%" path="bbb"></hang-config>
+
+	<h3>Other demos:</h3>
+	<ul>
+		<li><a href="index.html">Watch a broadcast (WebCodecs).</a></li>
+		<li><a href="publish.html">Publish a broadcast.</a></li>
+		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
+		<li><a href="support.html">Check browser support.</a></li>
+	</ul>
+
+	<h3>Tips:</h3>
+	<p>
+		This demo uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API">MSE (Media
+			Source Extensions)</a>
+		via a <code>&lt;video&gt;</code> element instead of WebCodecs via <code>&lt;canvas&gt;</code>.
+		MSE has broader device support but higher latency.
+	</p>
+	<p>
+		To use MSE, provide a <code>&lt;video&gt;</code> element instead of a <code>&lt;canvas&gt;</code> element:
+	<pre><code class="language-html">&lt;hang-watch url="https://cdn.moq.dev/anon" path="bbb"&gt;
+	&lt;video style="max-width: 100%; height: auto;" autoplay muted&gt;&lt;/video&gt;
+&lt;/hang-watch&gt;</code></pre>
+	</p>
+</body>
+
+<script type="module" src="index.ts"></script>
+
+</html>
diff --git a/js/hang-demo/src/publish.html b/js/hang-demo/src/publish.html
@@ -36,6 +36,7 @@ <h3>Other demos:</h3>
 	<ul>
 		<li><a href="index.html?path=me" target="_blank" rel="noreferrer" id="watch">Watch your broadcast: <span
 					id="watch-name"></span></a></li>
+		<li><a href="mse.html">Watch a broadcast (MSE).</a></li>
 		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
 		<li><a href="support.html">Check browser support.</a></li>
 	</ul>

diff --git a/js/hang-demo/src/support.html b/js/hang-demo/src/support.html
@@ -16,7 +16,8 @@
 
 	<h3>Other demos:</h3>
 	<ul>
-		<li><a href="index.html">Watch a single broadcast.</a></li>
+		<li><a href="index.html">Watch a broadcast (WebCodecs).</a></li>
+		<li><a href="mse.html">Watch a broadcast (MSE).</a></li>
 		<li><a href="publish.html">Publish a broadcast.</a></li>
 		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
 	</ul>

diff --git a/js/hang-ui/src/shared/components/stats/providers/audio.ts b/js/hang-ui/src/shared/components/stats/providers/audio.ts
@@ -42,13 +42,11 @@ export class AudioProvider extends BaseProvider {
 			return;
 		}
 
-		const active = this.props.audio.source.active.peek();
+		const rendition = this.props.audio.rendition.peek();
+		const config = this.props.audio.config.peek();
+		const stats = this.props.audio.stats.peek();
 
-		const config = this.props.audio.source.config.peek();
-
-		const stats = this.props.audio.source.stats.peek();
-
-		if (!active || !config) {
+		if (!rendition || !config) {
 			this.context.setDisplayData("N/A");
 			return;
 		}

diff --git a/js/hang-ui/src/shared/components/stats/providers/buffer.ts b/js/hang-ui/src/shared/components/stats/providers/buffer.ts
@@ -1,5 +1,5 @@
 import type { Getter } from "@moq/signals";
-import type { BufferStatus, ProviderContext, SyncStatus } from "../types";
+import type { ProviderContext } from "../types";
 import { BaseProvider } from "./base";
 
 /**
@@ -22,21 +22,7 @@ export class BufferProvider extends BaseProvider {
 		}
 
 		this.signals.effect((effect) => {
-			const syncStatus = effect.get(video.source.syncStatus as Getter<SyncStatus | undefined>);
-			const bufferStatus = effect.get(video.source.bufferStatus as Getter<BufferStatus | undefined>);
-			const latency = effect.get(video.source.latency as Getter<number | undefined>);
-
-			const isLatencyValid = latency !== null && latency !== undefined && latency > 0;
-			const bufferPercentage =
-				syncStatus?.state === "wait" && syncStatus?.bufferDuration !== undefined && isLatencyValid
-					? Math.min(100, Math.round((syncStatus.bufferDuration / latency) * 100))
-					: bufferStatus?.state === "filled"
-						? 100
-						: 0;
-
-			const parts = [`${bufferPercentage}%`, isLatencyValid ? `${latency}ms` : "N/A"];
-
-			this.context?.setDisplayData(parts.join("\n"));
+			this.context?.setDisplayData("TODO");
 		});
 	}
 }
diff --git a/js/hang-ui/src/shared/components/stats/providers/video.ts b/js/hang-ui/src/shared/components/stats/providers/video.ts
@@ -46,8 +46,8 @@ export class VideoProvider extends BaseProvider {
 			return;
 		}
 
-		const display = this.props.video.source.display.peek();
-		const stats = this.props.video.source.stats.peek();
+		const catalog = this.props.video.catalog.peek();
+		const stats = this.props.video.stats.peek();
 		const now = performance.now();
 
 		// Calculate FPS from frame count delta and timestamp delta
@@ -90,7 +90,7 @@ export class VideoProvider extends BaseProvider {
 			this.previousWhen = now;
 		}
 
-		const { width, height } = display ?? {};
+		const { width, height } = catalog?.display ?? {};
 
 		const parts = [
 			width && height ? `${width}x${height}` : "N/A",

diff --git a/js/hang-ui/src/shared/components/stats/types.ts b/js/hang-ui/src/shared/components/stats/types.ts
@@ -1,5 +1,8 @@
 export type KnownStatsProviders = "network" | "video" | "audio" | "buffer";
 
+import type * as Hang from "@moq/hang";
+import type * as Moq from "@moq/lite";
+
 /**
  * Context passed to providers for updating display data
  */
@@ -15,84 +18,15 @@ export interface VideoResolution {
 	height: number;
 }
 
-/**
- * Stream sync status with buffer information
- */
-export interface SyncStatus {
-	state: "ready" | "wait";
-	bufferDuration?: number;
-}
-
-/**
- * Stream buffer fill status
- */
-export interface BufferStatus {
-	state: "empty" | "filled";
-}
-
-/**
- * Generic reactive signal interface for accessing stream data
- */
-export interface Signal<T> {
-	peek(): T | undefined;
-	changed?(callback: (value: T | undefined) => void): () => void;
-	subscribe?(callback: () => void): () => void;
-}
-
-/**
- * Audio stream statistics
- */
-export type AudioStats = {
-	bytesReceived: number;
-};
-
-/**
- * Audio stream source with reactive properties
- */
-export interface AudioSource {
-	source: {
-		active: Signal<string>;
-		config: Signal<AudioConfig>;
-		stats: Signal<AudioStats>;
-	};
-}
-
-/**
- * Audio stream configuration properties
- */
-export interface AudioConfig {
-	sampleRate: number;
-	numberOfChannels: number;
-	bitrate?: number;
-	codec: string;
-}
+// TODO Don't re-export these types?
+export type Signal<T> = Moq.Signals.Getter<T>;
+export type AudioStats = Hang.Watch.Audio.Stats;
+export type AudioSource = Hang.Watch.Audio.Backend;
+export type AudioConfig = Hang.Catalog.AudioConfig;
+export type VideoStats = Hang.Watch.Video.Stats;
 
-/**
- * Video stream statistics
- */
-export type VideoStats = {
-	frameCount: number;
-	timestamp: number;
-	bytesReceived: number;
+// TODO use Hang.Watch.Backend instead?
+export type ProviderProps = {
+	audio: Hang.Watch.Audio.Backend;
+	video: Hang.Watch.Video.Backend;
 };
-
-/**
- * Video stream source with reactive properties
- */
-export interface VideoSource {
-	source: {
-		display: Signal<VideoResolution>;
-		syncStatus: Signal<SyncStatus>;
-		bufferStatus: Signal<BufferStatus>;
-		latency: Signal<number>;
-		stats: Signal<VideoStats>;
-	};
-}
-
-/**
- * Props passed to metric providers containing stream sources
- */
-export interface ProviderProps {
-	audio?: AudioSource;
-	video?: VideoSource;
-}