Integrating Twilio Video API with WebRTC for Seamless Video Conferencing

In today's digital era, video conferencing has become a key feature for businesses and individuals alike. With the help of WebRTC and the Twilio Video API, developers can create a powerful video conferencing solution.

In this tutorial, we'll walk you through integrating Twilio Video API with WebRTC to create a seamless video conferencing experience in your web applications.


To follow this tutorial, you'll need:

  • Basic knowledge of JavaScript, HTML, and CSS
  • A Twilio account with a Programmable Video API key and secret (sign up here if you don't have an account)
  • Node.js installed on your computer

Setting up the project

Start by creating a new directory for your project:

mkdir twilio-video-webrtc
cd twilio-video-webrtc

Initialize a new Node.js project:

npm init -y

Install the required dependencies:

npm install twilio express ejs

Create a .env file in your project root to store your Twilio credentials:

touch .env

Add your Twilio API key and secret to the .env file:


Creating the server

Create a new file named server.js in your project root:

touch server.js

In server.js, import the required modules and set up an Express server:

const express = require('express');
const app = express();
const twilio = require('twilio');
const { AccessToken } = twilio.jwt;


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

app.get('/', (req, res) => {

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

Creating the views

Create a new folder named views in your project root and a index.ejs file inside it:

mkdir views
touch views/index.ejs

In index.ejs, add the following HTML structure:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twilio Video API with WebRTC</title>
      /* Add your CSS styles here */
    <h1>Twilio Video API with WebRTC</h1>
    <div id="video-container"></div>
    <script src="//"></script>
      // Add your JavaScript code here

Integrating Twilio Video API with WebRTC

In the index.ejs file, add the following JavaScript code to set up Twilio Video API with WebRTC:

(async () => {
  const identity = 'user-' +; // Generate a unique user identity

  // Fetch an access token from the server
  const response = await fetch('/token?identity=' + encodeURIComponent(identity));
  const token = await response.text();

  // Connect to a Twilio Room
  const room = await Twilio.Video.connect(token, { audio: true, video: true });

  // Attach local video and audio tracks to the DOM
  room.localParticipant.tracks.forEach((trackPublication) => {
    const track = trackPublication.track;

  // Attach remote video and audio tracks to the DOM
  room.on('participantConnected', (participant) => {
    console.log('Participant connected:', participant.identity);
    participant.tracks.forEach((trackPublication) => {
      const track = trackPublication.track;

In the server.js file, add a new route to generate the Twilio access token:

app.get('/token', (req, res) => {
  const identity = req.query.identity;

  const token = new AccessToken(
    { ttl: 3600 }

  token.identity = identity;
  token.addGrant(new AccessToken.VideoGrant({ room: 'example-room' }));


Testing the application

Start your server:

node server.js

Open two browser windows and navigate to http://localhost:3000. You should see the video conferencing working with both local and remote video feeds.


In this tutorial, you learned how to integrate Twilio Video API with WebRTC to create a seamless video conferencing experience in your web applications. With these tools, you can now build powerful and customizable video conferencing solutions for your projects. Happy coding!

An AI coworker, not just a copilot

View VelocityAI