Skip to main content

​
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

1
Install Packages
2
Install from npm:
3
npm
npm install @moq/watch @moq/publish
bun
bun add @moq/watch @moq/publish
yarn
yarn add @moq/watch @moq/publish
4
Import in Your HTML
5
Use ES modules to import the web components:
6
<script type="module">
  import "@moq/watch/element";
  import "@moq/publish/element";
</script>
7
If using a bundler like Vite or Webpack, the imports will be bundled automatically.
8
Use CDN (Optional)
9
For quick prototyping, use a CDN:
10
<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:
AttributeTypeDefaultDescription
urlstringrequiredRelay server URL
pathstringrequiredBroadcast path
pausedbooleanfalsePause playback
mutedbooleanfalseMute audio
volumenumber1Audio volume (0-1)
jitternumber100Jitter buffer size (ms)
reloadbooleanfalseAuto-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:
AttributeTypeDefaultDescription
urlstringrequiredRelay server URL
pathstringrequiredBroadcast path
sourcestring"camera"Source type: camera, screen, file
audiobooleanfalseEnable audio
videobooleanfalseEnable video
controlsbooleanfalseShow 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>

​
Screen Sharing

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

Build docs developers (and LLMs) love

Get started for freeTalk to us