Getting started¶

This guide walks you through adding PRESTOplay for web to your project, initializing the player, and playing your first stream.

Prerequisites¶

A Castlabs license key (create one at https://downloads.castlabs.com)

Install the SDK¶

Install via NPM:

npm install @castlabs/prestoplay

Set up the page¶

Add a <video> element to your HTML page. If you’re loading modules via script tags instead of a bundler, include the SDK scripts in the <head>:

<html>
  <head>
    <script src="node_modules/@castlabs/prestoplay/cjs/cl.core.js"></script>
    <script src="node_modules/@castlabs/prestoplay/cjs/cl.mse.js"></script>
    <script src="node_modules/@castlabs/prestoplay/cjs/cl.dash.js"></script>
  </head>
  <body>
    <video id="video" width="640" height="360"></video>
  </body>
</html>

Install components¶

PRESTOplay for web uses a modular component system. You must install the components you need before creating a player instance. For MPEG-DASH playback, install the DASH component:

clpp.install(clpp.dash.DashComponent);

Other components are available for additional streaming formats:

clpp.hls.HlsComponent for HLS
clpp.smooth.SmoothComponent for Smooth Streaming
clpp.crypto.CryptoComponent for HLS with AES-128

Create the player and start playback¶

Create a Player instance with your license key and a viewer ID, then load a stream:

// Install components
clpp.install(clpp.dash.DashComponent);

// Create the player
const player = new clpp.Player("video", {
  license: "your-license-key",
  viewerId: "your-viewer-id",
});

// Load content and start playback
player.load({
  source: "https://demo.cf.castlabs.com/media/prestodash/Manifest.mpd",
  autoplay: true,
  muted: true,
});

The license and viewerId are set once when creating the player. The source is passed to Player.load each time you want to play content.

Next, see Player basics for a simple UI example and common playback configuration options.

Using ES modules¶

When using a bundler, import the SDK and components as ES modules:

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.dash";
import "@castlabs/prestoplay/clpp.styles.css";

clpp.install(clpp.dash.DashComponent);

const player = new clpp.Player("video", {
  license: "your-license-key",
  viewerId: "your-viewer-id",
});

await player.load({
  source: "https://demo.cf.castlabs.com/media/prestodash/Manifest.mpd",
  autoplay: true,
  muted: true,
});

Debugging¶

Enable SDK logs to diagnose playback issues:

// Info-level logs
clpp.log.setLogLevel(clpp.log.Level.INFO);

// Full verbose logs
clpp.log.setLogLevel(clpp.log.Level.DEBUG);

Next topic: Player basics

Previous topic: PRESTOplay for web