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.
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:
import { Player } from '@twilio/player-sdk';
const { Player } = require('@twilio/player-sdk');
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;
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.
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.
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 */
}
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.
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);
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);
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