Skip to main content
Get started with the MoQ TypeScript SDK for real-time live media delivery.

​
Installation

Install the packages you need using your preferred package manager: 
npm install @moq/lite @moq/hang
For web components: 
npm install @moq/watch @moq/publish

​
Quick Start: Browser

Here’s a simple example to subscribe to a broadcast in the browser:
1

Import the library

import * as Connection from "@moq/lite/Connection";
import { Broadcast, Track } from "@moq/lite";
2

Connect to a relay

// Connect to a MoQ relay
const conn = await Connection.connect({
  url: "https://relay.quic.video",
  fingerprint: "https://relay.quic.video/fingerprint"
});
3

Subscribe to a broadcast

// Subscribe to a broadcast by name
const subscriber = await conn.subscribe("my-broadcast");

// Wait for tracks to be announced
const announced = await subscriber.announced();
if (!announced) throw new Error("broadcast closed");

console.log("Track announced:", announced.track.name);

// Subscribe to the track
const track = await subscriber.subscribe(announced.track);

// Read groups from the track
for await (const group of track.groups()) {
  console.log("Group sequence:", group.sequence);
  
  // Read frames from the group
  for await (const frame of group.frames()) {
    console.log("Frame size:", frame.byteLength);
    // Process frame data...
  }
}

​
Quick Start: Node.js

For Node.js environments, you need to use a WebTransport polyfill:
1

Install WebTransport polyfill

npm install @fails-components/webtransport @fails-components/webtransport-transport-http3-quiche
2

Import and configure

import { WebTransport } from "@fails-components/webtransport";
import * as Connection from "@moq/lite/Connection";

// Make WebTransport available globally
globalThis.WebTransport = WebTransport as any;

const conn = await Connection.connect({
  url: "https://relay.quic.video",
  fingerprint: "https://relay.quic.video/fingerprint"
});

// Now use the connection as normal
const subscriber = await conn.subscribe("my-broadcast");

​
Using Web Components

For the easiest integration, use the Web Components:
1

Import the element

import "@moq/watch/element";
2

Add to your HTML

<moq-watch 
  url="https://relay.quic.video"
  fingerprint="https://relay.quic.video/fingerprint"
  broadcast="my-broadcast">
</moq-watch>
See the Watch and Publish documentation for more details.

​
Next Steps

Core Protocol

Learn about Connection, Broadcast, Track, and Group APIs

Media Handling

Work with WebCodecs, catalogs, and containers

Watch Streams

Subscribe to and display live streams

Publish Streams

Publish media from camera or screen

​
Authentication

Most MoQ relays require JWT authentication. Use @moq/token to generate tokens: 
import { generateToken } from "@moq/token";

const token = await generateToken({
  key: privateKey,
  audience: "https://relay.quic.video",
  subject: "my-broadcast",
  role: "subscriber" // or "publisher"
});

const conn = await Connection.connect({
  url: "https://relay.quic.video",
  fingerprint: "https://relay.quic.video/fingerprint",
  token: token
});

​
TypeScript Support

All packages are written in TypeScript with full type definitions. Your IDE will provide autocompletion and type checking out of the box. 
import type { Track, Group } from "@moq/lite";
import type { Catalog } from "@moq/hang/catalog";

Build docs developers (and LLMs) love

Get started for freeTalk to us