MOQ Web

A browser-based implementation of Media over QUIC Transport (MOQT) for real-time media streaming. Built on WebTransport and WebCodecs for low-latency video/audio delivery.

Quick Start

1. Install pnpm (if not installed):

   npm install -g pnpm

2. Install dependencies:

   pnpm install

3. Generate certificates for local WebTransport:

   ./scripts/create_server_cert.sh

4. Build and run:

   pnpm build
   pnpm dev

5. Open https://localhost:5173

Note: You need a MOQT relay server to connect to. Enable "Local Development" in settings to use self-signed certificates.

Protocol Support

Draft	Status	Notes
Draft-16	Default	Full support
Draft-15	Included with Draft-16	ALPN negotiation
Draft-14	Build-time flag	Full support

Build for draft-14:

pnpm build:draft-14
pnpm dev:draft-14

Architecture

┌─────────────────────────────────────────┐
│              Browser                     │
│  ┌───────────────────────────────────┐  │
│  │         @web-moq/client           │  │
│  │        (React UI App)             │  │
│  └─────────────┬─────────────────────┘  │
│                │                         │
│  ┌─────────────▼─────────────────────┐  │
│  │         @web-moq/media            │  │
│  │   (WebCodecs, LOC, Pipelines)     │  │
│  └─────────────┬─────────────────────┘  │
│                │                         │
│  ┌─────────────▼─────────────────────┐  │
│  │        @web-moq/session           │  │
│  │    (Protocol, Subscriptions)      │  │
│  └─────────────┬─────────────────────┘  │
│                │                         │
│  ┌─────────────▼─────────────────────┐  │
│  │         @web-moq/core             │  │
│  │   (Types, Codecs, Transport)      │  │
│  └───────────────────────────────────┘  │
└──────────────────┬──────────────────────┘
                   │ WebTransport
                   ▼
            ┌────────────┐
            │ MOQT Relay │
            └────────────┘

For detailed design documentation, see docs/design.md.

Project Structure

packages/
├── core       # Protocol types, encoding, state machines, transport
├── session    # MOQT session management, subscriptions, publications
├── media      # WebCodecs, LOC container, media pipelines
└── client     # React web application

Prerequisites

• Node.js 20+
• pnpm (npm install -g pnpm)

Test

pnpm test              # Run all tests
pnpm test:draft-14     # Test with draft-14

License

This project is licensed under BSD-2-Clause.