@moq/watch

Subscribe to and render MoQ broadcasts. Provides both a JavaScript API and a <hang-watch> Web Component, plus an optional <hang-watch-ui> SolidJS overlay.

Installation

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

Web Component

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

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

Attributes:

• url (required) — Relay server URL
• path (required) — Broadcast path/name
• controls — Show playback controls (boolean)
• paused — Pause playback (boolean)
• muted — Mute audio (boolean)
• volume — Audio volume (0–1, default: 1)

UI Overlay

Import @moq/watch/ui for a SolidJS-powered overlay with buffering indicator, stats panel, and playback controls:

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

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

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

JavaScript API

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

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

// Reactive controls
broadcast.volume.set(0.8);
broadcast.paused.set(false);

Related Packages

• @moq/publish — Publish media to MoQ broadcasts
• @moq/hang — Core media library (catalog, container, support)
• @moq/ui-core — Shared UI primitives
• @moq/lite — Core pub/sub transport protocol