Skip to main content

Vanilla JS SDK — Getting Started

Use the SDK directly from the browser — no framework, no build step. The @video/video-client-core client loads from a CDN via an import map, and you attach video to plain DOM elements. This guide gets you to a working broadcaster and viewer in under 10 minutes.

Prerequisites

Grab these from your account before you start:

  • An authentication token (JWT) — a broadcaster token to stream, a viewer token to watch.
  • A stream key for your stream.
  • Your backend endpoint, e.g. https://your-subdomain.example.com.

1. Load the client​

No installation required — load the core client from the CDN with an import map. (Prefer a bundler? npm install @video/video-client-core and import the same names.)

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
  {
    "imports": {
      "vdc-cdn": "https://cdn.example.com/video-client-core/14.0.0/index.js"
    }
  }
  </script>
</head>
<body>
  <script type="module">
    import { createCall } from 'vdc-cdn';
    // Your code here
  </script>
</body>
</html>

2. Broadcast your camera​

Initialize the media controller, attach a preview, and start a broadcast on a button click:

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
  {
    "imports": {
      "vdc-cdn": "https://cdn.example.com/video-client-core/14.0.0/index.js"
    }
  }
  </script>
</head>
<body>
  <div id="preview"></div>
  <button id="startBtn">Start Broadcasting</button>
  <button id="stopBtn" style="display:none">Stop Broadcasting</button>

  <script type="module">
    import {
      createCall,
      BaseAuthClient,
      mediaController,
      requestPlayer
    } from 'vdc-cdn';

    let call, broadcast;

    const authClient = new BaseAuthClient('your-broadcaster-token');

    // Initialize camera and show a local preview
    await mediaController.init();
    const mediaStreamController = await mediaController.requestController();

    const previewPlayer = await requestPlayer({ mediaStreamController, muted: true });
    const preview = document.createElement('video');
    document.getElementById('preview').appendChild(preview);
    previewPlayer.attach(preview);

    document.getElementById('startBtn').onclick = async () => {
      call = await createCall({
        streamKey: 'your-stream-key',
        backendEndpoints: ['https://your-subdomain.example.com'],
        auth: authClient,
        user: { userId: 'user-1', displayName: 'Broadcaster' }
      });

      broadcast = await call.broadcast(mediaStreamController, { streamName: 'default' });

      console.log('Share this call ID with your viewer:', call.id);

      document.getElementById('startBtn').style.display = 'none';
      document.getElementById('stopBtn').style.display = 'block';
    };

    document.getElementById('stopBtn').onclick = async () => {
      await broadcast?.dispose();
      await call?.dispose();
      document.getElementById('startBtn').style.display = 'block';
      document.getElementById('stopBtn').style.display = 'none';
    };
  </script>
</body>
</html>

That's a working broadcaster with camera preview and start/stop controls.

3. Watch the stream​

A viewer creates a player for the broadcaster's call ID and attaches it to a <video> element. Grab the value the broadcaster logged to the console in step 2 (call.id) and pass it here as callId in place of the placeholder:

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
  {
    "imports": {
      "vdc-cdn": "https://cdn.example.com/video-client-core/14.0.0/index.js"
    }
  }
  </script>
</head>
<body>
  <div id="player"></div>

  <script type="module">
    import { createPlayer, BaseAuthClient } from 'vdc-cdn';

    const authClient = new BaseAuthClient('your-viewer-token');

    const player = await createPlayer({
      callId: 'call-id-from-broadcaster',
      streamName: 'default',
      backendEndpoints: ['https://your-subdomain.example.com'],
      auth: authClient
    });

    const video = document.createElement('video');
    video.controls = true;
    document.getElementById('player').appendChild(video);
    player.attach(video);
  </script>
</body>
</html>

You now have a broadcaster and a viewer watching with sub-second latency.

Next steps​