Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CeeblueTV/wrts-client/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through everything needed to embed a live WebRTS stream in a web page — from installing the package to watching video play in the browser. By the end you will have a working player that connects to a Ceeblue Cloud stream endpoint, buffers automatically at the live edge, and reports start and stop events to your application.
Prerequisites: You need a Ceeblue account and an active stream before running this guide. Sign up for a free trial at https://ceeblue.net/free-trial/ and manage your streams at https://dashboard.ceeblue.tv.
1

Install the library

Add @ceeblue/wrts-client to your project using your preferred package manager.
npm install @ceeblue/wrts-client
The package requires Node.js ≥ 16 and npm ≥ 7. It ships as an ES module with full TypeScript definitions included.
2

Get a stream endpoint

You need a WRTS endpoint URL to pass to the player. This is a JSON manifest URL in the form:
https://<hostname>/wrts/out+<stream-id>/index.json
To obtain it from the Ceeblue Dashboard:
  1. Log in to https://dashboard.ceeblue.tv.
  2. Open your stream and navigate to the Outputs section.
  3. Create a WRTS output (or locate an existing one).
  4. Click the Viewer eye 👁 button next to the output — the WRTS endpoint URL is displayed and can be copied directly.
Keep this URL handy; you will pass it to player.start() in the next steps.
3

Add an HTML video element

The player renders into a standard <video> element. Add one to your HTML and give it an id so JavaScript can find it. The autoplay and playsinline attributes are recommended for live streams.
<video id="video" autoplay playsinline></video>
On iOS Safari, playsinline is required for inline playback. Without it the browser will open the native full-screen player, which does not support ManagedMediaSource.
4

Import and start the player

Import the Player class, attach it to the video element, wire up the lifecycle callbacks, and call player.start() with your endpoint URL.
import { Player } from '@ceeblue/wrts-client';

const video = document.getElementById('video');
const player = new Player(video);

player.onStart = () => {
  console.log('Playback started');
};

player.onStop = (error) => {
  if (error) console.error('Stopped with error:', error);
  else console.log('Stopped normally');
};

player.start({
  endPoint: 'https://<hostname>/wrts/out+<stream-id>/index.json'
});
Replace https://<hostname>/wrts/out+<stream-id>/index.json with the endpoint URL you copied from the Dashboard. The Player constructor accepts the video element as its first argument and an optional custom Source class as its second argument — omitting the second argument selects the default HTTPAdaptiveSource.The onStart callback fires once the player has buffered enough data and video begins playing. The onStop callback fires whenever playback ends, either normally or due to an error. If error is defined it is a typed PlayerError object whose name field describes the cause (for example 'Data timeout' or 'Start timeout').
5

Stop playback

Call player.stop() at any time to tear down the session cleanly. This closes the network connection, releases the MediaSource, and fires onStop without an error argument.
player.stop();
You can call player.start() again after stopping to begin a new session, including against a different endpoint.

​
Using the browser bundle

If you are not using a bundler or module system, load the prebuilt browser bundle directly with a <script type="module"> tag. The bundle is the browser entry point declared in package.json (dist/wrts-client.bundle.js) and includes all dependencies. 
<script type="module">
  import { Player } from './dist/wrts-client.bundle.js';

  const video = document.getElementById('video');
  const player = new Player(video);

  player.onStart = () => console.log('Playback started');
  player.onStop = (error) => {
    if (error) console.error('Stopped with error:', error);
    else console.log('Stopped normally');
  };

  player.start({
    endPoint: 'https://<hostname>/wrts/out+<stream-id>/index.json'
  });
</script>
The bundle approach is used in the official player.html example. Adjust the path to wrts-client.bundle.js to match where you placed the file in your project.

​
TypeScript configuration

If your project uses TypeScript, align your compiler settings with the library’s ES6 target to ensure imports resolve correctly and the build succeeds. 
{
  "compilerOptions": {
    "target": "ES6",
    "moduleResolution": "Node"
  }
}
Setting "target": "ES6" matches the library’s own compilation target. Setting "moduleResolution": "Node" ensures TypeScript follows Node.js module resolution rules, which is required to locate the @ceeblue/wrts-client package and its dependencies.
If you need a UMD-compatible build (for example, for a legacy bundler or environment that does not support ES modules), the library does not ship one from npm. You can produce one by cloning the repository and running npm run build:iife. See the Installation guide for full build instructions.
To run the bundled example locally without a build step, serve the project directory with a static HTTP server:
npx http-server . -p 8081
Then open http://localhost:8081/examples/player.html in your browser. The example includes track selection, adaptive frame skipping controls, DRM configuration, and a live metrics graph.
Now that you have a working player, explore these guides to go further:

Build docs developers (and LLMs) love

Get started for freeTalk to us