Twilio Video JavaScript Library
npm install twilio-videotwilio-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
------------
```
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();
}
`
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,script-src
you should also include the following 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 theunsafe-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
-------
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.