twilio-video.js

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

• API Docs
• Best Practices Guide
• Common Issues
• Quickstart and Examples
• React-based Multi-party Video App

For bug reports, feature feedback, and support options, see Community Contributions and Support.

Changelog

View CHANGELOG.md for details about our releases.

Browser Support

	Windows	macOS	Linux	iOS	Android
Chrome	✓	✓	✓	✓	✓
Edge	✓	✓	-	✓	-
Safari	-	✓	-	✓	-
Firefox	✓	✓	✓	-	✓
Samsung Internet	-	-	-	-	✓
WebView	-	-	-	✓	-

Installation

NPM

npm install twilio-video --save

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

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

TypeScript definitions can now be imported using this method.

import * as Video from 'twilio-video';

function participantDisconnected(participant: Video.RemoteParticipant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}

Alternatively, you can import just the definitions you need like so:

import { RemoteParticipant } from 'twilio-video';

function participantDisconnected(participant: RemoteParticipant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}

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="//sdk.twilio.com/js/video/releases/2.36.1/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 for 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('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });

  document.body.appendChild(div);
}

function participantDisconnected(participant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}

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

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

Content Security Policy (CSP)

Want to enable CSP in a way that's compatible with twilio-video.js? Use the following policy directives:

connect-src wss://global.vss.twilio.com wss://sdkgw.us1.twilio.com
media-src mediastream:

If you're loading twilio-video.js from sdk.twilio.com, you should also include the following script-src directive:

script-src https://sdk.twilio.com

If you are enabling Krisp Noise Cancellation for your local audio, and you are using the following default-src self directive, you should also add the unsafe-eval directive:

default-src self unsafe-eval

Keep in mind, you may need to merge these policy directives with your own if you're using other services.

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.

Testing

Run unit tests with

npm run test:unit

Run integration tests with

ACCOUNT_SID=<Your account sid> \
API_KEY_SID=<Your api key sid> \
API_KEY_SECRET=<Your api key secret> \
BROWSER=<Browser you'd like to use> \
npm run test:integration

When run this way, the local Karma server mints Access Tokens and makes REST API calls with these credentials, so they never reach the browser. If VENDOR_URL is set, requests go to that credential service instead and the credentials above are ignored. CI uses this.

You can add these optional variables to control the integration test execution :

• Topology : Decides which type of rooms to test against.
• Debug : To get better source mapping, and the browser does not close after tests are run which allows you to easily step through code to debug.
• Test Files : Allows you to limit the test to just one file.

TOPOLOGY=<peer-to-peer|group>
DEBUG=1
TEST_FILES=<path_ to_the_file>

Tips

• Use Pre-commit hook: We have some useful pre-commit hook that would help identify common mistakes before commit. Use them by executing

ln -s ../../pre-commit.sh .git/hooks/pre-commit

Related

Applications using twilio-video.js

• Twilio Video React App
• Twilio Video Javascript Quickstart
• Twilio Video Diagnostics App

Developer tools

• Twilio Video Processors
• Twilio Video Room Monitor
• Twilio RTC Diagnostics SDK

Community Contributions and Support

This repository is publicly available and maintained by Twilio under a limited external contribution model.

Due to limited maintenance capacity, external pull requests are not currently accepted.

GitHub Issues may be used to report reproducible bugs or provide feature feedback about this SDK. Issues are reviewed on a best-effort basis, with no SLA or guaranteed response.

GitHub Issues are not an official Twilio support channel. For production issues, general usage questions, or account-specific assistance, please contact Twilio Support. If you have a Twilio account manager, you may also escalate through them.

Do not share Personally Identifiable Information (PII) or sensitive account information, including access tokens, API keys, and credentials, in issues, logs, or screenshots.

Report security vulnerabilities privately through Twilio's Vulnerability Disclosure Program, rather than public GitHub Issues.

See CONTRIBUTING.md for reporting guidance.

License

See LICENSE.md.