Twilio Video chat tutorial using NodeJS, HTML, CSS, Webpack.

Do you want to create your own video chat application for your company or for chatting with your girlfriend but don’t know how? You have come to the right place.!

In this tutorial, we are going to create a simple video chat application using Twilio and NodeJS. If you don’t know about Twilio or have never heard of it, you are not a Developer ( Just kidding ). 

Twilio is one of the best communications platforms as a service out there and if you want mailing service, SMS module, video/audio chat module ..etc. on your web application you have to give Twilio a try.

Before going into the coding part, you have to be familiar with the following JS libraries and frameworks.

  1. NodeJS (ExpressJS)
  2. Npm
  3. Webpack and Bable ( We will have a separate blog on this topic in the future, for now, refer to https://github.com/kishork2120/twilio-videocall-tutorial/blob/master/webpack.config.js for code).
  4. Basic HTML and CSS.

Ok, let’s dive in.

Twilio setup:

We need to have a Twilio account for using their APIs, follow the steps for creating the account, and generating the required keys.

  • Create a Twilio account if you don’t have one, click this link https://www.twilio.com/try-twilio. For this tutorial, we only need a free account. When going to production, you have to purchase a Twilio subscription based on your requirement.
  • After confirming your account, you will have a greeting page which requires information about your product and how you are going to use Twilio. See the below screenshot for how you should configure. ( This configuration is based on this particular tutorial, it will differ for other services ).

Twilio Initial configuration ( After email verification ).
  • After this step, you will be redirected to a dashboard with three options on the left navbar – Dashboard, Programmable video, and see all products.

Twilio dashboard.

  • You will have $15.50 as your initial amount ( this is more than enough for this tutorial ). Usage of any services provided by Twilio will cost you and this balance will be reduced according to the consumption.
  • You can see that there are Account SID and Auth Token, for the tutorial we will be using Account SID for this tutorial.
  • In the “Programmable Video” section under “tools>Testing tools” we can find a sample code for implementing our video chat ( we will be referencing this later and you can leave the first two fields empty – CLIENT IDENTITY and ACCESS TOKEN ).

Programmable Video section

  • Next head on to “Tools>API Keys” for getting API_KEY_SID and API_KEY_SECRET, as you can see in the above sample code these keys are used to generate the access token.
  • In this section click “Create new API Key” and give a name to your application ( you can give any name ).
  • Give the key type as “Standard” and click “Create API key”.

New API key generation

  • After clicking “Create API key”, you will see two keys SID and secret, as mentioned on the page you have to note it down as it will be shown only once.

Video section

  • Check the “Got it blah blah” dialog box and click done.
  • You will see our keys as one on the list.

That’s it with twilio setup, 

I get it, but now the interesting part starts, the coding part.

Setting up NodeJS:

In this section we are going to set up NodeJS ( ExpressJS ) with a html page, and get access token from NodeJS api which is used to connect to twilio rooms ( imagine twilio room as an actual room in which the communication is happening, people in the same room can communicate with each other ). Follow the below steps for setting up NodeJS for our application.

  • Create a folder and give the command.
npm init -y

And install the following npm libraries.

npm i cors express process shortid twilio twilio-video util
  • Create a file called server.js ( this file will contain the APIs for our project ).
  • Create index.html ( for displaying our video chat components ).
  • Create an src folder and inside create twilio.config.js ( as the name suggests this file will contain our Twilio configuration ).
  • And then you need one more file for your webpack configuration webpack.config.js ( this tutorial doesn’t concentrate on webpack setup, if you want to know more about it, check this link https://webpack.js.org/concepts/, for this tutorial you can copy and paste content from https://github.com/kishork2120/twilio-videocall-tutorial/blob/master/webpack.config.js ).

After these steps your folder structure should look like this.

Folder structure

Next we need to add some code in package.json for making the development process easy.

Add the below lines.

"scripts": {
    "build": "webpack",
    "start": "node server.js"
  },

build: this script ( webpack ) will compile ( using babel ) our front-end js code ECMAScript 2015+ to compatible versions for the browsers to read.

start: node server.js will start our api server.

server.js

This file contains apis for our application, let’s break the code and see what they are doing.

server.js

  • First, we import all the required libraries.
  • The app.use(cors()), will allow requests from all origins i.e from all other ports/files ( if you don’t use this, our request won’t pass through, refer: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ).
  • Next, we require the Twilio library to get the AccessToken method from jwt method ( we will use this to generate our access token later ) and we get the VideoGrant method from the AccessToken method.
  • Then we declare three variables ACCOUNT_SID, API_KEY_SID, API_KEY_SECRET and we assign the keys obtained from our Twilio dashboard for these variables.
  • Now we create an accessToken object using the above three keys ( new AccessToken(…) will create our object ).
  • Now we have our ‘/getToken’ API. Before generating our access token we need to configure some properties.
    • accessToken.identity: this is a simple unique string for differentiating the connections to Twilio ( Note: this string needs to be unique for every connection, for generating this string we are using shortid npm, you can use any other library that suits you. )
    • accessToken.addGrant(grant): this line is to grant video access to our token.
  • We get our access token by calling accessToken.toJwt() and send it as a response.

src/twilio.config.js

This file includes twilio config for the front-end.

twilio.config.js

  • First, we import two functions from the twilio-video package – connect and createLocalVideoTrack.
  • On the next line, we display our video ( caller’s video feed ) in the HTML using createLocalVideoTrack() function.
  • Now we fetch our token from API using fetch API ( remember our route ‘/getToken’ ).
  • We connect to the room ‘my-new-room’ ( this room name should be the same for all participants in the call ) using connect method from twilio-video, we pass our accessToken and room name to this method.
  • On successful connection the callback is executed, if there is any error you would be consoled.
  • room.participants contains all the existing participants in the room, participant.tracks contains all their video tracks. publication.track.attach() and track.attach() will attach the video component to the ‘remote-media-div’ element in our page.
  • participant.on(‘trackSubscribed’) this event is used when participants have got their local tracks.
  • Till the above steps, we have displayed all the existing participant’s video feeds on our page.
  • Now we write functionality to display a video feed of the participant joining our room.
  • room.on(‘participantConnected’) this event will trigger when a new participant joins our room.
  • participant.on(‘trackSubscribed’) will trigger when the participant gets his/her video feed.
  • All the events will be triggered automatically, we don’t need to do anything.

Now we have our twilio config for the front-end ready. Let’s see our html page, where we chat.

index.html

index.html

  • This is a simple html file, where we can see there are two p-tags with ids local-media and remote-media-div ( which we used in our twilio.config.js file for displaying video feeds ).
  • We also have included bundle.js from the dist folder. We get this folder by compiling the twilio.config.js using webpack.

The coding part is done, follow the below steps to run our application.

  • Run npm run build – this will compile our twilio.config.js code and generate code that can be read by our browsers ( this will create a dist folder with bundle.js file ).
  • Then run npm start – this will start our API server.
  • Copy the path of index.html and paste it into the browser ( you can also serve this file from our express server ).

Output:

output 1

Again paste the same index.html path in a new incognito window, you can see the other video feed. ( It will take some seconds for displaying the remote video based on your network connection ).

Output 2

You can paste this in any number of browsers, you can see that video feeds will be added under the remote video section.

Note: If you serve the index.html through an express server and host the server in cloud platforms like AWS, Heroku, or netlify. You can send the index.html route to anyone in the world and chat with them.

That’s it, thank you.

Github: https://github.com/kishork2120/twilio-videocall-tutorial

35 thoughts on “Twilio Video chat tutorial using NodeJS, HTML, CSS, Webpack.

  1. It’s a pity you don’t have a donate button! I’d certainly donate to this outstanding blog!

    I guess for now i’ll settle for book-marking and adding your
    RSS feed to my Google account. I look forward to fresh updates and
    will share this blog with my Facebook group. Chat soon!
    ទិញដុល្លារតាមអ៊ីនធឺណិត
    ក្រដាសប្រាក់មួយដុល្លារក្លែងក្លាយ

  2. naturally like your web site but you need to check the
    spelling on quite a few of your posts. A number of them are rife with spelling problems and
    I find it very bothersome to inform the truth then again I’ll certainly
    come back again.
    cod account
    cod account

  3. Nickname Finder & Nickname Generator & Name Generator & Style Nicks Name
    site serves you to write shaped text. You can write any
    shaped nick using our pubg shaped nick or shaped nick typing tool.
    You can write wonderfully shaped texts with
    shaped nick writing. Shaped nick writing site writes shaped nicks.

    Nickname Finder

  4. Thanks for the marvelous posting! I genuinely enjoyed reading it, you will be a
    great author.I will be sure to bookmark your blog and may come back
    in the foreseeable future. I want to encourage you continue your great
    posts, have a nice afternoon!
    free accounts
    free accounts

  5. I think this is one of the most vital information for me.

    And i’m glad reading your article. But wanna remark on some general things, The web site style is ideal, the articles is really nice : D.
    Good job, cheers
    free accounts
    free accounts

  6. My partner and I absolutely love your blog and
    find nearly all of your post’s to be just what I’m looking for.
    Does one offer guest writers to write content for yourself?
    I wouldn’t mind publishing a post or elaborating
    on many of the subjects you write regarding here. Again, awesome web log!

    free accounts
    free accounts

  7. Have you ever considered writing an e-book or guest
    authoring on other sites? I have a blog centered
    on the same subjects you discuss and would really like to have you share some stories/information.
    I know my subscribers would value your work. If you’re even remotely interested,
    feel free to shoot me an e-mail.
    free accounts
    free accounts

Leave a Reply

Your email address will not be published.

Pin It on Pinterest