publish

@moq/publish

Publish media to Media over QUIC (MoQ) broadcasts, built on top of @moq/hang and @moq/net.

Installation

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

No-build CDN usage

For quick demos or embeds where a bundler is overkill, esm.sh serves the published npm package as a browser-ready ESM module. Bare imports like @moq/hang are automatically rewritten to other esm.sh URLs. No build step or import map required:

<script type="module">
    import "https://esm.sh/@moq/publish/element";
    import "https://esm.sh/@moq/publish/ui";
</script>

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

Pin a version range in the URL for production, e.g. https://esm.sh/@moq/publish@0.2/element. jsDelivr's +esm endpoint (https://cdn.jsdelivr.net/npm/@moq/publish/element.js/+esm) 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 publish a stream:

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

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

Attributes

Attribute	Type	Default	Description
url	string	required	Relay server URL
name	string	required	Broadcast name
source	string	—	"camera", "screen", "file"
muted	boolean	false	Mute audio capture
invisible	boolean	false	Disable video capture
preview	string	"source"	What the preview renders: "source", "encoded", "none"
announce	string	"source"	When to publish: "always", "never", "source" (once a source is selected)

JavaScript API

For more control:

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

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

// Change source at runtime
publish.source.camera.enabled.set(true);

UI Web Component

@moq/publish includes a Web Component UI overlay (<moq-publish-ui>) with source selection (camera, screen, file, microphone) and status indicator. It is built on top of @moq/signals with no framework dependency.

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

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

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

Features

• Camera & microphone — Capture from user devices
• Screen sharing — Capture display or window
• File playback — Publish from a media file
• WebCodecs encoding — Hardware-accelerated video and audio encoding
• Reactive state — All properties are signals from @moq/signals
• Chat — Publish text chat messages
• Location — Publish peer position and window tracking

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)