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, wrapped in a container element, to your HTML page:
<div id="container">
<video id="video" width="640" height="360"></video>
</div>
Import components¶
PRESTOplay for web uses a modular component system. Import the components
you need before creating a player instance. For MPEG-DASH playback, import
the DASH component:
import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.dash";
Other components are available for additional streaming formats:
@castlabs/prestoplay/cl.hlsfor HLS@castlabs/prestoplay/cl.smoothfor Smooth Streaming@castlabs/prestoplay/cl.cryptofor 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:
import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.dash";
import "@castlabs/prestoplay/clpp.styles.css";
// Create the player
const videoEl = document.getElementById("video");
const containerEl = document.getElementById("container");
const player = new clpp.Player(videoEl, {
license: "your-license-key",
viewerId: "your-viewer-id",
}, { containerEl });
// Load content and start playback
await player.open({
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.open each time you want to play content.
The basic playback sample is a complete, runnable page that loads DASH and HLS streams. For more runnable samples, see the PRESTOplay web code samples repository.
Next, see Player basics for a simple UI example and common playback configuration options.
To load the SDK with script tags instead of a bundler, see Without a bundler.
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);