rapito / twilio-video.js

Twilio Video JavaScript library

twilio-video.js

twilio-video.js allows you to add real-time voice and video to your web apps.

Note that this is a beta release. You may encounter bugs and instability, and the APIs available in this release may change in subsequent releases.

We want your feedback! Email Rob Brazier, Product Manager for Programmable Video at [email protected] with suggested improvements, feature requests and general feedback. If you need technical support, contact [email protected].

Installation

NPM

npm install twilio-video@beta --save

Using this method, you can require twilio-video.js like so:

const Video = require('twilio-video');

Bower

Until we release twilio-video.js 1.0.0 proper, you must specify a specific pre-release. For example,

bower install twilio-video#1.0.0-beta5 --save

CDN

Releases of twilio-video.js are hosted on a CDN, and you can include these directly in your web app using a <script> tag.

<script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta5/twilio-video.min.js"></script>

Using this method, twilio-video.js will set a browser global:

const Video = Twilio.Video;

Usage

The following is a simple example showing a Client connecting to a Room. For more information, refer to the API Docs.

const Video = require('twilio-video');

Video.connect('$TOKEN', { name: 'room-name' }).then(room => {
  console.log('Connected to Room "%s"', room.name);

  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);

  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', error => room.participants.forEach(participantDisconnected));
});

function participantConnected(participant) {
  console.log('Participant "%s" connected', participant.identity);

  const div = document.createElement('div');
  div.id = participant.sid;
  div.innerText = participant.identity;

  participant.on('trackAdded', track => trackAdded(div, track));
  participant.tracks.forEach(track => trackAdded(div, track));
  participant.on('trackRemoved', trackRemoved);

  document.body.appendChild(div);
}

function participantDisconnected(participant) {
  console.log('Participant "%s" disconnected', participant.identity);

  participant.tracks.forEach(trackRemoved);
  document.getElementById(participant.sid).remove();
}

function trackAdded(div, track) {
  div.appendChild(track.attach());
}

function trackRemoved(track) {
  track.detach().forEach(element => element.remove());
}

Changelog

See CHANGELOG.md.

License

See LICENSE.md.

Building

Fork and clone the repository. Then, install dependencies with

npm install

Then run the build script:

npm run build

The builds and docs will be placed in the dist/ directory.

Contributing

Bug fixes welcome! If you're not familiar with the GitHub pull request/contribution process, this is a nice tutorial.