Options
All
  • Public
  • Public/Protected
  • All
Menu

@twilio/player-sdk - v1.0.0-preview.6

twilio-player.js

CircleCI

The Twilio Player SDK allows you to play back a live stream of a Video Room. Please take a look at the SDK documentation here.

Installing the SDK

NPM

You can install the SDK as a dependency of your app by running the following command:

npm install twilio/twilio-player.js#1.0.0-preview.3

You can now import the SDK to your project as shown below:

TypeScript or ES Modules

import { Player } from '@twilio/player-sdk';

CommonJS

const { Player } = require('@twilio/player-sdk');

<script> tag

You can download twilio-player.min.js by going here and clicking on the Raw button. Once you include it in a <script> tag, you can access the SDK APIs in window scope as shown below:

const Player = Twilio.Player;

Live Streaming a Video Room

Please refer to the Programmable Media guide for starting a live stream of a Video Room from your application server. At the end, you will have an AccessToken which you can use to join the live stream.

Quickstart

The Player Quickstart app allows you to join a live stream, and demonstrates the main features of the SDK. In order to run it, first, clone the repository by running:

git clone https://github.com/twilio/twilio-player.js.git

Next, install the dependencies by running:

cd twilio-player.js
npm install

Next, build the SDK by running:

npm run build

Next, build the Quickstart by running:

npm run build:quickstart

Finally, start the app server by running:

npm run quickstart

You're all set! You can run the app using the following URL:

http://localhost:3000/?accessToken=<TOKEN>

where <TOKEN> is the AccessToken you created after starting a live stream of a Room as described in this section.

Checking for Browser Support

You can check whether the SDK supports the browser on which the application is running as shown below:

import { Player } from '@twilio/player-sdk';

if (Player.isSupported) {
  /* Load your application */
} else {
  /* Inform the user that the browser is not supported */
}

Joining a Live Stream

You can now join the live stream from your application using the AccessToken as shown below:

import { Player } from '@twilio/player-sdk';

const {
  host,
  protocol,
} = window.location;

// Join a live stream.
const player = await Player.connect('$accessToken', {
  playerWasmAssetsPath: `${protocol}//${host}/path/to/hosted/player/assets`,
});

In order for the SDK to run, your application must host the following artifacts which are available in node_modules/@twilio/player-sdk/dist/build:

  • twilio-player-wasmworker-x-y-z.min.wasm
  • twilio-player-wasmworker-x-y-z.min.js

where x.y.z is the version of the SDK assets.

Live Stream Playback

You can perform the following playback actions on the live stream:

// Start playback.
player.play();

// Pause playback.
player.pause();

// Mute audio.
player.isMuted = true;

// Unmute audio.
player.isMuted = false;

// Set volume.
player.setVolume(0.5);

Rendering the Live Stream

In order to render the live stream, you can use the default HTMLVideoElement created by the Player in your application as shown below:

const container = document.querySelector('div#container');
container.appendChild(player.videoElement);

Alternatively, if you want to render the live stream in your own HTMLVideoElement, you can do so as shown below:

const videoElement = document.querySelector('div#container > video');
player.attach(videoElement);

Disconnecting from the Live Stream

You can disconnect from the live stream as shown below:

player.disconnect();

This is a terminal operation on the Player, which is no longer useful to the application.

Generated using TypeDoc