- Notifications
You must be signed in to change notification settings - Fork215
Twilio’s Programmable Video JavaScript SDK
License
twilio/twilio-video.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
twilio-video.js allows you to add real-time voice and video to your web apps.
We want your feedback! Please feel free to open aGitHub issue for suggested improvements or feature requests. If you need technical support, contacthelp@twilio.com.
ViewCHANGELOG.md for details about our releases.
| Chrome | Edge (Chromium) | Firefox | Safari | WebView | |
|---|---|---|---|---|---|
| Android | ✓ | - | ✓ | - | - |
| iOS | ✓ | - | * | ✓ | ✓ |
| Linux | ✓ | - | ✓ | - | - |
| macOS | ✓ | ✓ ** | ✓ | ✓ | - |
| Windows | ✓ | ✓ ** | ✓ | - | - |
** twilio-video.js supports theChromium-based Edge browser.
npm install twilio-video --saveUsing this method, you canrequire twilio-video.js like so:
constVideo=require('twilio-video');
TypeScript definitions can now be imported using this method.
import*asVideofrom'twilio-video';functionparticipantDisconnected(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{RemoteParticiant}from'twilio-video';functionparticipantDisconnected(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 thesedirectly in your web app using a <script> tag.
<scriptsrc="//sdk.twilio.com/js/video/releases/2.32.1/twilio-video.min.js"></script>
Using this method, twilio-video.js will set a browser global:
constVideo=Twilio.Video;
The following is a simple example for connecting to a Room. For more information, refer to theAPI Docs.
constVideo=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));});functionparticipantConnected(participant){console.log('Participant "%s" connected',participant.identity);constdiv=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);}functionparticipantDisconnected(participant){console.log('Participant "%s" disconnected',participant.identity);document.getElementById(participant.sid).remove();}functiontrackSubscribed(div,track){div.appendChild(track.attach());}functiontrackUnsubscribed(track){track.detach().forEach(element=>element.remove());}
Want to enableCSP in away that's compatible with twilio-video.js? Use the following policy directives:
connect-src wss://global.vss.twilio.com wss://sdkgw.us1.twilio.commedia-src mediastream:If you're loading twilio-video.js fromsdk.twilio.com,you should also include the followingscript-src directive:
script-src https://sdk.twilio.comIf you are enablingKrisp Noise Cancellation foryour local audio, and you are using the followingdefault-src self directive, you should also add theunsafe-eval directive:
default-src self unsafe-evalKeep in mind, you may need to merge these policy directives with your own ifyou're using other services.
Fork and clone the repository. Then, install dependencies with
npm installThen run thebuild script:
npm run buildThe builds and docs will be placed in thedist/ directory.
Run unit tests with
npm run test:unitRun 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:integrationYou 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=1TEST_FILES=<path_ to_the_file>- 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-commitBug fixes welcome! If you're not familiar with the GitHub pullrequest/contribution process,this is a nice tutorial.
SeeLICENSE.md.
About
Twilio’s Programmable Video JavaScript SDK
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.