Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new Fishjam documentation tutorial for MoQ streaming, introducing a docs path parallel to the existing livestreaming guides and showing how to move from sandbox prototyping to production token management.
Changes:
- Adds a new
MoQ Streamingtutorial page underdocs/tutorials. - Documents sandbox-based publisher/subscriber token flows and client-side publish/subscribe examples with the MoQ web packages.
- Adds production examples for generating MoQ tokens with the TypeScript and Python server SDKs, including namespace subscription discovery.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| This section explains how to publish and subscribe to live streams using [Media over QUIC (MoQ)](https://datatracker.ietf.org/wg/moq/about/) with Fishjam. | ||
| MoQ uses QUIC as its transport layer (with a WebSocket fallback), delivering ultra-low latency at scale — making it ideal for interactive broadcasts, live events, and large-audience streams. | ||
|
|
||
| Before diving into the tutorial, we recommend getting familiar with the [MoQ protocol concepts](https://datatracker.ietf.org/wg/moq/about/). |
There was a problem hiding this comment.
suggestion: This could be an admonition like :::info and I would phrase it more like:
If you're new to MoQ, then we recommend getting familiar with its [basic concepts](link to blog)
Apart from that, we should add a short TL;DR section defining publishers, subscribers, relays and namespaces. The admonition could mention this section as a more surface-level walkthrough
| See [Livestreaming](./livestreaming) for the WebRTC approach. | ||
| ::: | ||
|
|
||
| ## Quickstart with Sandbox API |
There was a problem hiding this comment.
nitpick:
| ## Quickstart with Sandbox API | |
| ## Quickstart with the Sandbox API |
| :::info | ||
| Fishjam supports both WebRTC-based livestreaming (WHIP/WHEP) and MoQ streaming. \ | ||
| **MoQ** is a new protocol designed from the ground up for scalable, low-latency delivery to large audiences.\ | ||
| **WebRTC** is a mature, battle-tested technology with native browser support, built for low-latency conferencing and interactive streaming. |
There was a problem hiding this comment.
nitpick: MoQ and WebRTC have the same level of native browser support
| **WebRTC** is a mature, battle-tested technology with native browser support, built for low-latency conferencing and interactive streaming. | |
| **WebRTC** is a mature, battle-tested technology built for low-latency peer-to-peer conferencing and interactive streaming. |
|
|
||
| ## Quickstart with Sandbox API | ||
|
|
||
| If you don't have a backend server set up, you can prototype a MoQ streaming scenario using the Sandbox API provided by the Room Manager. |
There was a problem hiding this comment.
issue:
| If you don't have a backend server set up, you can prototype a MoQ streaming scenario using the Sandbox API provided by the Room Manager. | |
| If you don't have a backend server set up, you can prototype a MoQ streaming scenario using the Sandbox API. |
|
|
||
| #### Obtaining a publisher token | ||
|
|
||
| Fetch a sandbox publisher token from the Room Manager: |
There was a problem hiding this comment.
suggestion:
| Fetch a sandbox publisher token from the Room Manager: | |
| Fetch a sandbox publisher token using the Sandbox API: |
| element: canvas, | ||
| broadcast, | ||
| paused: false, | ||
| }); |
There was a problem hiding this comment.
suggestion: We could demonstrate usage of the moq player component here below or maybe a react component that wraps this logic
|
|
||
| :::tip | ||
| A single token should only grant either `publishPath` _or_ `subscribePath` — not both. | ||
| Broadcast clients receive a publisher token; viewers receive a subscriber token. |
There was a problem hiding this comment.
suggestion: "Broadcast client" sounds like a viewer
| Broadcast clients receive a publisher token; viewers receive a subscriber token. | |
| Streamers receive a publisher token; viewers receive a subscriber token. |
|
|
||
| const roomName = 'my-room'; | ||
| // Publishers under this namespace might use paths like: | ||
| // 'my-room/alice-camera', 'my-room/bob-screen', etc. |
There was a problem hiding this comment.
suggestion: For clarity, let's make this comment actual code
| import * as Moq from "@moq/lite"; | ||
| import * as Watch from "@moq/watch"; |
There was a problem hiding this comment.
suggestion: We could mention that we suggest using the @moq/... libraries with some links to resources about them
| - [MoQ IETF Working Group](https://datatracker.ietf.org/wg/moq/about/) | ||
| - Blog Post etc. | ||
|
|
||
| If you need a different streaming approach, see: |
There was a problem hiding this comment.
suggestion:
| If you need a different streaming approach, see: | |
| If you want to learn about streaming using WebRTC instead of MoQ, see: |
Description
This PR adds a "MoQ Streaming" tutorial that shows how you can use the MoQ protocol with Fishjam.
It shows how to:
There are missing links because we don't have a blog post or concept section that this tutorial could reference.
Let me also know whether you think we should add a concept section about the MoQ protocol to our docs or stick to the blog post alone.