Have you ever wanted to talk to your doctor face-to-face without visiting her office? Or needed to consult an expert for five minutes about a home improvement project?
Video is already changing the way we communicate with coworkers and loved ones, and now it's poised to change the way you interact with your customers too.
But the cost, complexity, and rigidity of traditional video room systems and cloud-based video services present a challenge for enterprise developers looking to embed video capabilities directly into their applications.
With the power of flexible APIs, you can add now add video capabilities to your app.
Twilio’s Programmable Video APIs enable you to add voice, video, and screen share capabilities in your web and mobile applications. Built on top of WebRTC, Twilio's programming code helps you get started quickly and then scale for production.
This tutorial focuses on building a web-based video application in Node.js using the Twilio Video JavaScript SDK. Twilio also provides Video SDKs for Android and iOS, along with a server-side REST API – you can learn more about these in the section following the tutorial.
Get an API key
Before you make your first video call, you need to sign up for a Twilio account and generate an API Key and API Key Secret in the Twilio Video Console. Note that the API Key Secret is only shown once, so make sure that you save it in a safe and secure location. We will need it the upcoming steps.
Now that you have a Twilio account and an API Key, you can start writing some code!
Get the JavaScript SDK Quickstart application
Next, we will install the JavaScript SDK Quickstart application by cloning this GitHub repository. In a terminal/command line interface on your machine, go to a location of your choice and type in the following command
git clone https://github.com/twilio/video-quickstart-js
This will install the JavaScript Video Quickstart application on your machine. This application is built using Node.js. If you don’t have Node and NPM installed, on your machine, now is a good time to install it.
Setting up the application
Now that we have our QuickStart application, we want to ensure its configured correctly. We need to create a configuration file to add all our configuration values. Type in the following command to create your configuration file.
cp .env.template .env
We need to add the following configuration parameters:
- Account SID: Your primary Twilio account identifier — find this in the console here.
- API Key: We created this at the beginning. You can also find this in the console here.
- API Secret: Pull it up from the safe location you stored it earlier.
Edit .env with the three configuration parameters.
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. Just enter the name of the room you want to join and click on Join Room. You are now connected to video room. Now, open another tab and join the same room — you should see your own video in both tabs!
Video chat with a friend
If you haven't already, install NGROK and ensure the ngrok command is on your system path. The following command would use ngrok to expose port 3000 to the public Internet. This would allow you to share the video room public URL link with a friend to begin a video chat.
ngrok http 3000
Where to next?
Twilio Video also has SDKs for iOS and Android platforms. Take a look at the iOS and Android Quickstart applications to build video clients similar to the JavaScript client we built in this tutorial.
If you add the same Room Name in your iOS or Android video clients, you would be able to get a multiparty video chat working between your browser and your mobile application! Give it a try.
Now that you know the basics of how to build a web-based video application, you might want to check out these Twilio resources for more advanced applications and use cases:
- Working with Rooms tutorial
- Rooms REST API documentation
- Screen Capture and Advanced Guides
Happy coding!