TypeScript Libraries
The TypeScript implementation brings MoQ to web browsers using modern APIs like WebTransport and WebCodecs.
Core Libraries
@moq/lite
Core pub/sub transport protocol for browsers. Implements the moq-lite specification.
Features:
- WebTransport-based QUIC
- Broadcasts, tracks, groups, frames
- Browser and server-side support (with polyfill)
@moq/hang
High-level media library with Web Components for streaming audio and video.
Features:
- Web Components (easiest integration)
- JavaScript API for advanced use
- WebCodecs-based encoding/decoding
- Reactive state management
Media Packages
@moq/watch
Subscribe to and render MoQ broadcasts. Includes both a JavaScript API and a <moq-watch> Web Component, plus an optional <moq-watch-ui> SolidJS overlay.
@moq/publish
Publish media to MoQ broadcasts. Includes both a JavaScript API and a <moq-publish> Web Component, plus an optional <moq-publish-ui> SolidJS overlay.
@moq/ui-core
Shared UI primitives (Button, Icon, Stats, CSS theme) used by @moq/watch/ui and @moq/publish/ui.
Utilities
@moq/signals
Reactive signals library used by hang for state management.
@moq/clock
Clock utilities for timestamp synchronization.
@moq/token
JWT token generation and verification for browsers.
Installation
bun add @moq/lite
bun add @moq/watch
bun add @moq/publish
# or with other package managers
npm add @moq/lite
npm add @moq/watch
npm add @moq/publishQuick Start
Using Web Components
The easiest way to add MoQ to your web page:
<!DOCTYPE html>
<html>
<head>
<script type="module">
import "@moq/publish/element";
import "@moq/watch/element";
</script>
</head>
<body>
<!-- Publish camera/microphone -->
<moq-publish
url="https://relay.example.com/anon"
name="room/alice"
audio video controls>
<video muted autoplay></video>
</moq-publish>
<!-- Watch the stream -->
<moq-watch
url="https://relay.example.com/anon"
name="room/alice"
controls>
<canvas></canvas>
</moq-watch>
</body>
</html>Learn more about Web Components
Using JavaScript API
For more control, use the JavaScript API directly. See the js/lite/examples/ directory for working examples of connecting, publishing, subscribing, and discovery.
Browser Compatibility
Requires modern browser features:
- WebTransport - Chromium-based browsers (Chrome, Edge, Brave)
- WebCodecs - For media encoding/decoding
- WebAudio - For audio playback
Supported browsers:
- Chrome 97+
- Edge 97+
- Brave (recent versions)
Experimental support:
- Firefox (behind flag)
- Safari (future support planned)
Framework Integration
The reactive API works with popular frameworks:
- React — See
js/signals/src/react.tsforuseValueanduseSignalhooks - SolidJS — See
js/signals/src/solid.tsforcreateAccessorandcreatePairhelpers
Use @moq/watch/ui and @moq/publish/ui for ready-made SolidJS UI overlays.
Demo Application
Check out the demo for complete examples:
- Video conferencing
- Screen sharing
- Text chat
- Quality selection
Next Steps
- Explore @moq/lite - Core protocol
- Explore @moq/hang - Media library
- Learn about Web Components
- View code examples