@moq/watch

Subscribe to and render Media over QUIC (MoQ) broadcasts, built on top of @moq/hang and @moq/lite.

Installation

bun add @moq/watch
# or
npm add @moq/watch

No-build CDN usage

For quick demos or embeds where a bundler is overkill, jsDelivr's +esm endpoint will transform the published npm package into a browser-ready ESM module — bare imports like @moq/hang are automatically rewritten to other +esm URLs. No build step or import map required:

<script type="module">
    import "https://cdn.jsdelivr.net/npm/@moq/watch/element.js/+esm";
    import "https://cdn.jsdelivr.net/npm/@moq/watch/ui/index.js/+esm";
</script>

<moq-watch-ui>
    <moq-watch url="https://relay.example.com/anon" name="room/alice">
        <canvas></canvas>
    </moq-watch>
</moq-watch-ui>

Pin a version range in the URL for production — e.g. https://cdn.jsdelivr.net/npm/@moq/[email protected]/element.js/+esm. esm.sh (https://esm.sh/@moq/watch/element) works the same way if you prefer it.

For anything beyond embedding on a static page you should install the package and use a real bundler (the examples below).

Web Component

The simplest way to watch a stream:

<script type="module">
    import "@moq/watch/element";
</script>

<moq-watch
    url="https://relay.example.com/anon"
    path="room/alice"
    controls>
    <canvas></canvas>
</moq-watch>

Attributes

| Attribute | Type | Default | Description | |-----------|---------|----------|-----------------------| | url | string | required | Relay server URL | | path | string | required | Broadcast path | | paused | boolean | false | Pause playback | | muted | boolean | false | Mute audio | | volume | number | 1 | Audio volume (0-1) |

JavaScript API

For more control:

import * as Watch from "@moq/watch";

const watch = new Watch.Broadcast(connection, {
    enabled: true,
    name: "alice",
    video: { enabled: true },
    audio: { enabled: true },
});

// Access the video stream
watch.video.media.subscribe((stream) => {
    if (stream) {
        videoElement.srcObject = stream;
    }
});

UI Web Component

@moq/watch includes a SolidJS-powered UI overlay (<moq-watch-ui>) with playback controls, volume, buffering indicator, quality selector, and stats panel. It depends on @moq/ui-core for shared UI primitives.

<script type="module">
    import "@moq/watch/element";
    import "@moq/watch/ui";
</script>

<moq-watch-ui>
    <moq-watch url="https://relay.example.com/anon" path="room/alice">
        <canvas></canvas>
    </moq-watch>
</moq-watch-ui>

The <moq-watch-ui> element automatically discovers the nested <moq-watch> element and wires up reactive controls.

Features

• WebCodecs decoding — Hardware-accelerated video and audio decoding
• MSE fallback — Media Source Extensions for broader codec support
• Reactive state — All properties are signals from @moq/signals
• Chat — Subscribe to text chat channels
• Location — Peer location and window tracking
• Quality selection — Switch between available renditions

License

Licensed under either:

• Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)