Web Publishing

This tutorial explains how to publish a live stream from the browser using Media over QUIC (MoQ) with Fishjam. To watch a stream instead, see Web Subscribing.

info

If you're new to MoQ, then we recommend getting familiar with the MoQ with Fishjam explanation.

To start publishing a MoQ stream, you need a publisher connection URL — the relay URL with a publisher token embedded as a ?jwt= query parameter. We show how to quickly prototype with the Sandbox API and how to get ready for production.

tip

MoQ is a protocol with a well-defined negotiation, so in theory any compliant MoQ client should work. That said, we recommend using the @moq client libraries — the reference TypeScript implementation maintained alongside the protocol. For more details, see the documentation.

Quickstart with the Sandbox API

If you don't have a backend server set up, you can prototype publishing using the Sandbox API.

Obtaining a publisher connection URL

For more on what the Sandbox API is and its limitations, see What is the Sandbox API?.

info

To obtain a MoQ connection URL you'll need your Sandbox API URL. If you don't have it already, see Sandbox API URL.

React

If you're using React, the useSandbox hook from @fishjam-cloud/react-client wraps the Sandbox API request for you:

import { useSandbox } from "@fishjam-cloud/react-client";

const PUBLISHER_PATH = "stream-alice";
const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL";

// Inside a React component:
const { getSandboxMoqPublisherAccess } = useSandbox({
  sandboxApiUrl: SANDBOX_API_URL,
});

// Request a publisher connection URL scoped to the publisher path
const { connection_url: publishUrl } = await getSandboxMoqPublisherAccess(PUBLISHER_PATH);

TS

If you don't want to use React or pull in the whole client library just for the useSandbox hook, you can call the Sandbox API directly with fetch:

const PUBLISHER_PATH = "stream-alice";
const SANDBOX_API_URL = "YOUR_SANDBOX_API_URL";

const response = await fetch(
  `${SANDBOX_API_URL}/moq/${PUBLISHER_PATH}/publisher`,
);
const { connection_url: publishUrl } = await response.json();

Connecting and publishing

Install the MoQ packages:

npm

npm install @moq/lite @moq/publish

Yarn

yarn add @moq/lite @moq/publish

pnpm

pnpm add @moq/lite @moq/publish

Bun

bun add @moq/lite @moq/publish

Use the connection URL to connect to the Fishjam MoQ relay and start broadcasting:

// Connect to the Fishjam MoQ relay using the publisher connection URL
const connection = await Moq.Connection.connect(new URL(publishUrl));

const camera = new Publish.Source.Camera({ enabled: true });
const microphone = new Publish.Source.Microphone({ enabled: true });

// Set up a broadcast with video and audio tracks
const broadcast = new Publish.Broadcast({
  connection,
  name: Moq.Path.from(PUBLISHER_PATH),
  enabled: true,
  video: {
    source: camera.source,
    hd: { enabled: true },
  },
  audio: {
    enabled: true,
    source: microphone.source,
  },
});

The stream is now live on the MoQ relay! Viewers can now start watching it — follow Web Subscribing.

Production with Server SDKs

The Quickstart gets you publishing quickly. In production, your backend generates tokens with proper authorization, so you control who can publish.

A publisher connection URL grants write access to a specific path. Generate one on your backend and deliver it to the broadcasting client:

TypeScript

import { FishjamClient } from '@fishjam-cloud/js-server-sdk';

const fishjamClient = new FishjamClient({
  fishjamId,
  managementToken,
});

const streamPath = 'stream-alice';

// Generate a connection URL that allows publishing to 'stream-alice'
const { connection_url: publishUrl } = await fishjamClient.createMoqAccess({
  publishPath: streamPath,
});

Python

from fishjam import FishjamClient

fishjam_client = FishjamClient(
  fishjam_id=fishjam_id,
  management_token=management_token,
)

stream_path = 'stream-alice'

# Generate a connection URL that allows publishing to 'stream-alice'
publish_url = fishjam_client.create_moq_access(publish_path=stream_path).connection_url

Deliver this connection URL to the broadcasting client, then use it to connect as described in Connecting and publishing.

See also

• Web Subscribing — watch a MoQ stream in the browser
• MoQ with Fishjam — how MoQ works in Fishjam
• Livestreaming — the WebRTC (WHIP/WHEP) approach
• WHIP/WHEP with Fishjam