twilio-video

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

We want your feedback! Please feel free to open a GitHub issue for suggested improvements or feature requests. If you need technical support, contact help@twilio.com.

Changelog
---------

View CHANGELOG.md for details about our releases.

Browser Support
---------------

| | Chrome | Edge (Chromium) | Firefox | Safari | WebView |
| ------------|--------|-----------------|---------|--------|---------|
| Android | ✓ | - | ✓ | - | - |
| iOS | ✓ | ✓ | * | ✓ | ✓ |
| Linux | ✓ | - | ✓ | - | - |
| macOS | ✓ | ✓ ** | ✓ | ✓ | - |
| Windows | ✓ | ✓ ** | ✓ | - | - |

\\ twilio-video.js supports the Chromium-based Edge browser.

Installation
------------

$3

``
npm install twilio-video --save
`

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

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

TypeScript definitions can now be imported using this method.

`ts
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:

`ts
import { RemoteParticipant } from 'twilio-video';

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

$3

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

`html

`

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

`js
const Video = Twilio.Video;
`

Usage
-----

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

`js
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= \
API_KEY_SID= \
API_KEY_SECRET= \
BROWSER= \
npm run test:integration
`

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=
DEBUG=1
TEST_FILES=
`

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
-------

$3

- Twilio Video React App
- Twilio Video Javascript Quickstart
- Twilio Video Diagnostics App

$3

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

Contributing
------------

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

License
-------

See LICENSE.md.