wfd2018 / video-quickstart-js

These samples demonstrate Twilio Video SDK (https://github.com/twilio/twilio-video.js) usage.

NEW: The Local Video Filter example has been updated to use the recently released Video Processor API for Chrome.

Twilio Video Quickstart for JavaScript

For Twilio Video 1.x Quickstart, go here.

Overview

This application should give you a ready-made starting point for writing your own video apps with Twilio Video.

Setup Requirements

Before we begin, we need to collect all the config values we need to run the application:

• Account SID: Your primary Twilio account identifier - find this in the console here.
• API Key SID: Used to authenticate - generate one here.
• API Key Secret: Used to authenticate - just like the above, you'll get one here.

A Note on API Keys

When you generate an API key pair at the URLs above, your API Key Secret will only be shown once - make sure to save this in a secure location, or possibly your ~/.bash_profile.

Setting Up The Application

Create a configuration file for your application:

cp .env.template .env

Edit .env with the configuration parameters we gathered from above.

Next, we need to install our dependencies from npm:

npm install

Running The Application

Now we should be all set! Run the application:

npm start

Your application should now be running at http://localhost:3000. You will be prompted to test and choose your microphone and camera. On desktop browsers, your choices will be saved. On mobile browsers, you will be asked to test and choose your microphone and camera every time you load the application in order to make sure they are not reserved by another application.

After choosing your input devices, you will be prompted to enter your Room name and user name, following which you will join the Room. Now, all you have to do is open another tab and join the same Room in order to see and hear yourself on both tabs!

joinroom.js demonstrates how to use the SDK APIs to build a multi-party video sesssion. You can start building your own application by incorporating this code into your own application, and build your user interface around it.

Running On Multiple Devices

You can use ngrok to try your application on different devices by creating a secure tunnel to your application server:

ngrok http 3000

You will get a URL of the form https://a1b2c3d4.ngrok.io which can be loaded on a browser from a device different than the one where your application server is running.

Examples

The project contains some use-case examples for the Twilio Video JS SDK. After running the application by following the instructions above, go to http://localhost:3000/examples to try them out.