mmaloon/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.

• API Docs
• Quickstart and Examples
• Common Issues

We want your feedback! Email [email protected] with suggested improvements, feature requests and general feedback, or feel free to open a GitHub issue. If you need technical support, contact [email protected].

Installation

NPM

npm install twilio-video --save

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

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

Bower

bower install twilio-video --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/v1/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.