Web Components

Moq provides native web components that work in any HTML page without requiring a JavaScript framework. Simply include the script and start watching or publishing streams.

Quick Start

Watch a Stream

Add this to any HTML page:

<!DOCTYPE html>
<html>
<head>
  <title>Watch Moq Stream</title>
</head>
<body>
  <script type="module">
    import "@moq/watch/element";
  </script>

  <moq-watch
    url="https://cdn.moq.dev/anon"
    path="bbb"
    controls>
    <canvas style="width: 100%; height: auto;"></canvas>
  </moq-watch>
</body>
</html>

Publish a Stream

Publish from your webcam:

<!DOCTYPE html>
<html>
<head>
  <title>Publish Moq Stream</title>
</head>
<body>
  <script type="module">
    import "@moq/publish/element";
  </script>

  <moq-publish
    url="https://cdn.moq.dev/anon"
    path="my-stream"
    audio
    video
    controls>
    <video muted autoplay style="width: 100%; height: auto;"></video>
  </moq-publish>
</body>
</html>

Installation

Install Packages

Install from npm:

npm

npm install @moq/watch @moq/publish

bun

bun add @moq/watch @moq/publish

yarn

yarn add @moq/watch @moq/publish

Import in Your HTML

Use ES modules to import the web components:

<script type="module">
  import "@moq/watch/element";
  import "@moq/publish/element";
</script>

If using a bundler like Vite or Webpack, the imports will be bundled automatically.

Use CDN (Optional)

For quick prototyping, use a CDN:

<script type="module">
  import "https://cdn.jsdelivr.net/npm/@moq/watch@latest/element.js";
</script>

moq-watch Component

Basic Usage

The simplest player:

<moq-watch url="https://relay.example.com/anon" path="stream">
  <canvas></canvas>
</moq-watch>

Attributes

Configure playback using HTML attributes:

Attribute	Type	Default	Description
`url`	string	required	Relay server URL
`path`	string	required	Broadcast path
`paused`	boolean	`false`	Pause playback
`muted`	boolean	`false`	Mute audio
`volume`	number	`1`	Audio volume (0-1)
`jitter`	number	`100`	Jitter buffer size (ms)
`reload`	boolean	`false`	Auto-reconnect on disconnect

Example with Attributes

<moq-watch
  url="https://relay.example.com/anon"
  path="live-stream"
  muted
  volume="0.8"
  jitter="200"
  reload>
  <canvas style="width: 100%; max-width: 1280px; height: auto;"></canvas>
</moq-watch>

With UI Controls

Add a user interface with playback controls:

<script type="module">
  import "@moq/watch/element";
  import "@moq/watch/ui";
</script>

<moq-watch-ui>
  <moq-watch url="https://relay.example.com/anon" path="stream">
    <canvas></canvas>
  </moq-watch>
</moq-watch-ui>

The <moq-watch-ui> component provides:

Play/pause controls
Volume slider
Buffering indicator
Quality selector
Stats panel

JavaScript API

Control the player programmatically:

<moq-watch id="player" url="https://relay.example.com/anon" path="stream">
  <canvas></canvas>
</moq-watch>

<button onclick="togglePlay()">Play/Pause</button>
<button onclick="toggleMute()">Mute/Unmute</button>

<script>
  const player = document.getElementById('player');

  function togglePlay() {
    const isPaused = player.getAttribute('paused') !== null;
    if (isPaused) {
      player.removeAttribute('paused');
    } else {
      player.setAttribute('paused', '');
    }
  }

  function toggleMute() {
    const isMuted = player.getAttribute('muted') !== null;
    if (isMuted) {
      player.removeAttribute('muted');
    } else {
      player.setAttribute('muted', '');
    }
  }
</script>

moq-publish Component

Basic Usage

Publish from camera and microphone:

<moq-publish
  url="https://relay.example.com/anon"
  path="my-stream"
  audio
  video>
  <video muted autoplay></video>
</moq-publish>

Attributes

Configure publishing:

Attribute	Type	Default	Description
`url`	string	required	Relay server URL
`path`	string	required	Broadcast path
`source`	string	`"camera"`	Source type: `camera`, `screen`, `file`
`audio`	boolean	`false`	Enable audio
`video`	boolean	`false`	Enable video
`controls`	boolean	`false`	Show basic controls

Example with Attributes

<moq-publish
  url="https://relay.example.com/anon"
  path="my-stream"
  source="camera"
  audio
  video
  controls>
  <video muted autoplay style="width: 100%; border-radius: 8px;"></video>
</moq-publish>

Publish screen capture:

<moq-publish
  url="https://relay.example.com/anon"
  path="screen-share"
  source="screen"
  video>
  <video muted autoplay></video>
</moq-publish>

With UI Controls

Add source selection and configuration UI:

<script type="module">
  import "@moq/publish/element";
  import "@moq/publish/ui";
</script>

<moq-publish-ui>
  <moq-publish
    url="https://relay.example.com/anon"
    path="my-stream"
    audio
    video>
    <video muted autoplay></video>
  </moq-publish>
</moq-publish-ui>

The <moq-publish-ui> component provides:

Source selection (camera, screen, file)
Device selection
Audio/video toggles
Status indicator

Complete Example

A full page with both publishing and watching:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moq Demo</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 20px;
    }
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
    canvas, video {
      width: 100%;
      height: auto;
      border-radius: 8px;
      background: #000;
    }
  </style>
</head>
<body>
  <h1>Moq Web Components Demo</h1>

  <div class="container">
    <!-- Publisher -->
    <div>
      <h2>Publish</h2>
      <moq-publish-ui>
        <moq-publish
          url="https://relay.example.com/anon"
          path="demo"
          audio
          video>
          <video muted autoplay></video>
        </moq-publish>
      </moq-publish-ui>
    </div>

    <!-- Viewer -->
    <div>
      <h2>Watch</h2>
      <moq-watch-ui>
        <moq-watch
          url="https://relay.example.com/anon"
          path="demo"
          muted
          reload>
          <canvas></canvas>
        </moq-watch>
      </moq-watch-ui>
    </div>
  </div>

  <script type="module">
    import "@moq/watch/element";
    import "@moq/watch/ui";
    import "@moq/publish/element";
    import "@moq/publish/ui";
  </script>
</body>
</html>

Browser Support

Moq web components require:

WebTransport: Chrome 97+, Edge 97+
WebCodecs: Chrome 94+, Edge 94+
Web Components: All modern browsers

Firefox does not yet support WebTransport or WebCodecs. Use Chrome, Edge, or other Chromium-based browsers.

Authentication

For authenticated relays, append the JWT token to the URL:

<moq-watch
  url="https://relay.example.com/room/123?jwt=<token>"
  path="stream">
  <canvas></canvas>
</moq-watch>

See the Authentication guide for generating JWT tokens.

Styling

Style the components using CSS:

<style>
  moq-watch {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  moq-watch canvas {
    width: 100%;
    height: auto;
    display: block;
  }
</style>

<moq-watch url="..." path="...">
  <canvas></canvas>
</moq-watch>

Next Steps

React Integration

Use Moq in React applications

Vue Integration

Use Moq in Vue.js applications

JavaScript API

Advanced programmatic control

Authentication

Secure your streams

​Web Components

​Quick Start

​Watch a Stream

​Publish a Stream

​Installation

​moq-watch Component

​Basic Usage

​Attributes

​Example with Attributes

​With UI Controls

​JavaScript API

​moq-publish Component

​Basic Usage

​Attributes

​Example with Attributes

​Screen Sharing

​With UI Controls

​Complete Example

​Browser Support

​Authentication

​Styling

​Next Steps

React Integration

Vue Integration

JavaScript API

Authentication

Web Components

Quick Start

Watch a Stream

Publish a Stream

Installation

moq-watch Component

Basic Usage

Attributes

Example with Attributes

With UI Controls

JavaScript API

moq-publish Component

Basic Usage

Attributes

Example with Attributes

Screen Sharing

With UI Controls

Complete Example

Browser Support

Authentication

Styling

Next Steps