Build a Dynamic Video Chat App with Twilio Video API

In this tutorial, we will create a dynamic video chat application using Twilio Video API, which enables real-time video and audio communication between users. We will build the application using Node.js for the backend and JavaScript for the frontend.

Prerequisites

Before we start, make sure you have the following installed and configured:

Node.js (v14.x or higher)
A Twilio account (sign up for a free trial here)

Setting Up the Project

Create a new directory for the project and navigate to it:

mkdir twilio-video-chat
cd twilio-video-chat

Initialize the project with npm:

npm init -y

Install required dependencies:

npm install express twilio ejs dotenv

Create a .env file to store your Twilio credentials:

touch .env

Add your Twilio Account SID, Auth Token, and API Key SID & Secret to the .env file:

TWILIO_ACCOUNT_SID=YOUR_TWILIO_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_TWILIO_AUTH_TOKEN
TWILIO_API_KEY_SID=YOUR_TWILIO_API_KEY_SID
TWILIO_API_KEY_SECRET=YOUR_TWILIO_API_KEY_SECRET

Building the Backend

Create an app.js file in the project root directory:

touch app.js

Add the following code to app.js:

require('dotenv').config();
const express = require('express');
const twilio = require('twilio');
const AccessToken = twilio.jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;

const app = express();

app.use(express.static('public'));

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index');
});

app.get('/token', (req, res) => {
  const identity = req.query.identity;
  const token = new AccessToken(
    process.env.TWILIO_ACCOUNT_SID,
    process.env.TWILIO_API_KEY_SID,
    process.env.TWILIO_API_KEY_SECRET
  );

  token.identity = identity;
  const grant = new VideoGrant();
  token.addGrant(grant);

  res.send({
    identity: identity,
    token: token.toJwt(),
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Building the Frontend

Create a public directory and an index.ejs file in the views directory:

mkdir public views
touch views/index.ejs

Add the following code to index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twilio Video Chat</title>
  <style>
    /* Add your custom styles here */
  </style>
</head>
<body>
  <input type="text" id="identity" placeholder="Enter your name">
  <button id="join">Join Video Chat</button>
  <div id="videos">
    <div id="local"></div>
    <div id="remote"></div>
  </div>

  <script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.1/twilio-video.min.js"></script>
  <script>
    // Add your JavaScript code here
  </script>
</body>
</html>

Add the following JavaScript code inside the <script> tag in index.ejs:

const identityInput = document.getElementById('identity');
const joinButton = document.getElementById('join');
const localVideo = document.getElementById('local');
const remoteVideo = document.getElementById('remote');

joinButton.addEventListener('click', () => {
  const identity = identityInput.value;
  if (!identity) return;

  fetch(`/token?identity=${identity}`)
    .then((res) => res.json())
    .then((data) => {
      const { token } = data;
      Twilio.Video.connect(token).then((room) => {
        room.on('participantConnected', (participant) => {
          participant.on('trackSubscribed