Node.js Express Zoom Clone WebRTC P2P Video Chat Using Twilio SDK in Browser Using Javascript Full Project For Beginners

 

 

Video Chat

A simple video chat between two clients as an example of how to connect two browsers via WebRTC using Twilio STUN/TURN infrastructure.

Read the blog post to see how to build this: Getting Started with WebRTC using Node.js, Socket.io and Twilio’s NAT Traversal Service.

Quick start

  • Clone this repo
git clone https://github.com/philnash/video-chat.git
cd video-chat
  • Install dependencies
npm install
  • Create a .env file copying .env.template. Fill in your Account SID and Auth Token from your Twilio console
  • Start the server
npm start
  • Open two browsers on your laptop and point them localhost:3000. If you want to use a client on another computer/mobile, make sure you publish your server on an HTTPS connection (otherwise the camera may not work). You can use a service like ngrok for that.
  • Click on the “Get Video” button on both browsers
  • Click on button “Call” on one of the browser, to establish the video call

 

 

index.js

 

 

require('dotenv').config();

// Twilio init
var twilio = require('twilio')(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_AUTH_TOKEN
);
var express = require('express');
var app = express();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.use(express.static('public'));
// When a socket connects, set up the specific listeners we will use.
io.on('connection', function(socket){
  // When a client tries to join a room, only allow them if they are first or
  // second in the room. Otherwise it is full.
  socket.on('join', function(room){
    console.log('A client joined')
    var clients = io.sockets.adapter.rooms[room];
    var numClients = typeof clients !== 'undefined' ? clients.length : 0;
    if(numClients == 0){
      socket.join(room);
    }else if(numClients == 1){
      socket.join(room);
      // When the client is second to join the room, both clients are ready.
      console.log('Broadcasting ready message')
      socket.emit('ready', room);
      socket.broadcast.emit('ready', room);
    }else{
      socket.emit('full', room);
    }
  });

  // When receiving the token message, use the Twilio REST API to request an
  // token to get ephemeral credentials to use the TURN server.
  socket.on('token', function(){
    console.log('Received token request')
    twilio.tokens.create(function(err, response){
      if(err){
        console.log(err);
      }else{
        // Return the token to the browser.
        console.log('Token generated. Returning it to the client')
        socket.emit('token', response);
      }
    });
  });

  // Relay candidate messages
  socket.on('candidate', function(candidate){
    console.log('Received candidate. Broadcasting...')
    socket.broadcast.emit('candidate', candidate);
  });

  // Relay offers
  socket.on('offer', function(offer){
    console.log('Received offer. Broadcasting...')
    socket.broadcast.emit('offer', offer);
  });

  // Relay answers
  socket.on('answer', function(answer){
    console.log('Received answer. Broadcasting...')
    socket.broadcast.emit('answer', answer);
  });
});

http.listen(3000, function() {
  console.log('listening on *:3000');
});

Leave a Reply