MoQ Publish

Source MoQ

Relay URL Broadcast name

Video encode WebCodecs

Accurate preview (decode a copy of the stream) Codec

Max resolution

Frame rate (fps)

Target bitrate (kbps)

Keyframe interval (ms)

Audio encode WebCodecs

Codec

Sample rate (Hz)

Channels

Mic processing

Auto keeps the browser default. On macOS the defaults engage voice processing: auto gain can slowly pull the level down and other system audio gets ducked.

Echo cancellation Auto gain control Noise suppression

Opus options

Bitrate (kbps)

Frame duration Complexity (0-10) In-band FEC Expected packet loss (%) DTX (discontinuous transmission)

Gain

Metadata `meta.json` MoQ

Network

How it works:

Capture, encoding, and publishing are owned by the <moq-publish-ui> web component. The side panel writes the encoder signals directly – codec, bitrate, resolution, frame rate, and the full Opus config are all editable live:

const publish = document.getElementById("publish");
publish.video.config.set({ maxBitrate: 2_000_000, frameRate: 30 });
publish.audio.codec.set({ mime: "opus", bitrate: 64_000 });

Each setting defaults to "auto" (the field is omitted, so the encoder picks); the negotiated value appears to the right once you go live. Codec support is probed with VideoEncoder.isConfigSupported; unsupported options are disabled. The component publishes a single video rendition; to add more (e.g. simulcast), register your own encoders on a Broadcast via the JS API.

The metadata editor serves a custom meta.json track within the broadcast via broadcast.net; the watch inspector subscribes and reads it back live.

You're not limited to the browser. Try just pub tos in a terminal and watch it appear as a tile, or use the GStreamer plugin for native pipelines.

This demo uses http so it's extra not secure: it insecurely fetches the certificate hash and tells WebTransport to trust it. In production you'll need a real certificate (ex. LetsEncrypt) and https.

Other demos: