From cbe79f9c6d8209ccf994bb106ce2632c7dcc4fcb Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Thu, 5 Mar 2026 16:36:42 -0800
Subject: [PATCH 1/4] feat(html): add MoQ live streaming support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add MoQ (Media over QUIC) playback via @moq/watch with two backends:
- `<moq-video>` — MSE backend using native <video> element
- `<moq-canvas>` — WebCodecs backend rendering to <canvas>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/core/tsdown.config.ts               |   1 +
 packages/html/package.json                   |   2 +
 packages/html/src/define/media/moq-canvas.ts |  14 +
 packages/html/src/define/media/moq-video.ts  |  14 +
 packages/html/src/media/moq-canvas/index.ts  | 332 +++++++++++++++++++
 packages/html/src/media/moq-video/index.ts   | 146 ++++++++
 packages/html/src/store/container-mixin.ts   |   4 +-
 pnpm-lock.yaml                               | 215 +++++++-----
 8 files changed, 648 insertions(+), 80 deletions(-)
 create mode 100644 packages/html/src/define/media/moq-canvas.ts
 create mode 100644 packages/html/src/define/media/moq-video.ts
 create mode 100644 packages/html/src/media/moq-canvas/index.ts
 create mode 100644 packages/html/src/media/moq-video/index.ts

diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts
index 9fdf55bfb..1e200a092 100644
--- a/packages/core/tsdown.config.ts
+++ b/packages/core/tsdown.config.ts
@@ -10,6 +10,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
     index: './src/core/index.ts',
     dom: './src/dom/index.ts',
     'dom/media/hls': './src/dom/media/hls.ts',
+
     'dom/media/custom-media-element': './src/dom/media/custom-media-element.ts',
   },
   platform: 'neutral',
diff --git a/packages/html/package.json b/packages/html/package.json
index 0012ec6e4..fc5135dcb 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -87,6 +87,8 @@
     "clean": "rm -rf dist types"
   },
   "dependencies": {
+    "@moq/lite": "^0.1.5",
+    "@moq/watch": "^0.2.2",
     "@videojs/core": "workspace:*",
     "@videojs/element": "workspace:*",
     "@videojs/store": "workspace:*",
diff --git a/packages/html/src/define/media/moq-canvas.ts b/packages/html/src/define/media/moq-canvas.ts
new file mode 100644
index 000000000..1a236dcef
--- /dev/null
+++ b/packages/html/src/define/media/moq-canvas.ts
@@ -0,0 +1,14 @@
+import { MoqCanvas } from '../../media/moq-canvas';
+import { safeDefine } from '../safe-define';
+
+export class MoqCanvasElement extends MoqCanvas {
+  static readonly tagName = 'moq-canvas';
+}
+
+safeDefine(MoqCanvasElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MoqCanvasElement.tagName]: MoqCanvasElement;
+  }
+}
diff --git a/packages/html/src/define/media/moq-video.ts b/packages/html/src/define/media/moq-video.ts
new file mode 100644
index 000000000..e8424a6f6
--- /dev/null
+++ b/packages/html/src/define/media/moq-video.ts
@@ -0,0 +1,14 @@
+import { MoqVideo } from '../../media/moq-video';
+import { safeDefine } from '../safe-define';
+
+export class MoqVideoElement extends MoqVideo {
+  static readonly tagName = 'moq-video';
+}
+
+safeDefine(MoqVideoElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [MoqVideoElement.tagName]: MoqVideoElement;
+  }
+}
diff --git a/packages/html/src/media/moq-canvas/index.ts b/packages/html/src/media/moq-canvas/index.ts
new file mode 100644
index 000000000..22cd8c2b4
--- /dev/null
+++ b/packages/html/src/media/moq-canvas/index.ts
@@ -0,0 +1,332 @@
+import * as Moq from '@moq/lite';
+import * as Watch from '@moq/watch';
+
+/** Shim that wraps MoQ's BufferedRanges array as a TimeRanges-like object. */
+function createTimeRanges(ranges: Array<{ start: number; end: number }>): TimeRanges {
+  return {
+    get length() {
+      return ranges.length;
+    },
+    start(index: number) {
+      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return ranges[index]!.start / 1000;
+    },
+    end(index: number) {
+      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return ranges[index]!.end / 1000;
+    },
+  };
+}
+
+const EMPTY_TIME_RANGES = createTimeRanges([]);
+
+// Static template — no dynamic content.
+const TEMPLATE = document.createElement('template');
+TEMPLATE.innerHTML = /*html*/ `
+  <style>
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+    canvas {
+      max-width: 100%;
+      max-height: 100%;
+      min-width: 100%;
+      min-height: 100%;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, 50% 50%);
+    }
+  </style>
+  <canvas part="canvas"></canvas>
+`;
+
+// Close everything when this element is garbage collected.
+// There's no destructor for web components so this is the best we can do.
+const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
+
+/**
+ * WebCodecs-backed MoQ media element.
+ *
+ * Creates a `<canvas>` in shadow DOM and uses the MoQ JS API to manage
+ * connection, broadcast, and decoding. Synthesizes the HTMLMediaElement
+ * interface from MoQ signals so Video.js can treat it as a media element.
+ */
+export class MoqCanvas extends HTMLElement {
+  static readonly observedAttributes = ['src', 'name', 'muted', 'volume', 'autoplay'] as const;
+
+  // A MoQ connection that is automatically re-established on drop.
+  #connection = new Moq.Connection.Reload({
+    // Immediately start connecting once a URL is set, even if not in the DOM.
+    enabled: true,
+  });
+
+  // The MoQ broadcast being fetched.
+  #broadcast = new Watch.Broadcast({
+    connection: this.#connection.established,
+    // Start fetching the catalog even if not in the DOM.
+    enabled: true,
+    // Default to an empty namespace, so the player can work with just a URL.
+    name: Moq.Path.empty(),
+  });
+
+  // NOTE: We're using the advanced WebCodecs backend here to improve tree-shaking.
+  // This is not really required, but it's a good example of the customizability of the MoQ JS API.
+  // ex. A moq-audio element would omit the video stuff.
+
+  // Used to synchronize audio and video playback.
+  #sync = new Watch.Sync();
+
+  // Create a source, decoder, and renderer for video.
+  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
+  #videoDecoder = new Watch.Video.Decoder(this.#videoSource);
+  #videoRenderer: Watch.Video.Renderer;
+
+  // Create a source, decoder, and emitter for audio.
+  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
+  #audioDecoder = new Watch.Audio.Decoder(this.#audioSource);
+  #audioEmitter = new Watch.Audio.Emitter(this.#audioDecoder, { paused: false });
+
+  #canvas: HTMLCanvasElement;
+
+  #signals = new Watch.Signals.Effect();
+
+  constructor() {
+    super();
+
+    cleanup.register(this, this.#signals);
+    this.#signals.cleanup(() => {
+      this.#connection.close();
+      this.#broadcast.close();
+      this.#sync.close();
+      this.#videoSource.close();
+      this.#videoDecoder.close();
+      this.#audioSource.close();
+      this.#audioDecoder.close();
+      this.#audioEmitter.close();
+      this.#videoRenderer.close();
+    });
+
+    // Mark as media element for container discovery.
+    this.setAttribute('data-media', '');
+
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(TEMPLATE.content.cloneNode(true));
+
+    this.#canvas = shadow.querySelector('canvas')!;
+    this.#videoRenderer = new Watch.Video.Renderer(this.#videoDecoder, {
+      canvas: this.#canvas,
+      // TODO Based on autoplay?
+      paused: false,
+    });
+
+    this.#signals.subscribe(this.#broadcast.status, (status) => {
+      if (status === 'live') {
+        this.dispatchEvent(new Event('loadedmetadata'));
+        this.dispatchEvent(new Event('loadeddata'));
+        this.dispatchEvent(new Event('canplay'));
+        this.dispatchEvent(new Event('canplaythrough'));
+      }
+    });
+
+    this.#signals.subscribe(this.#videoRenderer.paused, (paused) => {
+      this.dispatchEvent(new Event(paused ? 'pause' : 'play'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.timestamp, () => {
+      this.dispatchEvent(new Event('timeupdate'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.stalled, (stalled) => {
+      this.dispatchEvent(new Event(stalled ? 'waiting' : 'playing'));
+    });
+
+    this.#signals.subscribe(this.#audioEmitter.volume, () => {
+      this.dispatchEvent(new Event('volumechange'));
+    });
+
+    this.#signals.subscribe(this.#audioEmitter.muted, () => {
+      this.dispatchEvent(new Event('volumechange'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.buffered, () => {
+      this.dispatchEvent(new Event('progress'));
+    });
+  }
+
+  connectedCallback(): void {
+    this.dispatchEvent(new Event('loadstart'));
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue === newValue) return;
+
+    if (attrName === 'src') {
+      this.src = newValue ?? '';
+    } else if (attrName === 'name') {
+      this.#broadcast.name.set(newValue ? Moq.Path.from(newValue) : Moq.Path.empty());
+    } else if (attrName === 'muted') {
+      this.#audioEmitter.muted.set(newValue !== null);
+    } else if (attrName === 'volume') {
+      this.#audioEmitter.volume.set(newValue ? Number.parseFloat(newValue) : 1);
+    } else if (attrName === 'autoplay') {
+      if (newValue !== null) {
+        this.play();
+      }
+    }
+  }
+
+  // --- HTMLMediaElement-like interface ---
+
+  get src(): string {
+    return this.#connection.url.peek()?.toString() ?? '';
+  }
+
+  set src(value: string) {
+    this.#connection.url.set(value ? new URL(value) : undefined);
+    if (value) this.dispatchEvent(new Event('loadstart'));
+  }
+
+  get currentSrc(): string {
+    return this.src;
+  }
+
+  get paused(): boolean {
+    return this.#videoRenderer.paused.peek();
+  }
+
+  play(): Promise<void> {
+    this.#videoRenderer.paused.set(false);
+    this.#audioEmitter.paused.set(false);
+    return Promise.resolve();
+  }
+
+  pause(): void {
+    this.#videoRenderer.paused.set(true);
+    this.#audioEmitter.paused.set(true);
+  }
+
+  load(): void {
+    // No-op — MoQ manages the connection lifecycle.
+  }
+
+  get volume(): number {
+    return this.#audioEmitter.volume.peek();
+  }
+
+  set volume(value: number) {
+    this.#audioEmitter.volume.set(value);
+  }
+
+  get muted(): boolean {
+    return this.#audioEmitter.muted.peek();
+  }
+
+  set muted(value: boolean) {
+    this.#audioEmitter.muted.set(value);
+  }
+
+  get currentTime(): number {
+    return (this.#videoDecoder.timestamp.peek() ?? 0) / 1000;
+  }
+
+  set currentTime(_value: number) {
+    // Live-only — seeking is not supported.
+  }
+
+  get duration(): number {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  get readyState(): number {
+    const status = this.#broadcast.status.peek();
+    if (status === 'live') {
+      return this.#videoDecoder.stalled.peek() ? 2 : 4;
+    }
+    if (status === 'loading') return 1;
+    return 0;
+  }
+
+  get networkState(): number {
+    const status = this.#broadcast.status.peek();
+    if (status === 'live' || status === 'loading') return 2;
+    return 0;
+  }
+
+  get buffered(): TimeRanges {
+    const ranges = this.#videoDecoder.buffered.peek();
+    if (!ranges.length) return EMPTY_TIME_RANGES;
+    return createTimeRanges(ranges);
+  }
+
+  get seekable(): TimeRanges {
+    return EMPTY_TIME_RANGES;
+  }
+
+  get played(): TimeRanges {
+    return EMPTY_TIME_RANGES;
+  }
+
+  get ended(): boolean {
+    return false;
+  }
+
+  get playbackRate(): number {
+    return 1;
+  }
+
+  set playbackRate(_value: number) {}
+
+  get defaultPlaybackRate(): number {
+    return 1;
+  }
+
+  set defaultPlaybackRate(_value: number) {}
+
+  get defaultMuted(): boolean {
+    return this.hasAttribute('muted');
+  }
+
+  set defaultMuted(value: boolean) {
+    this.toggleAttribute('muted', value);
+  }
+
+  get autoplay(): boolean {
+    return this.hasAttribute('autoplay');
+  }
+
+  set autoplay(value: boolean) {
+    this.toggleAttribute('autoplay', value);
+  }
+
+  get loop(): boolean {
+    return false;
+  }
+
+  set loop(_value: boolean) {}
+
+  get controls(): boolean {
+    return false;
+  }
+
+  get preload(): string {
+    return 'none';
+  }
+
+  get error(): MediaError | null {
+    return null;
+  }
+
+  get videoWidth(): number {
+    return this.#canvas.width;
+  }
+
+  get videoHeight(): number {
+    return this.#canvas.height;
+  }
+
+  get poster(): string {
+    return '';
+  }
+
+  set poster(_value: string) {}
+}
diff --git a/packages/html/src/media/moq-video/index.ts b/packages/html/src/media/moq-video/index.ts
new file mode 100644
index 000000000..bb9a56b9a
--- /dev/null
+++ b/packages/html/src/media/moq-video/index.ts
@@ -0,0 +1,146 @@
+import * as Moq from '@moq/lite';
+import * as Watch from '@moq/watch';
+
+import { CustomMediaMixin } from '@videojs/core/dom/media/custom-media-element';
+
+const CustomVideo = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' });
+
+// Close everything when this element is garbage collected.
+// There's no destructor for web components so this is the best we can do.
+const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
+
+/**
+ * MSE-backed MoQ media element.
+ *
+ * Wraps a native `<video>` element via CustomMediaMixin and uses the MoQ JS API
+ * to feed media segments through Media Source Extensions. Properties like
+ * `readyState` and `buffered` fall through to the native element.
+ */
+export class MoqVideo extends CustomVideo {
+  static getTemplateHTML(attrs: Record<string, string>): string {
+    const { src, name, ...rest } = attrs;
+    // biome-ignore lint/complexity/noThisInStatic: intentional use of super
+    return super.getTemplateHTML(rest);
+  }
+
+  static get observedAttributes(): string[] {
+    return [...CustomVideo.observedAttributes, 'name'];
+  }
+
+  // A MoQ connection that is automatically re-established on drop.
+  #connection = new Moq.Connection.Reload({
+    // Immediately start connecting once a URL is set, even if not in the DOM.
+    enabled: true,
+  });
+
+  // The MoQ broadcast being fetched.
+  #broadcast = new Watch.Broadcast({
+    // The connection to the MoQ server.
+    connection: this.#connection.established,
+    // Start fetching the catalog even if not in the DOM.
+    enabled: true,
+    // Default to an empty namespace, so the player can work with just a URL.
+    name: Moq.Path.empty(),
+  });
+
+  // We use the advanced JS API here to improve tree-shaking.
+  // ex. A moq-audio element would omit the video stuff.
+
+  // Used to synchronize audio and video playback.
+  #sync = new Watch.Sync();
+
+  // Responsible for combining the audio and video sourceBuffers.
+  // TODO: This currently doesn't support adding/removing tracks after the fact.
+  #muxer = new Watch.Mse.Muxer(this.#sync, { paused: false });
+
+  // Create a source for the video stream.
+  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
+  #videoMse = new Watch.Video.Mse(this.#muxer, this.#videoSource);
+
+  // Create a source for the audio stream.
+  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
+  #audioMse = new Watch.Audio.Mse(this.#muxer, this.#audioSource);
+
+  #signals = new Watch.Signals.Effect();
+
+  constructor() {
+    super();
+
+    cleanup.register(this, this.#signals);
+    this.#signals.cleanup(() => {
+      this.#connection.close();
+      this.#broadcast.close();
+      this.#sync.close();
+      this.#muxer.close();
+      this.#videoSource.close();
+      this.#videoMse.close();
+      this.#audioSource.close();
+      this.#audioMse.close();
+    });
+
+    this.#muxer.element.set(this.nativeEl as HTMLMediaElement);
+  }
+
+  get(prop: string): any {
+    switch (prop) {
+      case 'src':
+        return this.#connection.url.peek()?.toString() ?? '';
+      case 'name':
+        return this.#broadcast.name.peek()?.toString() ?? '';
+      case 'paused':
+        return this.#muxer.paused.peek();
+      case 'volume':
+        return this.#audioMse.volume.peek();
+      case 'muted':
+        return this.#audioMse.muted.peek();
+      case 'currentTime':
+        return this.#videoMse.timestamp.peek() / 1000;
+      case 'duration':
+        return Number.POSITIVE_INFINITY;
+      default:
+        return super.get(prop);
+    }
+  }
+
+  set(prop: string, val: any): void {
+    switch (prop) {
+      case 'src':
+        this.#connection.url.set(val ? new URL(val) : undefined);
+        break;
+      case 'name':
+        this.#broadcast.name.set(val ? Moq.Path.from(val) : Moq.Path.empty());
+        break;
+      case 'volume':
+        this.#audioMse.volume.set(val);
+        break;
+      case 'muted':
+        this.#audioMse.muted.set(val);
+        break;
+      default:
+        super.set(prop, val);
+    }
+  }
+
+  call(prop: string, ...args: any[]): any {
+    switch (prop) {
+      case 'play':
+        this.#muxer.paused.set(false);
+        return Promise.resolve();
+      case 'pause':
+        this.#muxer.paused.set(true);
+        return;
+      default:
+        return super.call(prop, ...args);
+    }
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (attrName === 'src' && oldValue !== newValue) {
+      this.src = newValue ?? '';
+    } else if (attrName === 'name' && oldValue !== newValue) {
+      this.set('name', newValue ?? '');
+    } else if (attrName !== 'src' && attrName !== 'name') {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+    }
+  }
+}
diff --git a/packages/html/src/store/container-mixin.ts b/packages/html/src/store/container-mixin.ts
index f26eeff68..7dacff7d1 100644
--- a/packages/html/src/store/container-mixin.ts
+++ b/packages/html/src/store/container-mixin.ts
@@ -67,7 +67,7 @@ export function createContainerMixin<Store extends PlayerStore>(context: PlayerC
         const store = this.#contextStore ?? this.store;
         if (!store) return;
 
-        const media = this.querySelector<HTMLMediaElement>('video, audio');
+        const media = this.querySelector<HTMLMediaElement>('video, audio, [data-media]');
 
         if (!media) {
           this.#detach();
@@ -95,7 +95,7 @@ export function createContainerMixin<Store extends PlayerStore>(context: PlayerC
 }
 
 function isMediaNode(node: Node): boolean {
-  return node instanceof HTMLMediaElement;
+  return node instanceof HTMLMediaElement || (node instanceof HTMLElement && node.hasAttribute('data-media'));
 }
 
 function hasMediaNode(record: MutationRecord): boolean {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fb3b31fa..63b53be3e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -214,6 +214,12 @@ importers:
 
   packages/html:
     dependencies:
+      '@moq/lite':
+        specifier: ^0.1.5
+        version: 0.1.5(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)
+      '@moq/watch':
+        specifier: ^0.2.2
+        version: 0.2.2(@svta/cml-utils@1.4.0)(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)
       '@videojs/core':
         specifier: workspace:*
         version: link:../core
@@ -495,7 +501,7 @@ importers:
         version: 10.32.1(astro@5.16.5(@netlify/blobs@10.5.0)(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.31.1)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))
       '@tailwindcss/vite':
         specifier: ^4.2.0
-        version: 4.2.1(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.2.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@videojs/html':
         specifier: workspace:*
         version: link:../packages/html
@@ -595,7 +601,7 @@ importers:
         version: 5.0.6
       '@vitejs/plugin-react':
         specifier: ^5.1.4
-        version: 5.1.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 5.1.4(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@vitest/coverage-v8':
         specifier: ^3.2.4
         version: 3.2.4(vitest@3.2.4)
@@ -1822,12 +1828,21 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@kixelated/libavjs-webcodecs-polyfill@0.5.5':
+    resolution: {integrity: sha512-Q1zgnTMMQ2F7IE9ylx3C1XzVbg5vYN18jiDINO5U3kNPBOHdYuUlJsMhtBoqr1M6ocLtoiqdHmLs7tHFgrw5KA==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@libav.js/types@6.8.8':
+    resolution: {integrity: sha512-Lbik/0Q3x2R8cI7mOtRgt+nUWLqGXh7UinMndmpdXSDY4YEjYyVUDsq6fxkuriL78+LCYx8frZIN1r+oDsvYCQ==}
+
+  '@libav.js/variant-opus-af@6.8.8':
+    resolution: {integrity: sha512-8KBQyA8n5goN7lyctOaPxpcx7dapOgqKh8dWW/NAcl87AgM/WoUGSex3fFc46oCtTHYrUKEm1OmZUrtkt3Q56A==}
+
   '@lit-labs/ssr-dom-shim@1.5.0':
     resolution: {integrity: sha512-HLomZXMmrCFHSRKESF5vklAKsDY7/fsT/ZhqCu3V0UoW/Qbv8wxmO4W9bx4KnCCF2Zak4yuk+AGraK/bPmI4kA==}
 
@@ -1848,6 +1863,37 @@ packages:
   '@mixmark-io/domino@2.2.0':
     resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
 
+  '@moq/hang@0.2.0':
+    resolution: {integrity: sha512-uW5hGVWGPY7uFD3w3kt1CNafbB5bge4O5/vZm756SgejihHkmqcFjSUfgabXxIJCXMr/1qtDXOVwIUs8QILZng==}
+
+  '@moq/lite@0.1.5':
+    resolution: {integrity: sha512-lbMBm7Sm4J7jQ9uWI+ITNGk6kqVNRL1pUEFArXNBUS2OEgHUUosG+DWsuRpiun2OWLiRi5nfx7bmR/3b5hH+ww==}
+    peerDependencies:
+      zod: ^4.1.0
+
+  '@moq/signals@0.1.3':
+    resolution: {integrity: sha512-tPuLnC6INqydJEore/FJPg+9rdzEb6BsUvr3P7gMErEpdHjdeQbhpn7ramrN2YmOhaACkY9Dk8U3IudzOxSF/A==}
+    peerDependencies:
+      '@types/react': ^19.1.8
+      react: ^19.0.0
+      solid-js: ^1.9.7
+    peerDependenciesMeta:
+      react:
+        optional: true
+      solid-js:
+        optional: true
+
+  '@moq/ui-core@0.1.0':
+    resolution: {integrity: sha512-DJNBpUNQDyh7Tou324fbJ5/pT08UPghH3OxcVdLEo9IQeX//8NiEzJwcX7iuacR32nzgdiBThIbIpeFa60U3/g==}
+    peerDependencies:
+      '@moq/signals': ^0.1.2
+
+  '@moq/watch@0.2.2':
+    resolution: {integrity: sha512-UBtBdQ6+7L70jgDjQ0f2Ia9Vi/bg9kyeWfxMk3owkJNNidHT55qQLu+qMfOENlYKJWaR6T37sNHUEmPKICDUog==}
+
+  '@moq/web-transport-ws@0.1.2':
+    resolution: {integrity: sha512-mYha+AkLNPT3uOGnTA5YWjpxc9LO/yriFSoWzKkR0zN3UMZb9RXbsD8Gbhg1pJZod6QD4tevHoOWTBADYN7yAQ==}
+
   '@mux/mux-node@12.8.1':
     resolution: {integrity: sha512-ey2eKn7iwVrjRVJfB/yF9HPDVpEl+fZV00ydx0kc9/BMs+wjBi0KgU0HMqUjTgEoyMUTlHmJ3U3BfDvreyg5iQ==}
 
@@ -2950,6 +2996,16 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
 
+  '@svta/cml-iso-bmff@1.0.1':
+    resolution: {integrity: sha512-MOhATJYQ6cVrIcoY3nj8p/vGYDpG3wjQIIhBPHNt9yjFijdwFdBNqdZbCXv3aFhRjdx5Saca5TkgNJusKhnI/w==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.4.0
+
+  '@svta/cml-utils@1.4.0':
+    resolution: {integrity: sha512-vNtHtv/z+9I9ysxFwNrgwxic1oceVPr8TpcpV/NA1l8Gy4phynwtOppkCIBB+PmoyKDcqE4lO85g+lfsuSTBBA==}
+    engines: {node: '>=20'}
+
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
@@ -3339,6 +3395,9 @@ packages:
     resolution: {integrity: sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/global-this@0.4.4':
+    resolution: {integrity: sha512-mHkm6FvepJECMNthFuIgpAEFmPOk71UyXuIxYfjytvFTnSDBIz7jmViO+LfHI/AjrazWije0PnSP3+/NlwzqtA==}
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -3626,6 +3685,9 @@ packages:
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
+  async-mutex@0.5.0:
+    resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
+
   async-sema@3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
@@ -7133,46 +7195,6 @@ packages:
       yaml:
         optional: true
 
-  vite@7.2.7:
-    resolution: {integrity: sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
-      jiti: '>=1.21.0'
-      less: ^4.0.0
-      lightningcss: ^1.21.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
   vitefu@1.1.1:
     resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
     peerDependencies:
@@ -8674,6 +8696,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kixelated/libavjs-webcodecs-polyfill@0.5.5':
+    dependencies:
+      '@libav.js/types': 6.8.8
+      '@ungap/global-this': 0.4.4
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -8682,6 +8709,10 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@libav.js/types@6.8.8': {}
+
+  '@libav.js/variant-opus-af@6.8.8': {}
+
   '@lit-labs/ssr-dom-shim@1.5.0': {}
 
   '@lit/context@1.1.6':
@@ -8737,6 +8768,57 @@ snapshots:
 
   '@mixmark-io/domino@2.2.0': {}
 
+  '@moq/hang@0.2.0(@svta/cml-utils@1.4.0)(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@kixelated/libavjs-webcodecs-polyfill': 0.5.5
+      '@libav.js/variant-opus-af': 6.8.8
+      '@moq/lite': 0.1.5(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)
+      '@moq/signals': 0.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@svta/cml-iso-bmff': 1.0.1(@svta/cml-utils@1.4.0)
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - '@svta/cml-utils'
+      - '@types/react'
+      - react
+      - solid-js
+
+  '@moq/lite@0.1.5(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)':
+    dependencies:
+      '@moq/signals': 0.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@moq/web-transport-ws': 0.1.2
+      async-mutex: 0.5.0
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - react
+      - solid-js
+
+  '@moq/signals@0.1.3(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@types/react': 19.2.7
+      dequal: 2.0.3
+    optionalDependencies:
+      react: 19.2.3
+
+  '@moq/ui-core@0.1.0(@moq/signals@0.1.3(@types/react@19.2.7)(react@19.2.3))':
+    dependencies:
+      '@moq/signals': 0.1.3(@types/react@19.2.7)(react@19.2.3)
+
+  '@moq/watch@0.2.2(@svta/cml-utils@1.4.0)(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)':
+    dependencies:
+      '@moq/hang': 0.2.0(@svta/cml-utils@1.4.0)(@types/react@19.2.7)(react@19.2.3)
+      '@moq/lite': 0.1.5(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)
+      '@moq/signals': 0.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@moq/ui-core': 0.1.0(@moq/signals@0.1.3(@types/react@19.2.7)(react@19.2.3))
+    transitivePeerDependencies:
+      - '@svta/cml-utils'
+      - '@types/react'
+      - react
+      - solid-js
+      - zod
+
+  '@moq/web-transport-ws@0.1.2': {}
+
   '@mux/mux-node@12.8.1':
     dependencies:
       '@types/node': 18.19.130
@@ -10035,6 +10117,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@svta/cml-iso-bmff@1.0.1(@svta/cml-utils@1.4.0)':
+    dependencies:
+      '@svta/cml-utils': 1.4.0
+
+  '@svta/cml-utils@1.4.0': {}
+
   '@swc/helpers@0.5.17':
     dependencies:
       tslib: 2.8.1
@@ -10178,13 +10266,6 @@ snapshots:
       tailwindcss: 4.2.1
       vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@tailwindcss/vite@4.2.1(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
-    dependencies:
-      '@tailwindcss/node': 4.2.1
-      '@tailwindcss/oxide': 4.2.1
-      tailwindcss: 4.2.1
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
-
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -10424,6 +10505,8 @@ snapshots:
       '@typescript-eslint/types': 8.54.0
       eslint-visitor-keys: 4.2.1
 
+  '@ungap/global-this@0.4.4': {}
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@vercel/functions@2.2.13':
@@ -10499,18 +10582,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@5.1.4(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
-      '@rolldown/pluginutils': 1.0.0-rc.3
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.18.0
-      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitest/coverage-v8@3.2.4(vitest@3.2.4)':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -10575,7 +10646,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -10931,6 +11002,10 @@ snapshots:
       - uploadthing
       - yaml
 
+  async-mutex@0.5.0:
+    dependencies:
+      tslib: 2.8.1
+
   async-sema@3.1.1: {}
 
   async@3.2.6: {}
@@ -14832,22 +14907,6 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2):
-    dependencies:
-      esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.53.3
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 22.19.3
-      fsevents: 2.3.3
-      jiti: 2.6.1
-      lightningcss: 1.31.1
-      tsx: 4.21.0
-      yaml: 2.8.2
-
   vitefu@1.1.1(vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)):
     optionalDependencies:
       vite: 6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)

From dd3db30e7f1eced34ce949f4cde713473291791c Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Fri, 6 Mar 2026 17:16:38 -0800
Subject: [PATCH 2/4] refactor(core): extract MoQ media logic to core package

Move MoQ streaming logic from html to core following the HLS pattern:
- MoqMseDelegateBase (MediaDelegate) with MSE compositions for HTML/React
- MoqCanvas (WebCodecs) moved to core with SSR-safe document access
- HTML wrappers simplified to thin extensions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/core/package.json                  |   1 +
 packages/core/src/dom/media/moq/canvas.ts   | 315 ++++++++++++++++++
 packages/core/src/dom/media/moq/index.ts    |   2 +
 packages/core/src/dom/media/moq/mse.ts      | 126 ++++++++
 packages/core/tsdown.config.ts              |   1 +
 packages/html/src/media/moq-canvas/index.ts | 334 +-------------------
 packages/html/src/media/moq-video/index.ts  | 139 +-------
 pnpm-lock.yaml                              |   3 +
 8 files changed, 464 insertions(+), 457 deletions(-)
 create mode 100644 packages/core/src/dom/media/moq/canvas.ts
 create mode 100644 packages/core/src/dom/media/moq/index.ts
 create mode 100644 packages/core/src/dom/media/moq/mse.ts

diff --git a/packages/core/package.json b/packages/core/package.json
index eaf91a79c..8e024709a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -49,6 +49,7 @@
   "dependencies": {
     "@videojs/store": "workspace:*",
     "@videojs/utils": "workspace:*",
+    "@moq/watch": "^0.2.2",
     "hls.js": "^1.6.7"
   },
   "devDependencies": {
diff --git a/packages/core/src/dom/media/moq/canvas.ts b/packages/core/src/dom/media/moq/canvas.ts
new file mode 100644
index 000000000..c8e33f533
--- /dev/null
+++ b/packages/core/src/dom/media/moq/canvas.ts
@@ -0,0 +1,315 @@
+import * as Watch from '@moq/watch';
+
+const Moq = Watch.Lite;
+
+function createTimeRanges(ranges: Array<{ start: number; end: number }>): TimeRanges {
+  return {
+    get length() {
+      return ranges.length;
+    },
+    start(index: number) {
+      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return ranges[index]!.start / 1000;
+    },
+    end(index: number) {
+      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return ranges[index]!.end / 1000;
+    },
+  };
+}
+
+const EMPTY_TIME_RANGES = createTimeRanges([]);
+
+const TEMPLATE = globalThis.document?.createElement('template');
+if (TEMPLATE) {
+  TEMPLATE.innerHTML = /*html*/ `
+    <style>
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+      canvas {
+        max-width: 100%;
+        max-height: 100%;
+        min-width: 100%;
+        min-height: 100%;
+        object-fit: var(--media-object-fit, contain);
+        object-position: var(--media-object-position, 50% 50%);
+      }
+    </style>
+    <canvas part="canvas"></canvas>
+  `;
+}
+
+const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
+
+/**
+ * WebCodecs-backed MoQ media element.
+ *
+ * Creates a `<canvas>` in shadow DOM and uses the MoQ JS API to manage
+ * connection, broadcast, and decoding. Synthesizes the HTMLMediaElement
+ * interface from MoQ signals so Video.js can treat it as a media element.
+ */
+export class MoqCanvas extends (globalThis.HTMLElement ?? class {}) {
+  static readonly observedAttributes = ['src', 'name', 'muted', 'volume', 'autoplay'] as const;
+
+  #connection = new Moq.Connection.Reload({
+    enabled: true,
+  });
+
+  #broadcast = new Watch.Broadcast({
+    connection: this.#connection.established,
+    enabled: true,
+    name: Moq.Path.empty(),
+  });
+
+  #sync = new Watch.Sync();
+
+  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
+  #videoDecoder = new Watch.Video.Decoder(this.#videoSource);
+  #videoRenderer!: Watch.Video.Renderer;
+
+  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
+  #audioDecoder = new Watch.Audio.Decoder(this.#audioSource);
+  #audioEmitter = new Watch.Audio.Emitter(this.#audioDecoder, { paused: false });
+
+  #canvas!: HTMLCanvasElement;
+
+  #signals = new Watch.Signals.Effect();
+
+  constructor() {
+    super();
+
+    cleanup.register(this, this.#signals);
+    this.#signals.cleanup(() => {
+      this.#connection.close();
+      this.#broadcast.close();
+      this.#sync.close();
+      this.#videoSource.close();
+      this.#videoDecoder.close();
+      this.#audioSource.close();
+      this.#audioDecoder.close();
+      this.#audioEmitter.close();
+      this.#videoRenderer.close();
+    });
+
+    this.setAttribute('data-media', '');
+
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(TEMPLATE!.content.cloneNode(true));
+
+    this.#canvas = shadow.querySelector('canvas')!;
+    this.#videoRenderer = new Watch.Video.Renderer(this.#videoDecoder, {
+      canvas: this.#canvas,
+      paused: false,
+    });
+
+    this.#signals.subscribe(this.#broadcast.status, (status) => {
+      if (status === 'live') {
+        this.dispatchEvent(new Event('loadedmetadata'));
+        this.dispatchEvent(new Event('loadeddata'));
+        this.dispatchEvent(new Event('canplay'));
+        this.dispatchEvent(new Event('canplaythrough'));
+      }
+    });
+
+    this.#signals.subscribe(this.#videoRenderer.paused, (paused) => {
+      this.dispatchEvent(new Event(paused ? 'pause' : 'play'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.timestamp, () => {
+      this.dispatchEvent(new Event('timeupdate'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.stalled, (stalled) => {
+      this.dispatchEvent(new Event(stalled ? 'waiting' : 'playing'));
+    });
+
+    this.#signals.subscribe(this.#audioEmitter.volume, () => {
+      this.dispatchEvent(new Event('volumechange'));
+    });
+
+    this.#signals.subscribe(this.#audioEmitter.muted, () => {
+      this.dispatchEvent(new Event('volumechange'));
+    });
+
+    this.#signals.subscribe(this.#videoDecoder.buffered, () => {
+      this.dispatchEvent(new Event('progress'));
+    });
+  }
+
+  connectedCallback(): void {
+    this.dispatchEvent(new Event('loadstart'));
+  }
+
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (oldValue === newValue) return;
+
+    if (attrName === 'src') {
+      this.src = newValue ?? '';
+    } else if (attrName === 'name') {
+      this.#broadcast.name.set(newValue ? Moq.Path.from(newValue) : Moq.Path.empty());
+    } else if (attrName === 'muted') {
+      this.#audioEmitter.muted.set(newValue !== null);
+    } else if (attrName === 'volume') {
+      this.#audioEmitter.volume.set(newValue ? Number.parseFloat(newValue) : 1);
+    } else if (attrName === 'autoplay') {
+      if (newValue !== null) {
+        this.play();
+      }
+    }
+  }
+
+  get src(): string {
+    return this.#connection.url.peek()?.toString() ?? '';
+  }
+
+  set src(value: string) {
+    this.#connection.url.set(value ? new URL(value) : undefined);
+    if (value) this.dispatchEvent(new Event('loadstart'));
+  }
+
+  get currentSrc(): string {
+    return this.src;
+  }
+
+  get paused(): boolean {
+    return this.#videoRenderer.paused.peek();
+  }
+
+  play(): Promise<void> {
+    this.#videoRenderer.paused.set(false);
+    this.#audioEmitter.paused.set(false);
+    return Promise.resolve();
+  }
+
+  pause(): void {
+    this.#videoRenderer.paused.set(true);
+    this.#audioEmitter.paused.set(true);
+  }
+
+  load(): void {
+    // No-op — MoQ manages the connection lifecycle.
+  }
+
+  get volume(): number {
+    return this.#audioEmitter.volume.peek();
+  }
+
+  set volume(value: number) {
+    this.#audioEmitter.volume.set(value);
+  }
+
+  get muted(): boolean {
+    return this.#audioEmitter.muted.peek();
+  }
+
+  set muted(value: boolean) {
+    this.#audioEmitter.muted.set(value);
+  }
+
+  get currentTime(): number {
+    return (this.#videoDecoder.timestamp.peek() ?? 0) / 1000;
+  }
+
+  set currentTime(_value: number) {
+    // Live-only — seeking is not supported.
+  }
+
+  get duration(): number {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  get readyState(): number {
+    const status = this.#broadcast.status.peek();
+    if (status === 'live') {
+      return this.#videoDecoder.stalled.peek() ? 2 : 4;
+    }
+    if (status === 'loading') return 1;
+    return 0;
+  }
+
+  get networkState(): number {
+    const status = this.#broadcast.status.peek();
+    if (status === 'live' || status === 'loading') return 2;
+    return 0;
+  }
+
+  get buffered(): TimeRanges {
+    const ranges = this.#videoDecoder.buffered.peek();
+    if (!ranges.length) return EMPTY_TIME_RANGES;
+    return createTimeRanges(ranges);
+  }
+
+  get seekable(): TimeRanges {
+    return EMPTY_TIME_RANGES;
+  }
+
+  get played(): TimeRanges {
+    return EMPTY_TIME_RANGES;
+  }
+
+  get ended(): boolean {
+    return false;
+  }
+
+  get playbackRate(): number {
+    return 1;
+  }
+
+  set playbackRate(_value: number) {}
+
+  get defaultPlaybackRate(): number {
+    return 1;
+  }
+
+  set defaultPlaybackRate(_value: number) {}
+
+  get defaultMuted(): boolean {
+    return this.hasAttribute('muted');
+  }
+
+  set defaultMuted(value: boolean) {
+    this.toggleAttribute('muted', value);
+  }
+
+  get autoplay(): boolean {
+    return this.hasAttribute('autoplay');
+  }
+
+  set autoplay(value: boolean) {
+    this.toggleAttribute('autoplay', value);
+  }
+
+  get loop(): boolean {
+    return false;
+  }
+
+  set loop(_value: boolean) {}
+
+  get controls(): boolean {
+    return false;
+  }
+
+  get preload(): string {
+    return 'none';
+  }
+
+  get error(): MediaError | null {
+    return null;
+  }
+
+  get videoWidth(): number {
+    return this.#canvas.width;
+  }
+
+  get videoHeight(): number {
+    return this.#canvas.height;
+  }
+
+  get poster(): string {
+    return '';
+  }
+
+  set poster(_value: string) {}
+}
diff --git a/packages/core/src/dom/media/moq/index.ts b/packages/core/src/dom/media/moq/index.ts
new file mode 100644
index 000000000..8b165d00c
--- /dev/null
+++ b/packages/core/src/dom/media/moq/index.ts
@@ -0,0 +1,2 @@
+export { MoqCanvas } from './canvas';
+export { MoqMseCustomMedia, MoqMseDelegateBase, MoqMseMedia } from './mse';
diff --git a/packages/core/src/dom/media/moq/mse.ts b/packages/core/src/dom/media/moq/mse.ts
new file mode 100644
index 000000000..d7534af19
--- /dev/null
+++ b/packages/core/src/dom/media/moq/mse.ts
@@ -0,0 +1,126 @@
+import * as Watch from '@moq/watch';
+
+import { type MediaDelegate, MediaDelegateMixin } from '../../../core/media/delegate';
+import { MediaProxyMixin } from '../../../core/media/proxy';
+import { CustomMediaMixin } from '../custom-media-element';
+
+const Moq = Watch.Lite;
+
+const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
+
+export class MoqMseDelegateBase implements MediaDelegate {
+  #connection = new Moq.Connection.Reload({
+    enabled: true,
+  });
+
+  #broadcast = new Watch.Broadcast({
+    connection: this.#connection.established,
+    enabled: true,
+    name: Moq.Path.empty(),
+  });
+
+  #sync = new Watch.Sync();
+
+  #muxer = new Watch.Mse.Muxer(this.#sync, { paused: false });
+
+  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
+  #videoMse = new Watch.Video.Mse(this.#muxer, this.#videoSource);
+
+  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
+  #audioMse = new Watch.Audio.Mse(this.#muxer, this.#audioSource);
+
+  #signals = new Watch.Signals.Effect();
+
+  constructor() {
+    cleanup.register(this, this.#signals);
+    this.#signals.cleanup(() => {
+      this.#connection.close();
+      this.#broadcast.close();
+      this.#sync.close();
+      this.#muxer.close();
+      this.#videoSource.close();
+      this.#videoMse.close();
+      this.#audioSource.close();
+      this.#audioMse.close();
+    });
+  }
+
+  attach(target: EventTarget): void {
+    this.#muxer.element.set(target as HTMLMediaElement);
+  }
+
+  detach(): void {
+    this.#muxer.element.set(undefined);
+  }
+
+  destroy(): void {
+    this.#signals.close();
+  }
+
+  get src(): string {
+    return this.#connection.url.peek()?.toString() ?? '';
+  }
+
+  set src(value: string) {
+    this.#connection.url.set(value ? new URL(value) : undefined);
+  }
+
+  get name(): string {
+    return this.#broadcast.name.peek()?.toString() ?? '';
+  }
+
+  set name(value: string) {
+    this.#broadcast.name.set(value ? Moq.Path.from(value) : Moq.Path.empty());
+  }
+
+  get paused(): boolean {
+    return this.#muxer.paused.peek();
+  }
+
+  get volume(): number {
+    return this.#audioMse.volume.peek();
+  }
+
+  set volume(value: number) {
+    this.#audioMse.volume.set(value);
+  }
+
+  get muted(): boolean {
+    return this.#audioMse.muted.peek();
+  }
+
+  set muted(value: boolean) {
+    this.#audioMse.muted.set(value);
+  }
+
+  get currentTime(): number {
+    return this.#videoMse.timestamp.peek() / 1000;
+  }
+
+  get duration(): number {
+    return Number.POSITIVE_INFINITY;
+  }
+
+  play(): Promise<void> {
+    this.#muxer.paused.set(false);
+    return Promise.resolve();
+  }
+
+  pause(): void {
+    this.#muxer.paused.set(true);
+  }
+}
+
+export class MoqMseCustomMedia extends MediaDelegateMixin(
+  CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' }),
+  MoqMseDelegateBase
+) {}
+
+export class MoqMseMedia extends MediaDelegateMixin(
+  MediaProxyMixin(
+    globalThis.HTMLVideoElement ?? class {},
+    globalThis.HTMLMediaElement ?? class {},
+    globalThis.EventTarget ?? class {}
+  ),
+  MoqMseDelegateBase
+) {}
diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts
index 2b9f04d5e..c0a8155ef 100644
--- a/packages/core/tsdown.config.ts
+++ b/packages/core/tsdown.config.ts
@@ -11,6 +11,7 @@ const createConfig = (mode: BuildMode): UserConfig => ({
     dom: './src/dom/index.ts',
     'dom/media/hls/index': './src/dom/media/hls/index.ts',
     'dom/media/custom-media-element/index': './src/dom/media/custom-media-element/index.ts',
+    'dom/media/moq/index': './src/dom/media/moq/index.ts',
   },
   platform: 'neutral',
   format: 'es',
diff --git a/packages/html/src/media/moq-canvas/index.ts b/packages/html/src/media/moq-canvas/index.ts
index edb6e47d9..35b9edbb9 100644
--- a/packages/html/src/media/moq-canvas/index.ts
+++ b/packages/html/src/media/moq-canvas/index.ts
@@ -1,333 +1 @@
-import * as Watch from '@moq/watch';
-
-const Moq = Watch.Lite;
-
-/** Shim that wraps MoQ's BufferedRanges array as a TimeRanges-like object. */
-function createTimeRanges(ranges: Array<{ start: number; end: number }>): TimeRanges {
-  return {
-    get length() {
-      return ranges.length;
-    },
-    start(index: number) {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
-      return ranges[index]!.start / 1000;
-    },
-    end(index: number) {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
-      return ranges[index]!.end / 1000;
-    },
-  };
-}
-
-const EMPTY_TIME_RANGES = createTimeRanges([]);
-
-// Static template — no dynamic content.
-const TEMPLATE = document.createElement('template');
-TEMPLATE.innerHTML = /*html*/ `
-  <style>
-    :host {
-      display: inline-block;
-      line-height: 0;
-    }
-    canvas {
-      max-width: 100%;
-      max-height: 100%;
-      min-width: 100%;
-      min-height: 100%;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, 50% 50%);
-    }
-  </style>
-  <canvas part="canvas"></canvas>
-`;
-
-// Close everything when this element is garbage collected.
-// There's no destructor for web components so this is the best we can do.
-const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
-
-/**
- * WebCodecs-backed MoQ media element.
- *
- * Creates a `<canvas>` in shadow DOM and uses the MoQ JS API to manage
- * connection, broadcast, and decoding. Synthesizes the HTMLMediaElement
- * interface from MoQ signals so Video.js can treat it as a media element.
- */
-export class MoqCanvas extends HTMLElement {
-  static readonly observedAttributes = ['src', 'name', 'muted', 'volume', 'autoplay'] as const;
-
-  // A MoQ connection that is automatically re-established on drop.
-  #connection = new Moq.Connection.Reload({
-    // Immediately start connecting once a URL is set, even if not in the DOM.
-    enabled: true,
-  });
-
-  // The MoQ broadcast being fetched.
-  #broadcast = new Watch.Broadcast({
-    connection: this.#connection.established,
-    // Start fetching the catalog even if not in the DOM.
-    enabled: true,
-    // Default to an empty namespace, so the player can work with just a URL.
-    name: Moq.Path.empty(),
-  });
-
-  // NOTE: We're using the advanced WebCodecs backend here to improve tree-shaking.
-  // This is not really required, but it's a good example of the customizability of the MoQ JS API.
-  // ex. A moq-audio element would omit the video stuff.
-
-  // Used to synchronize audio and video playback.
-  #sync = new Watch.Sync();
-
-  // Create a source, decoder, and renderer for video.
-  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
-  #videoDecoder = new Watch.Video.Decoder(this.#videoSource);
-  #videoRenderer: Watch.Video.Renderer;
-
-  // Create a source, decoder, and emitter for audio.
-  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
-  #audioDecoder = new Watch.Audio.Decoder(this.#audioSource);
-  #audioEmitter = new Watch.Audio.Emitter(this.#audioDecoder, { paused: false });
-
-  #canvas: HTMLCanvasElement;
-
-  #signals = new Watch.Signals.Effect();
-
-  constructor() {
-    super();
-
-    cleanup.register(this, this.#signals);
-    this.#signals.cleanup(() => {
-      this.#connection.close();
-      this.#broadcast.close();
-      this.#sync.close();
-      this.#videoSource.close();
-      this.#videoDecoder.close();
-      this.#audioSource.close();
-      this.#audioDecoder.close();
-      this.#audioEmitter.close();
-      this.#videoRenderer.close();
-    });
-
-    // Mark as media element for container discovery.
-    this.setAttribute('data-media', '');
-
-    const shadow = this.attachShadow({ mode: 'open' });
-    shadow.appendChild(TEMPLATE.content.cloneNode(true));
-
-    this.#canvas = shadow.querySelector('canvas')!;
-    this.#videoRenderer = new Watch.Video.Renderer(this.#videoDecoder, {
-      canvas: this.#canvas,
-      // TODO Based on autoplay?
-      paused: false,
-    });
-
-    this.#signals.subscribe(this.#broadcast.status, (status) => {
-      if (status === 'live') {
-        this.dispatchEvent(new Event('loadedmetadata'));
-        this.dispatchEvent(new Event('loadeddata'));
-        this.dispatchEvent(new Event('canplay'));
-        this.dispatchEvent(new Event('canplaythrough'));
-      }
-    });
-
-    this.#signals.subscribe(this.#videoRenderer.paused, (paused) => {
-      this.dispatchEvent(new Event(paused ? 'pause' : 'play'));
-    });
-
-    this.#signals.subscribe(this.#videoDecoder.timestamp, () => {
-      this.dispatchEvent(new Event('timeupdate'));
-    });
-
-    this.#signals.subscribe(this.#videoDecoder.stalled, (stalled) => {
-      this.dispatchEvent(new Event(stalled ? 'waiting' : 'playing'));
-    });
-
-    this.#signals.subscribe(this.#audioEmitter.volume, () => {
-      this.dispatchEvent(new Event('volumechange'));
-    });
-
-    this.#signals.subscribe(this.#audioEmitter.muted, () => {
-      this.dispatchEvent(new Event('volumechange'));
-    });
-
-    this.#signals.subscribe(this.#videoDecoder.buffered, () => {
-      this.dispatchEvent(new Event('progress'));
-    });
-  }
-
-  connectedCallback(): void {
-    this.dispatchEvent(new Event('loadstart'));
-  }
-
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
-    if (oldValue === newValue) return;
-
-    if (attrName === 'src') {
-      this.src = newValue ?? '';
-    } else if (attrName === 'name') {
-      this.#broadcast.name.set(newValue ? Moq.Path.from(newValue) : Moq.Path.empty());
-    } else if (attrName === 'muted') {
-      this.#audioEmitter.muted.set(newValue !== null);
-    } else if (attrName === 'volume') {
-      this.#audioEmitter.volume.set(newValue ? Number.parseFloat(newValue) : 1);
-    } else if (attrName === 'autoplay') {
-      if (newValue !== null) {
-        this.play();
-      }
-    }
-  }
-
-  // --- HTMLMediaElement-like interface ---
-
-  get src(): string {
-    return this.#connection.url.peek()?.toString() ?? '';
-  }
-
-  set src(value: string) {
-    this.#connection.url.set(value ? new URL(value) : undefined);
-    if (value) this.dispatchEvent(new Event('loadstart'));
-  }
-
-  get currentSrc(): string {
-    return this.src;
-  }
-
-  get paused(): boolean {
-    return this.#videoRenderer.paused.peek();
-  }
-
-  play(): Promise<void> {
-    this.#videoRenderer.paused.set(false);
-    this.#audioEmitter.paused.set(false);
-    return Promise.resolve();
-  }
-
-  pause(): void {
-    this.#videoRenderer.paused.set(true);
-    this.#audioEmitter.paused.set(true);
-  }
-
-  load(): void {
-    // No-op — MoQ manages the connection lifecycle.
-  }
-
-  get volume(): number {
-    return this.#audioEmitter.volume.peek();
-  }
-
-  set volume(value: number) {
-    this.#audioEmitter.volume.set(value);
-  }
-
-  get muted(): boolean {
-    return this.#audioEmitter.muted.peek();
-  }
-
-  set muted(value: boolean) {
-    this.#audioEmitter.muted.set(value);
-  }
-
-  get currentTime(): number {
-    return (this.#videoDecoder.timestamp.peek() ?? 0) / 1000;
-  }
-
-  set currentTime(_value: number) {
-    // Live-only — seeking is not supported.
-  }
-
-  get duration(): number {
-    return Number.POSITIVE_INFINITY;
-  }
-
-  get readyState(): number {
-    const status = this.#broadcast.status.peek();
-    if (status === 'live') {
-      return this.#videoDecoder.stalled.peek() ? 2 : 4;
-    }
-    if (status === 'loading') return 1;
-    return 0;
-  }
-
-  get networkState(): number {
-    const status = this.#broadcast.status.peek();
-    if (status === 'live' || status === 'loading') return 2;
-    return 0;
-  }
-
-  get buffered(): TimeRanges {
-    const ranges = this.#videoDecoder.buffered.peek();
-    if (!ranges.length) return EMPTY_TIME_RANGES;
-    return createTimeRanges(ranges);
-  }
-
-  get seekable(): TimeRanges {
-    return EMPTY_TIME_RANGES;
-  }
-
-  get played(): TimeRanges {
-    return EMPTY_TIME_RANGES;
-  }
-
-  get ended(): boolean {
-    return false;
-  }
-
-  get playbackRate(): number {
-    return 1;
-  }
-
-  set playbackRate(_value: number) {}
-
-  get defaultPlaybackRate(): number {
-    return 1;
-  }
-
-  set defaultPlaybackRate(_value: number) {}
-
-  get defaultMuted(): boolean {
-    return this.hasAttribute('muted');
-  }
-
-  set defaultMuted(value: boolean) {
-    this.toggleAttribute('muted', value);
-  }
-
-  get autoplay(): boolean {
-    return this.hasAttribute('autoplay');
-  }
-
-  set autoplay(value: boolean) {
-    this.toggleAttribute('autoplay', value);
-  }
-
-  get loop(): boolean {
-    return false;
-  }
-
-  set loop(_value: boolean) {}
-
-  get controls(): boolean {
-    return false;
-  }
-
-  get preload(): string {
-    return 'none';
-  }
-
-  get error(): MediaError | null {
-    return null;
-  }
-
-  get videoWidth(): number {
-    return this.#canvas.width;
-  }
-
-  get videoHeight(): number {
-    return this.#canvas.height;
-  }
-
-  get poster(): string {
-    return '';
-  }
-
-  set poster(_value: string) {}
-}
+export { MoqCanvas } from '@videojs/core/dom/media/moq';
diff --git a/packages/html/src/media/moq-video/index.ts b/packages/html/src/media/moq-video/index.ts
index 95c0b8150..47c4c3c63 100644
--- a/packages/html/src/media/moq-video/index.ts
+++ b/packages/html/src/media/moq-video/index.ts
@@ -1,23 +1,6 @@
-import * as Watch from '@moq/watch';
+import { MoqMseCustomMedia } from '@videojs/core/dom/media/moq';
 
-const Moq = Watch.Lite;
-
-import { CustomMediaMixin } from '@videojs/core/dom/media/custom-media-element/index';
-
-const CustomVideo = CustomMediaMixin(globalThis.HTMLElement ?? class {}, { tag: 'video' });
-
-// Close everything when this element is garbage collected.
-// There's no destructor for web components so this is the best we can do.
-const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
-
-/**
- * MSE-backed MoQ media element.
- *
- * Wraps a native `<video>` element via CustomMediaMixin and uses the MoQ JS API
- * to feed media segments through Media Source Extensions. Properties like
- * `readyState` and `buffered` fall through to the native element.
- */
-export class MoqVideo extends CustomVideo {
+export class MoqVideo extends MoqMseCustomMedia {
   static getTemplateHTML(attrs: Record<string, string>): string {
     const { src, name, ...rest } = attrs;
     // biome-ignore lint/complexity/noThisInStatic: intentional use of super
@@ -25,123 +8,31 @@ export class MoqVideo extends CustomVideo {
   }
 
   static get observedAttributes(): string[] {
-    return [...CustomVideo.observedAttributes, 'name'];
+    return [...MoqMseCustomMedia.observedAttributes, 'name'];
   }
 
-  // A MoQ connection that is automatically re-established on drop.
-  #connection = new Moq.Connection.Reload({
-    // Immediately start connecting once a URL is set, even if not in the DOM.
-    enabled: true,
-  });
-
-  // The MoQ broadcast being fetched.
-  #broadcast = new Watch.Broadcast({
-    // The connection to the MoQ server.
-    connection: this.#connection.established,
-    // Start fetching the catalog even if not in the DOM.
-    enabled: true,
-    // Default to an empty namespace, so the player can work with just a URL.
-    name: Moq.Path.empty(),
-  });
-
-  // We use the advanced JS API here to improve tree-shaking.
-  // ex. A moq-audio element would omit the video stuff.
-
-  // Used to synchronize audio and video playback.
-  #sync = new Watch.Sync();
-
-  // Responsible for combining the audio and video sourceBuffers.
-  // TODO: This currently doesn't support adding/removing tracks after the fact.
-  #muxer = new Watch.Mse.Muxer(this.#sync, { paused: false });
-
-  // Create a source for the video stream.
-  #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
-  #videoMse = new Watch.Video.Mse(this.#muxer, this.#videoSource);
-
-  // Create a source for the audio stream.
-  #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
-  #audioMse = new Watch.Audio.Mse(this.#muxer, this.#audioSource);
-
-  #signals = new Watch.Signals.Effect();
-
   constructor() {
     super();
-
-    cleanup.register(this, this.#signals);
-    this.#signals.cleanup(() => {
-      this.#connection.close();
-      this.#broadcast.close();
-      this.#sync.close();
-      this.#muxer.close();
-      this.#videoSource.close();
-      this.#videoMse.close();
-      this.#audioSource.close();
-      this.#audioMse.close();
-    });
-
-    this.#muxer.element.set(this.nativeEl as HTMLMediaElement);
+    this.attach(this.target);
   }
 
-  get(prop: string): any {
-    switch (prop) {
-      case 'src':
-        return this.#connection.url.peek()?.toString() ?? '';
-      case 'name':
-        return this.#broadcast.name.peek()?.toString() ?? '';
-      case 'paused':
-        return this.#muxer.paused.peek();
-      case 'volume':
-        return this.#audioMse.volume.peek();
-      case 'muted':
-        return this.#audioMse.muted.peek();
-      case 'currentTime':
-        return this.#videoMse.timestamp.peek() / 1000;
-      case 'duration':
-        return Number.POSITIVE_INFINITY;
-      default:
-        return super.get(prop);
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (attrName !== 'src' && attrName !== 'name') {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
     }
-  }
 
-  set(prop: string, val: any): void {
-    switch (prop) {
-      case 'src':
-        this.#connection.url.set(val ? new URL(val) : undefined);
-        break;
-      case 'name':
-        this.#broadcast.name.set(val ? Moq.Path.from(val) : Moq.Path.empty());
-        break;
-      case 'volume':
-        this.#audioMse.volume.set(val);
-        break;
-      case 'muted':
-        this.#audioMse.muted.set(val);
-        break;
-      default:
-        super.set(prop, val);
+    if (attrName === 'src' && oldValue !== newValue) {
+      this.src = newValue ?? '';
+    } else if (attrName === 'name' && oldValue !== newValue) {
+      this.name = newValue ?? '';
     }
   }
 
-  call(prop: string, ...args: any[]): any {
-    switch (prop) {
-      case 'play':
-        this.#muxer.paused.set(false);
-        return Promise.resolve();
-      case 'pause':
-        this.#muxer.paused.set(true);
-        return;
-      default:
-        return super.call(prop, ...args);
-    }
-  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
 
-  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
-    if (attrName === 'src' && oldValue !== newValue) {
-      this.src = newValue ?? '';
-    } else if (attrName === 'name' && oldValue !== newValue) {
-      this.set('name', newValue ?? '');
-    } else if (attrName !== 'src' && attrName !== 'name') {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a18f0c6a..c4d9806fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,6 +170,9 @@ importers:
 
   packages/core:
     dependencies:
+      '@moq/watch':
+        specifier: ^0.2.2
+        version: 0.2.2(@svta/cml-utils@1.4.0)(@types/react@19.2.7)(react@19.2.3)(zod@4.3.6)
       '@videojs/store':
         specifier: workspace:*
         version: link:../store

From b6c67a838006f852ffcaf5ac6938afb526d07db9 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Tue, 10 Mar 2026 14:39:37 -0700
Subject: [PATCH 3/4] =?UTF-8?q?refactor(core):=20clean=20up=20MoqCanvas=20?=
 =?UTF-8?q?=E2=80=94=20remove=20assertions,=20restore=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove non-null assertions (`!`) by reordering initialization before
cleanup registration. Use `document` directly instead of guarded
`globalThis.document?.`. Simplify createTimeRanges with `.at()` and
move it below the class. Restore explanatory comments from the
original commit.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/core/src/dom/media/moq/canvas.ts | 118 +++++++++++++---------
 1 file changed, 69 insertions(+), 49 deletions(-)

diff --git a/packages/core/src/dom/media/moq/canvas.ts b/packages/core/src/dom/media/moq/canvas.ts
index c8e33f533..695753acd 100644
--- a/packages/core/src/dom/media/moq/canvas.ts
+++ b/packages/core/src/dom/media/moq/canvas.ts
@@ -2,45 +2,30 @@ import * as Watch from '@moq/watch';
 
 const Moq = Watch.Lite;
 
-function createTimeRanges(ranges: Array<{ start: number; end: number }>): TimeRanges {
-  return {
-    get length() {
-      return ranges.length;
-    },
-    start(index: number) {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
-      return ranges[index]!.start / 1000;
-    },
-    end(index: number) {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds', 'IndexSizeError');
-      return ranges[index]!.end / 1000;
-    },
-  };
-}
-
 const EMPTY_TIME_RANGES = createTimeRanges([]);
 
-const TEMPLATE = globalThis.document?.createElement('template');
-if (TEMPLATE) {
-  TEMPLATE.innerHTML = /*html*/ `
-    <style>
-      :host {
-        display: inline-block;
-        line-height: 0;
-      }
-      canvas {
-        max-width: 100%;
-        max-height: 100%;
-        min-width: 100%;
-        min-height: 100%;
-        object-fit: var(--media-object-fit, contain);
-        object-position: var(--media-object-position, 50% 50%);
-      }
-    </style>
-    <canvas part="canvas"></canvas>
-  `;
-}
+const TEMPLATE = document.createElement('template');
+
+TEMPLATE.innerHTML = /*html*/ `
+  <style>
+    :host {
+      display: inline-block;
+      line-height: 0;
+    }
+    canvas {
+      max-width: 100%;
+      max-height: 100%;
+      min-width: 100%;
+      min-height: 100%;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, 50% 50%);
+    }
+  </style>
+  <canvas part="canvas"></canvas>
+`;
 
+// Close everything when this element is garbage collected.
+// There's no destructor for web components so this is the best we can do.
 const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => signals.close());
 
 /**
@@ -53,33 +38,59 @@ const cleanup = new FinalizationRegistry<Watch.Signals.Effect>((signals) => sign
 export class MoqCanvas extends (globalThis.HTMLElement ?? class {}) {
   static readonly observedAttributes = ['src', 'name', 'muted', 'volume', 'autoplay'] as const;
 
+  // A MoQ connection that is automatically re-established on drop.
   #connection = new Moq.Connection.Reload({
+    // Immediately start connecting once a URL is set, even if not in the DOM.
     enabled: true,
   });
 
+  // The MoQ broadcast being fetched.
   #broadcast = new Watch.Broadcast({
     connection: this.#connection.established,
+    // Start fetching the catalog even if not in the DOM.
     enabled: true,
+    // Default to an empty namespace, so the player can work with just a URL.
     name: Moq.Path.empty(),
   });
 
+  // NOTE: We're using the advanced WebCodecs backend to improve tree-shaking.
+  // ex. A moq-audio element would omit the video stuff.
+
+  // Used to synchronize audio and video playback.
+  // NOTE: Sync will be pushed into the props next version.
   #sync = new Watch.Sync();
 
+  // Create a source, decoder, and renderer for video.
   #videoSource = new Watch.Video.Source(this.#sync, { broadcast: this.#broadcast });
   #videoDecoder = new Watch.Video.Decoder(this.#videoSource);
-  #videoRenderer!: Watch.Video.Renderer;
+  #videoRenderer: Watch.Video.Renderer;
 
+  // Create a source, decoder, and emitter for audio.
   #audioSource = new Watch.Audio.Source(this.#sync, { broadcast: this.#broadcast });
   #audioDecoder = new Watch.Audio.Decoder(this.#audioSource);
   #audioEmitter = new Watch.Audio.Emitter(this.#audioDecoder, { paused: false });
 
-  #canvas!: HTMLCanvasElement;
+  #canvas: HTMLCanvasElement;
 
   #signals = new Watch.Signals.Effect();
 
   constructor() {
     super();
 
+    // Mark as media element for container discovery.
+    this.setAttribute('data-media', '');
+
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(TEMPLATE.content.cloneNode(true));
+
+    const canvas = shadow.querySelector('canvas');
+    if (!canvas) throw new Error('Missing <canvas> in shadow DOM template');
+    this.#canvas = canvas;
+    this.#videoRenderer = new Watch.Video.Renderer(this.#videoDecoder, {
+      canvas: this.#canvas,
+      paused: false,
+    });
+
     cleanup.register(this, this.#signals);
     this.#signals.cleanup(() => {
       this.#connection.close();
@@ -93,17 +104,6 @@ export class MoqCanvas extends (globalThis.HTMLElement ?? class {}) {
       this.#videoRenderer.close();
     });
 
-    this.setAttribute('data-media', '');
-
-    const shadow = this.attachShadow({ mode: 'open' });
-    shadow.appendChild(TEMPLATE!.content.cloneNode(true));
-
-    this.#canvas = shadow.querySelector('canvas')!;
-    this.#videoRenderer = new Watch.Video.Renderer(this.#videoDecoder, {
-      canvas: this.#canvas,
-      paused: false,
-    });
-
     this.#signals.subscribe(this.#broadcast.status, (status) => {
       if (status === 'live') {
         this.dispatchEvent(new Event('loadedmetadata'));
@@ -160,6 +160,8 @@ export class MoqCanvas extends (globalThis.HTMLElement ?? class {}) {
     }
   }
 
+  // --- HTMLMediaElement-like interface ---
+
   get src(): string {
     return this.#connection.url.peek()?.toString() ?? '';
   }
@@ -313,3 +315,21 @@ export class MoqCanvas extends (globalThis.HTMLElement ?? class {}) {
 
   set poster(_value: string) {}
 }
+
+function createTimeRanges(ranges: Array<{ start: number; end: number }>): TimeRanges {
+  return {
+    get length() {
+      return ranges.length;
+    },
+    start(index: number) {
+      const range = ranges.at(index);
+      if (!range) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return range.start / 1000;
+    },
+    end(index: number) {
+      const range = ranges.at(index);
+      if (!range) throw new DOMException('Index out of bounds', 'IndexSizeError');
+      return range.end / 1000;
+    },
+  };
+}

From 163236a06a38253a2bd3f958dceab0842073581a Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Tue, 10 Mar 2026 14:41:22 -0700
Subject: [PATCH 4/4] chore(core): update pnpm-lock.yaml for @moq/watch
 dependency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 pnpm-lock.yaml | 134 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49d0c6f2e..5f7f1ad5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
 
   packages/core:
     dependencies:
+      '@moq/watch':
+        specifier: ^0.2.2
+        version: 0.2.3(@svta/cml-utils@1.4.0)(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)
       '@videojs/spf':
         specifier: workspace:*
         version: link:../spf
@@ -118,6 +121,9 @@ importers:
 
   packages/html:
     dependencies:
+      '@moq/watch':
+        specifier: ^0.2.2
+        version: 0.2.3(@svta/cml-utils@1.4.0)(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)
       '@videojs/core':
         specifier: workspace:*
         version: link:../core
@@ -1753,12 +1759,21 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@kixelated/libavjs-webcodecs-polyfill@0.5.5':
+    resolution: {integrity: sha512-Q1zgnTMMQ2F7IE9ylx3C1XzVbg5vYN18jiDINO5U3kNPBOHdYuUlJsMhtBoqr1M6ocLtoiqdHmLs7tHFgrw5KA==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@libav.js/types@6.8.8':
+    resolution: {integrity: sha512-Lbik/0Q3x2R8cI7mOtRgt+nUWLqGXh7UinMndmpdXSDY4YEjYyVUDsq6fxkuriL78+LCYx8frZIN1r+oDsvYCQ==}
+
+  '@libav.js/variant-opus-af@6.8.8':
+    resolution: {integrity: sha512-8KBQyA8n5goN7lyctOaPxpcx7dapOgqKh8dWW/NAcl87AgM/WoUGSex3fFc46oCtTHYrUKEm1OmZUrtkt3Q56A==}
+
   '@lit-labs/ssr-dom-shim@1.5.1':
     resolution: {integrity: sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==}
 
@@ -1779,6 +1794,37 @@ packages:
   '@mixmark-io/domino@2.2.0':
     resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
 
+  '@moq/hang@0.2.0':
+    resolution: {integrity: sha512-uW5hGVWGPY7uFD3w3kt1CNafbB5bge4O5/vZm756SgejihHkmqcFjSUfgabXxIJCXMr/1qtDXOVwIUs8QILZng==}
+
+  '@moq/lite@0.1.5':
+    resolution: {integrity: sha512-lbMBm7Sm4J7jQ9uWI+ITNGk6kqVNRL1pUEFArXNBUS2OEgHUUosG+DWsuRpiun2OWLiRi5nfx7bmR/3b5hH+ww==}
+    peerDependencies:
+      zod: ^4.1.0
+
+  '@moq/signals@0.1.3':
+    resolution: {integrity: sha512-tPuLnC6INqydJEore/FJPg+9rdzEb6BsUvr3P7gMErEpdHjdeQbhpn7ramrN2YmOhaACkY9Dk8U3IudzOxSF/A==}
+    peerDependencies:
+      '@types/react': ^19.1.8
+      react: ^19.0.0
+      solid-js: ^1.9.7
+    peerDependenciesMeta:
+      react:
+        optional: true
+      solid-js:
+        optional: true
+
+  '@moq/ui-core@0.1.0':
+    resolution: {integrity: sha512-DJNBpUNQDyh7Tou324fbJ5/pT08UPghH3OxcVdLEo9IQeX//8NiEzJwcX7iuacR32nzgdiBThIbIpeFa60U3/g==}
+    peerDependencies:
+      '@moq/signals': ^0.1.2
+
+  '@moq/watch@0.2.3':
+    resolution: {integrity: sha512-niAxQdmsNO7ELYYW6XgsH3/dsdp1PHt6EBPH74sR1/bNBQtMC0soZRZjrUQatD9374+MSFL2+NpV61/m1uv1nA==}
+
+  '@moq/web-transport-ws@0.1.2':
+    resolution: {integrity: sha512-mYha+AkLNPT3uOGnTA5YWjpxc9LO/yriFSoWzKkR0zN3UMZb9RXbsD8Gbhg1pJZod6QD4tevHoOWTBADYN7yAQ==}
+
   '@mux/mux-node@12.8.1':
     resolution: {integrity: sha512-ey2eKn7iwVrjRVJfB/yF9HPDVpEl+fZV00ydx0kc9/BMs+wjBi0KgU0HMqUjTgEoyMUTlHmJ3U3BfDvreyg5iQ==}
 
@@ -3043,6 +3089,16 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
 
+  '@svta/cml-iso-bmff@1.0.1':
+    resolution: {integrity: sha512-MOhATJYQ6cVrIcoY3nj8p/vGYDpG3wjQIIhBPHNt9yjFijdwFdBNqdZbCXv3aFhRjdx5Saca5TkgNJusKhnI/w==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@svta/cml-utils': 1.4.0
+
+  '@svta/cml-utils@1.4.0':
+    resolution: {integrity: sha512-vNtHtv/z+9I9ysxFwNrgwxic1oceVPr8TpcpV/NA1l8Gy4phynwtOppkCIBB+PmoyKDcqE4lO85g+lfsuSTBBA==}
+    engines: {node: '>=20'}
+
   '@tailwindcss/node@4.2.1':
     resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
 
@@ -3317,6 +3373,9 @@ packages:
     resolution: {integrity: sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@ungap/global-this@0.4.4':
+    resolution: {integrity: sha512-mHkm6FvepJECMNthFuIgpAEFmPOk71UyXuIxYfjytvFTnSDBIz7jmViO+LfHI/AjrazWije0PnSP3+/NlwzqtA==}
+
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
@@ -3618,6 +3677,9 @@ packages:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
+  async-mutex@0.5.0:
+    resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
+
   async-sema@3.1.1:
     resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
 
@@ -8891,6 +8953,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kixelated/libavjs-webcodecs-polyfill@0.5.5':
+    dependencies:
+      '@libav.js/types': 6.8.8
+      '@ungap/global-this': 0.4.4
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -8899,6 +8966,10 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@libav.js/types@6.8.8': {}
+
+  '@libav.js/variant-opus-af@6.8.8': {}
+
   '@lit-labs/ssr-dom-shim@1.5.1': {}
 
   '@lit/context@1.1.6':
@@ -8954,6 +9025,57 @@ snapshots:
 
   '@mixmark-io/domino@2.2.0': {}
 
+  '@moq/hang@0.2.0(@svta/cml-utils@1.4.0)(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@kixelated/libavjs-webcodecs-polyfill': 0.5.5
+      '@libav.js/variant-opus-af': 6.8.8
+      '@moq/lite': 0.1.5(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)
+      '@moq/signals': 0.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@svta/cml-iso-bmff': 1.0.1(@svta/cml-utils@1.4.0)
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - '@svta/cml-utils'
+      - '@types/react'
+      - react
+      - solid-js
+
+  '@moq/lite@0.1.5(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)':
+    dependencies:
+      '@moq/signals': 0.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@moq/web-transport-ws': 0.1.2
+      async-mutex: 0.5.0
+      zod: 4.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - react
+      - solid-js
+
+  '@moq/signals@0.1.3(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@types/react': 19.2.14
+      dequal: 2.0.3
+    optionalDependencies:
+      react: 19.2.4
+
+  '@moq/ui-core@0.1.0(@moq/signals@0.1.3(@types/react@19.2.14)(react@19.2.4))':
+    dependencies:
+      '@moq/signals': 0.1.3(@types/react@19.2.14)(react@19.2.4)
+
+  '@moq/watch@0.2.3(@svta/cml-utils@1.4.0)(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)':
+    dependencies:
+      '@moq/hang': 0.2.0(@svta/cml-utils@1.4.0)(@types/react@19.2.14)(react@19.2.4)
+      '@moq/lite': 0.1.5(@types/react@19.2.14)(react@19.2.4)(zod@4.3.6)
+      '@moq/signals': 0.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@moq/ui-core': 0.1.0(@moq/signals@0.1.3(@types/react@19.2.14)(react@19.2.4))
+    transitivePeerDependencies:
+      - '@svta/cml-utils'
+      - '@types/react'
+      - react
+      - solid-js
+      - zod
+
+  '@moq/web-transport-ws@0.1.2': {}
+
   '@mux/mux-node@12.8.1':
     dependencies:
       '@types/node': 18.19.130
@@ -10346,6 +10468,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@svta/cml-iso-bmff@1.0.1(@svta/cml-utils@1.4.0)':
+    dependencies:
+      '@svta/cml-utils': 1.4.0
+
+  '@svta/cml-utils@1.4.0': {}
+
   '@tailwindcss/node@4.2.1':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -10632,6 +10760,8 @@ snapshots:
       '@typescript-eslint/types': 8.56.1
       eslint-visitor-keys: 5.0.1
 
+  '@ungap/global-this@0.4.4': {}
+
   '@ungap/structured-clone@1.3.0': {}
 
   '@vercel/nft@0.29.4(rollup@4.59.0)':
@@ -11157,6 +11287,10 @@ snapshots:
 
   async-function@1.0.0: {}
 
+  async-mutex@0.5.0:
+    dependencies:
+      tslib: 2.8.1
+
   async-sema@3.1.1: {}
 
   async@3.2.6: {}