Wednesday, 14 July, 2021 UTC
Summary
Have you ever wished you could build your own video chat application to talk to a friend, family member, or colleague one-on-one?
There are so many projects you could build or enhance with video — a video chat for friends, a telemedicine application, a virtual real estate tour, a tutoring app, a dating application, and many more. When you're getting started building a new project, it's great to have a way to build for free and explore your ideas.
With Twilio WebRTC Go, you can build your own 1:1 video application where participants can video chat for free. You can build your own WebRTC-enabled video app without needing to be concerned with some of the challenges of building directly on WebRTC.
In this tutorial, you will learn how to build a 1:1 video chat application with JavaScript and set it up to run on ngrok so you can chat with a friend. The application will consist of two parts: a vanilla JavaScript client-side application that will allow you to connect to a video room, and an Express server that will grant access tokens for the participants in the video chat.
Let's get started!
Prerequisites - A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
- Node.js (version 14.16.1 or higher) and npm installed on your machine.
- ngrok
To get started, navigate to where you would like to set up your project. Create a new directory called explore-webrtc-go and change into that directory by running the following commands in your terminal:
mkdir explore-webrtc-go cd explore-webrtc-go Next, set up a new Node.js project with a default package.json file by running the following command:
npm init --yes Once you have your package.json file, you're ready to install the needed dependencies.
For this project, you will need the following packages:
- Express, a Node.js framework
- Twilio Node Helper Library, to use the Twilio APIs
- dotenv, to load the environment variables from a .env file into your application
- node-dev, to automatically restart the Node process when you modify a file
Run the following command in your terminal to install the needed packages:
npm install express twilio dotenv node-dev If you check your package.json file now, you'll notice that the packages above have been installed as
Save your Twilio credentials as environment variables dependencies.Next, create a new file named .env at the root of your project and open it in your code editor. The .env file is where you will keep your Twilio account credentials. Open the .env file in your text editor and add the following variables:
TWILIO_ACCOUNT_SID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX TWILIO_API_KEY_SID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX TWILIO_API_KEY_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX You’ll need to replace the placeholder text above with your actual Twilio credentials, which can be found in the Twilio Console. Log in to the Twilio Console and find your Account SID:
Copy and paste the value for Account SID to replace the placeholder text for
TWILIO_ACCOUNT_SID.Then, navigate to the API Keys section of the console and generate a new API Key. Copy the API Key's values for SID and Secret to replace the placeholder text for
TWILIO_API_KEY_SID and TWILIO_API_KEY_SECRET.It’s important to keep these private credentials secure and out of version control, so create a .gitignore file at the root of your project. Here you can list the files and directories that you want git to ignore from being tracked or committed. Open .gitignore in your code editor and add the .env file. While you're in here, add the node_modules directory as well:
.env node_modules Now it's time to get into writing the code to bring your video chat to life.
Create an Express server Create a new file called server.js at the root of your project. This is the place where you will write your server-side code.
Open up server.js in your code editor. Add the following lines of code to server.js, which will load the environment variables from your .env file, start a new Express application, and set the application to run on port 5000:
require('dotenv').config(); const express = require('express'); const app = express(); const port = 5000; Below the code you added above, add the following lines of code to start the Express server:
// Start the Express server app.listen(port, () => { console.log(`Express server running on port ${port}`); }); Now, open package.json in your code editor. Inside the
scripts section, add a start script as shown below. You can replace the test script that was automatically generated by npm init --yes earlier: "scripts": { "start": "node-dev server.js" }, To run the
start script, return to your terminal window and run the following command:npm start Once you have done this, you should see the following log statement in your terminal window, letting you know that the Express server is running:
Express server running on port 5000 Set up an ngrok tunnel
In this project, you'll be using ngrok to connect the Express application running locally on your machine to a temporary public URL. To start a new ngrok tunnel, open up a new terminal window and run the following command:
ngrok http 5000 Once ngrok is running, you will see text like the below in your terminal window:
ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Account <YOUR_ACCOUNT_NAME> Version 2.3.40 Region <YOUR_REGION> Web Interface http://127.0.0.1:4040 Forwarding <URL> -> http://localhost:5000 Forwarding <URL> -> http://localhost:5000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00 Take a look at the URLs next to
Create the application layout and serve static files Forwarding. Now, any requests that are made to these ngrok URLs will be forwarded to your Express server.Now that your server is running, it's time to create the rest of your application's layout. Create a new directory called
public at the root of your project. This directory will hold your static files:mkdir public Inside the
public directory, create 3 new files: app.js, index.html, and styles.css.Open up public/index.html in your code editor and add the following code to the file:
<html> <head> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <link rel='stylesheet' type='text/css' href='styles.css'> <script defer src='https://sdk.twilio.com/js/video/releases/2.15.0/twilio-video.min.js'></script> <script defer src='app.js' type='text/javascript'></script> <title>Try WebRTC Go</title> </head> <body> <div id='participants'> <div id='localParticipant' class='participant'> <div class='identity' id='localIdentity'></div> </div> <div id='remoteParticipant' class='participant'> <div class='identity' id='remoteIdentity'></div> </div> </div> <form id='login'> <input id='username' type='text' placeholder='Enter your name...' required> <button id='joinOrLeave'>Join Video Call</button> </form> </body> </html> With this HTML code, you create the layout for the video chat application, as well as include the Twilio Video library from CDN in a <script> tag. Since you are using WebRTC Go, it is a one-on-one video chat with only two participants. This means that you will only need to show two video feeds — one for the
localParticipant and one for the remoteParticipant. This layout also includes a login form that will let the participants enter their names and click a button to join the video call.Return to server.js and add the following lines of code just below the variables at the top of the file:
app.use(express.json()); // Serve static files from the public directory app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile('public/index.html'); }); With this code, you have set your application to use the Express JSON middleware, serve your static files from the
public directory you just created, and show your layout from index.html when a user navigates to the root endpoint of your application.If you visit one of the ngrok forwarding URLs in your browser, you will see something that looks like the below:
Let's add some CSS to make it a bit more interesting. Open public/styles.css in your code editor, then add the following styles to the file:
body { width: 80%; margin: 0 auto; display: grid; align-items: center; font-family: sans-serif; } #participants { display: flex; justify-content: center; margin-top: 2rem; } .participant { position: relative; border-radius: 0.625rem; margin: 0.625rem; width: 25vw; overflow: hidden; background-color: rgb(233, 230, 230); } .identity { position: absolute; left: 0; bottom: 0.9375rem; color: white; padding-left: 0.9375rem; z-index: 10; } form { display: flex; flex-wrap: wrap; justify-content: center; padding: 1rem 5rem; } input { border: none; background: rgb(233, 230, 230); padding: 1rem 11.5rem; height: 4rem; font-size: 1.125rem; text-align: center; } button { width: 10rem; height: 4rem; background: rgb(247, 120, 184); color: rgb(255, 255, 255); border: none; font-size: 1rem; } button:hover, button:active { background: rgb(184, 77, 132); } video { width: 25rem; border-radius: 0.438rem; margin: 0 auto; } @media only screen and (max-width: 500px) { body { width: 100%; margin: 0 auto; display: grid; align-items: center; font-family: sans-serif; } #participants { flex-direction: column; margin: 1rem 0; } .participant { border-radius: 0; margin: 0 auto; width: 100vw; height: 65vw; } form { padding: 1rem; } input { padding: 0; width: 100%; height: 4rem; } button { width: 100%; font-size: 1.125rem; } video { width: 30rem; border-radius: 0; } } If you refresh your browser window, the application so far should look more like this:
Now that you have set up a structure to hold your video chat, the next step is to use JavaScript to display a preview of your video as the local participant.
Display a preview of your video Open public/app.js in your code editor and add the following variables at the top of the file:
const participants = document.getElementById('participants'); const localParticipant = document.getElementById('localParticipant'); const localIdentity = document.getElementById('localIdentity'); const remoteParticipant = document.getElementById('remoteParticipant'); const remoteIdentity = document.getElementById('remoteIdentity'); const login = document.getElementById('login'); const usernameInput = document.getElementById('username'); const joinLeaveButton = document.getElementById('joinOrLeave'); let connected = false; let room; The first variables refer to specific HTML elements in your UI. Setting them to variables allows you to work with them more easily. Following these, you also have variables for
connected and room. The connected variable describes whether the local participant is connected to a video room, and the room variable describes that video room.Just below your list of variables, add the following
addLocalVideo function, and then call the function, as shown in the code below:const addLocalVideo = async () => { const videoTrack = await Twilio.Video.createLocalVideoTrack(); const trackElement = videoTrack.attach(); localParticipant.appendChild(trackElement); }; addLocalVideo(); This function uses the Twilio Programmable Video library to create a local video track, which will be attached to the
localParticipant <div>. When you navigate to the application's URL in your browser window, you should see your video preview there. (If this is your first time visiting the page, an alert message may pop up, asking if localhost:5000 can access your camera. Once you grant permission, you'll be able to see your video feed.)Now that you have seen your video preview, you're ready to write the code that will let you join the video call.
Generate an access token and a WebRTC Go video room In order to join a video call, you will need to generate a short-lived credential called an access token. This will happen on the server side of your application.
In addition to generating an access token, you'll also be creating the video room on the server side of the application. Using the Rooms REST API, you are able to specify what type of video room you want to create, and in this project, you'll create a Go room.
Return to server.js in your code editor and add the following variables to the file, just below the variables already in the file:
require('dotenv').config(); const express = require('express'); const app = express(); const port = 5000; const AccessToken = require('twilio').jwt.AccessToken; const VideoGrant = AccessToken.VideoGrant; Then, just below that code, add the following lines of code to initialize the Twilio client:
const twilioClient = require('twilio')(process.env.TWILIO_API_KEY_SID, process.env.TWILIO_API_KEY_SECRET, { accountSid: process.env.TWILIO_ACCOUNT_SID }); When a participant navigates to your application, enters their username in the input field, then clicks Join Video Call, their name will be passed to a
/token endpoint here on the server side via a POST request. This endpoint will get the user's username and the video room's name from the request, then use your Twilio credentials and the Twilio Node Helper Library to create an access token for this user. The endpoint will also check whether the Go room exists already, and if it does not, will create a new one. Then, the endpoint will return the access token to the client side of your application. Your JavaScript code will then use this access token to connect to the video room.> It is also possible to configure your Twilio account to only use Go Rooms for your video applications. If you are interested in doing this, navigate to the Default Room Settings page in the Twilio Console. There, you can select Go Rooms as the Room Type and then click the Save button. Once you have done this, all video applications that you create will use Go Rooms by default.
In server.js, just below your
app.get block, add the following /token endpoint:app.post('/token', async (req, res) => { if (!req.body.identity || !req.body.room) { return res.status(400); } // Get the user's identity and the room name from the request const identity = req.body.identity; const roomName = req.body.room; try { // See if the room exists already const roomList = await twilioClient.video.rooms.list({uniqueName: roomName, status: 'in-progress'}); let room; if (!roomList.length) { // Call the Twilio video API to create the new Go room room = await twilioClient.video.rooms.create({ uniqueName: roomName, type: 'go' }); } else { room = roomList[0]; } // Create a video grant for this specific room const videoGrant = new VideoGrant({ room: room.uniqueName, }) // Create an access token const token = new AccessToken( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_API_KEY_SID, process.env.TWILIO_API_KEY_SECRET, ); // Add the video grant and the user's identity to the token token.addGrant(videoGrant); token.identity = identity; // Serialize the token to a JWT and return it to the client side res.send({ token: token.toJwt() }); } catch (error) { res.status(400).send({error}); } }); Connect to a video room as a local participant
Now that you are able to generate access tokens, it's time to write the code that will let you join the video chat as the local participant. Return to public/app.js in your code editor.
Just below your
addLocalVideo function, create a new function called connectOrDisconnect that will handle the event when a user clicks the Join Video Call button:const connectOrDisconnect = async (event) => { event.preventDefault(); if (!connected) { const identity = usernameInput.value; joinLeaveButton.disabled = true; joinLeaveButton.innerHTML = 'Connecting...'; try { await connect(identity); } catch (error) { console.log(error); alert('Failed to connect to video room.'); joinLeaveButton.innerHTML = 'Join Video Call'; joinLeaveButton.disabled = false; } } else { disconnect(); } }; This function will check the
connected variable to see whether the user is already connected to a video room. If the user is not already connected, this function will get the user's username from the input field in the UI and then try to connect to the video room. If the user did not enter a name in the input field, an alert message will pop up to let them know that they must complete this step before connecting.If a user is already connected to a video room, the
You may have noticed that the function described above references individual functions called
connected variable will already be set to true, which will trigger calling the disconnect function, disconnecting the participant from the video room and resetting the UI.You may have noticed that the function described above references individual functions called
connect and disconnect.The
connect function mentioned above will take the user's username from the input field and send it in a request to the /token endpoint you created earlier. Once the server side sends back an access token, this token is passed into another connect function within the client-side twilio-video library linked in the first <script> tag in index.html. If the connection is successful, the local participant will be connected to the video room and this video room will be assigned to the global variable for room. Then, the function sets up event listeners to listen for when the other participant joins the video call. Once the local participant has joined the video call, the text of the Join Video Call button changes to Leave Video Call for that participant, and the field for entering a username is hidden.Add the following
connect function to public/app.js just below the connectOrDisconnect function:const connect = async (identity) => { const response = await fetch('/token', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ 'identity': identity, 'room': 'My Video Room' }) }); const data = await response.json(); room = await Twilio.Video.connect(data.token); localIdentity.innerHTML = identity; room.participants.forEach(participantConnected); room.on('participantConnected', participantConnected); room.on('participantDisconnected', participantDisconnected); connected = true; joinLeaveButton.innerHTML = 'Leave Video Call'; joinLeaveButton.disabled = false; usernameInput.style.display = 'none'; }; Next, it's time to add the
disconnect function. This function will handle disconnecting a participant from the video room when they click the Leave Video Call button. It will also remove the remote participant's video feed from the UI, set the button's text back to Join Video Call, and let the username input appear again.Add the following
disconnect function just below your code for the connect function:const disconnect = () => { room.disconnect(); connected = false; remoteParticipant.lastElementChild.remove(); remoteIdentity.innerHTML = ''; localIdentity.innerHTML = ''; joinLeaveButton.innerHTML = 'Join Video Call'; usernameInput.style.display = 'inline-block'; }; Now, just above where you call the
addLocalVideo function at the bottom of public/app.js, add add an event listener to the login form that will listen for the submit event and call connectOrDisconnect when this event occurs:login.addEventListener('submit', connectOrDisconnect); addLocalVideo(); Now that you have taken care of the local participant's connection to and disconnection from the video room, it's time to add some code to handle when the other participant joins and leaves the room.
Handle the remote participant's connection and disconnection You might have noticed in the
connect function you added above, that when a participantConnected event occurs in the video room, the function participantConnected gets called. A similar thing occurs for the participantDisconnected event. You will need to add these two functions in order to handle the connection and disconnection of the remote participant.Start by adding the
participantConnected function. This function will create a new <div> for the remote participant when they connect to the room, display their username (identity), and attach their video and audio tracks to the <div>. The function also creates event handlers for responding to when the remote participant's tracks are subscribed to or unsubscribed from; if the participant turns off their audio or video feed, you want the application to be able to attach or detach these tracks as needed.Add the following
participantConnected function just below your disconnect function in public/app.js:const participantConnected = (participant) => { const tracksDiv = document.createElement('div'); tracksDiv.setAttribute('id', participant.sid); remoteParticipant.appendChild(tracksDiv); remoteIdentity.innerHTML = participant.identity; participant.tracks.forEach(publication => { if (publication.isSubscribed) { trackSubscribed(tracksDiv, publication.track); } }); participant.on('trackSubscribed', track => trackSubscribed(tracksDiv, track)); participant.on('trackUnsubscribed', trackUnsubscribed); }; Next, it's time to add the
participantDisconnected function for when the remote participant leaves the video call. This function will remove the remote participant's video feed and username from the UI.Add the following
participantDisconnected function just below your participantConnected function:const participantDisconnected = (participant) => { document.getElementById(participant.sid).remove(); remoteIdentity.innerHTML = ''; }; Next, it's time to add code for when the local participant subscribes to or unsubscribes from a remote participant's audio or video tracks. Add the following
trackSubscribed and trackUnsubscribed functions to public/app.js just below your code for participantDisconnected:const trackSubscribed = (div, track) => { const trackElement = track.attach(); div.appendChild(trackElement); }; const trackUnsubscribed = (track) => { track.detach().forEach(element => { element.remove() }); }; Now you have all the code you need for this project! It's time to test everything out.
Testing your video chat application Return to your browser window pointing to one of the ngrok forwarding URLs from earlier in the tutorial. If you refresh the page, you should see your own video feed preview there. Enter your name in the input field and click the Join Video Call button. You will see the input field disappear and the text of the button change to say Leave Video Call. You will also see your name just below your video feed.
To test out chatting with a remote participant, navigate to the ngrok forwarding URL link in a second browser window or even from a different device. Connect to the video room with a different username than the one you used in the previous steps. Once you have connected to the video room, you will be able to video chat!
What's next for your free 1:1 video chat with WebRTC Go? You've just built a cool video chat application that you can use for free 1:1 video conversations! There are so many ways you could use an application like this. Maybe you're interested in using the 1:1 chat for a tutoring session, a quick business call, or just to catch up with a friend. If you're interested in learning even more about WebRTC Go, consider taking a look at this blog post next.
If you would like to see the code for this project in its entirety, check out the repository on GitHub here.
What will you build next? Perhaps you're interested in allowing video chat participants to mute and unmute their audio? Or maybe you want to learn how to add virtual backgrounds to your video chat? There are so many exciting things you can create. I can't wait to see what you build!
Mia Adjei is a Software Developer on the Developer Voices team. They love to help developers build out new project ideas and discover aha moments. Mia can be reached at madjei [at] twilio.com.