@moq/publish

Publish media to MoQ broadcasts. Provides both a JavaScript API and a <moq-publish> Web Component, plus an optional <moq-publish-ui> overlay.

Installation

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

No-build CDN usage

For quick demos or single-page embeds where a bundler is overkill, load the package straight from jsDelivr with the +esm endpoint. jsDelivr transforms the published file and rewrites bare imports (like @moq/hang, @moq/lite) to other +esm URLs, so it loads in the browser with no import map or local build step:

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

<moq-publish-ui>
    <moq-publish url="https://relay.example.com/anon" name="room/alice" source="camera">
        <video muted autoplay></video>
    </moq-publish>
</moq-publish-ui>

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

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

Web Component

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

<moq-publish
    url="https://relay.example.com/anon"
    name="room/alice"
    audio video controls>
    <video muted autoplay></video>
</moq-publish>

Attributes:

• url (required) — Relay server URL
• name (required) — Broadcast name
• device — "camera" or "screen" (default: "camera")
• audio — Enable audio capture (boolean)
• video — Enable video capture (boolean)
• controls — Show publishing controls (boolean)

UI Overlay

Import @moq/publish/ui for a Web Component overlay with device selection and publishing controls:

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

<moq-publish-ui>
    <moq-publish
        url="https://relay.example.com/anon"
        name="room/alice"
        audio video>
        <video muted autoplay></video>
    </moq-publish>
</moq-publish-ui>

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

JavaScript API

import * as Publish from "@moq/publish";

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

// Reactive controls
broadcast.video.device.set("screen");
broadcast.name.set("bob");

Related Packages

• @moq/watch — Subscribe to and render MoQ broadcasts
• @moq/hang — Core media library (catalog, container, support)
• @moq/lite — Core pub/sub transport protocol