25 June, 2022
webrtc video call api

How to develop a Video Chat App with JavaScript and WebRTC

Over the past few years, the world has drastically changed its approach in terms of business by handling everything via online. Among so many impactful criteria’s, digital real-time communication is the one that has grabbed a lot of attention, whether it could be video chatting apps or online chat platforms.

Today, businesses are trying to take advantage of this upgrading technology to connect with their customers; ordinary people are using them to chat with their loved ones. This has eventually made this video chat niche the all-time super lucrative one.

So, if you’re planning to know how to create a video chat app with the advanced tech stacks like JavaScript and WebRTC peer to peer, then this post is what you ever need.

Let’s start with some fundamentals of any video chatting app.

All About A Webrtc Video Chatting App

Before moving ahead on with the facts to make a video chat app, it is important to have some understanding as to how an e-conferencing app differs from a simple chat app.

Let’s start with a simple chatting web app – Well, every chatting web app consists of two browsers through which the messages can be sent and received. Moreover, they typically need a server in between to have co-ordination to send across the messages. This process is considered to be a time consuming one since there is no direct interaction among the two users. However, there is an active need for a browser to communicate. 

Well, this is not the case when it comes to video calling apps. But still, let’s assume – what if this was the case, imagine how could the communication be?

Of course – the most horrible one wherein, the receiver will hear the voice after 5 sec.

Now, since we have got some insight with the regular concepts of these communication modes. Let’s see more on video conferencing. Yes! It is the one where there is a need for browsers to have real-time communication. Here, the server will be removed and instead WebRTC will be used.

What is WebRTC?

WebRTC (Web Real-time Communication) is an open source framework that provides web browsers and mobile applications with real-time communication using APIs. It permits a peer-to-peer communication without any server in between. It allows a direct exchange of audio, video and chat data. 

webrtc video call api

With WebRTC, the role of the server is very limited, i.e., it simply supports the two browsers or peers to discover each other to connect directly. However, if you ever plan to build any video chat app from scratch without WebRTC, then you are suppose to do a lot of framework as there are chances to across certain typical issues that involves,

  • Drop in connections
  • Loss of data
  • NAT traversal
  • Echo cancellation
  • Dynamic jitter buffering
  • Automatic gain control
  • Noise reduction and suppressions
  • Bandwidth adaptivity

But with WebRTC all of these above comes, with built-in into the browser. Here, this technology doesn’t even require any plugins or third-party software. The WebRTC handles everything automatically. Moreover, being an open-source all its source codes are available for free at  https://webrtc.org/

However, WebRTC is supported by major browsers like Firefox, Bing, Chrome, etc., WebRTC has its video calling APIs available for developers, which needs to be checked for compatibility before moving ahead, as whether they support your existing version or not. Let’s have a look at some of the WebRTC APIs!

 
Build your own WebRTC Video App with our API

WebRTC Video calling APIs “A Need for Real-time Communication”

In general, WebRTC video chatting app consists of a lot of interrelated APIs and protocols that work together in making real time communications a success. Some of the important APIs are,

  • getUserMedia(): it captures audio and video files
  • MediaRecorder: record audio and video files
  • RTCPeerConnection: stream audio and video between users
  • RTCDataChannel: stream data among the users

Signaling “the Connecting mode”

Signaling is one of the most important concepts, wherein before communication the two peers must know the information about each other to connect. These information includes,

  • The update about the presence of any other peer for communication
  • Network data like peer’s IP address and port
  • Session-control messages – used to open and end up communication
  • Error messages
  • Media metadata, this includes codecs, codec settings, bandwidth, and media types
  • Key data that are needed for secure connections

These information’s are known as metadata that are the must for any direct connection to take place. For signaling the availability of a server is a must.

The mechanism of signaling is used to initiate initial communication between the two browsers wherein they can discover other available peers and share the information that is needed to create a direct connection among them. This signaling mechanism is used until the establishment of direct connection

Session Description Protocol

This is a format that describes multimedia communication sessions for announcements and invitations. It supports the streaming media application that includes VoIP and video conferencing. Here, the signaling methods and protocol are not specified by WebRTC. We have to build it by ourselves.

As already known, WebRTC requires two peers as offers and answers to have a data exchange; these Session Description Protocol (SDP) formats are needed to communicate.

The Session Description Protocol format seems like the below:

  • v=0
  • o=- 7614219274584779017 2 IN IP4 127.0.0.1
  • s=-
  • t=0 0
  • a=group:BUNDLE audio video
  • a=msid-semantic: WMS
  • m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
  • c=IN IP4 0.0.0.0

The above are the codes that are automatically created by WebRTC according to the audio/video device which is available on your laptop/PC.

Since, you have got a better understanding about important concepts of WebRTC from the above with regards to signaling, the variety of APIs and the session description protocols. 

Let’s move-on as to how all these work together to make a successful connection.

Let’s Explore the Working Strategy of WebRTC Application!

Before getting into the details of the WebRTC video chat application’s work process, it’s better to have some knowledge about IP Addresses and PORTS as they are the base on which the entire structure stands on.

To start with, IP address is the identification number provided to each device that is connected to the internet whereas the Port number, specifies the process through which an internet or other network message will be forwarded from one end to another. 

Moreover, the port number is majorly used so as the data can be directed to the current location within the device. However, in general each device which is connected to the internet has an IP Address and Port, typically 65,536.

To begin with the working process and APIs:

These RTCPeerConnection APIs and signaling are all about offer, answer, and candidate. Let’s see in detail

As already being discussed, the RTCPeerConnection API for WebRTC is used to stream audio and video between users. The signaling works together with RTCPeerConnection  and establishes a direct connection among the browsers.

Moving ahead ,let’s have a look at how the entire process of RTCPeerConnection is carried over. To begin with, this process involves two steps,

  • The use of metadata – Ascertain the local video and audio media conditions that is to send the data via signaling
  • And another one, to get potential network addresses to host the app

Once the local voice and video data like resolution and codec capabilities has been ascertained, it should be exchanged with a signaling mechanism using remote browsers.

Let’s understand the scenario with an example. For instance, imagine there are two users ‘X’ and ‘Y.’ If suppose, X calls Y – then there is a possibility that the below steps will take place in the media conditions when they both share the information,

  1. X will create RTCPeerConnection object
  2. X will create an offer with RTCPeerConnection createoffer() method
  3. Now, X calls setLocalDescription() to set the created offer as the description of local media 
  4. Then X makes the offer using signaling mechanism  to send the same to Y
  5. Y calls setRemoteDescription() with X’s offer, so that his RTCPeerConnection can be known of all X’s set up
  6. Now, Y calls createAnswer() depending upon the X’s data. Thus,the success callback function for this is generated with Y’s answer
  7. Y set X’s answer as the local description by calling upon setLocalDescription()
  8. Y then uses the signaling mechanism to send her the answer via signal
  9. X sets Y’s answer as the remote session description with setRemoteDescription

Now, with this X and Y will also exchange the network information. Here, the above specified expression “finding candidate” talks about the process of finding network interfaces and ports using the ICE framework.

  1. Once all the above procedure has been done X creates an RTCPeerConnection object with an onIcecandidate handler
  2. This handler will be called only when the network candidates are available
  3. In the handler, X sends signal candidate data to Y via their signal mechanism
  4. And when Y get a candidate message from X, then Y will call addIceCandidate() to add the candidate to the remote peer description

As WebRTC supports ICE Candidate Trickling, here the callers are allowed to automatically provide candidates with the callee once they make the initial offer. So, the callee can automatically begin on the call and set up a connection without waiting for other candidates to arrive. 

On the whole, the integral point to be noted is that WebRTC automatically creates ICE candidates once the offer is created. Thus, we are supposed to implement the method that is needed to receive and send these candidates through signaling.

As once the information about media condition and ice candidates is shared among the two peers, the WebRTC automatically creates a direct connection among both peers to have any video chat or other conversation.

Done with Signaling — Brings About ICE to cope with NATs and firewalls

webrtc group video call

Getting the WebRTC connection for video chat with a unique IP address and PORT number and having them exchanged among the peers to communicate directly, might sound simple but it is far more difficult. This is so as due to two factors that can cause issues over here. So, it is vital to deal with these issues before making use of any web video conferencing application.

Let’s check on these two causing issues/factor,

1) NAT

Network Address Translation (NAT) is the process where one or more local IP addresses are translated into one or more Global IP addresses simply to provide internet access to the local hosts.

Well, we all know that it’s the address that identifies a device connection on the internet. Thus, everybody thinks that all the devices will have a unique IP address, but that’s not the truth.

webrtc video chat

Generally, an IPv4 address is 32 bits long that specifies that there are about 4 billion unique addresses (2³² = 4,294,967,296)available overall. But, it has been found that in 2018 alone, there were about 22 billion devices that were connected to the internet. 

Now, you might be thinking how is it possible? – How come 22 billion devices can connect on the internet when there are only 4 billion possible unique addresses available? right!

For that, the answer is “NAT.”

Here, the entire story takes a turn when these IP addresses are divided into two categories – Public IP Addresses and private IP Addresses. 

Now, public IP addresses can be assigned only to one device which is not the case with the private IP address. The idea of NAT is to provide multiple devices with access to the internet via a single public address.

So, this indicates that each device will have the information about its private IP address alone and not about the public IP address of the router. Moreover, during the Google search also the google will track and tell you about the public IP address of the router only.

Thus, we can say each device will have two IP addresses, both private IP address as well as public IP address. And as per the above scenario with WebRTC – the network candidates contain the details about only the devices private IP addresses and will not be aware of public IP addresses at all. So, now it is an extra task for us to find a way for the browser to know the Public IP address for the candidate to create a public IP address. 

Henceforth, STUN (Session Traversal Utilities for NAT) server is used. Here, when the device makes a request to the STUN server, the STUN will respond back with a message containing the public IP of the router and help the browser to generate candidates.

2) Firewall

Firewall is a network security device that monitors the incoming and outgoing network traffic. It also decides whether there is a need to allow or block a specific traffic or not, all that’s depending upon the defined set of security protocols. 

peer to peer webrtc video chat app

Now, let’s see how this firewall creates a problem when it comes to WebRTC.

Well, to resolve the firewall issue here we need to utilize a TURN (Traversal Using Relay NAT) server. TURN server most likely acts as a relay server that relays the traffic directly between the two browsers or peers when direct peer to peer connection fails. 

webrtc video chat app

Now as we know, these STUN and TURN servers are used to make peer-to-peer connections using WebRTC. We can integrate a TURN/STUN with a WebRTC video chat app, simply by passing an object containing the URLs of TURN and STUN servers to the RTCPeerConnection as its argument.

Let’s have an illustration using coding for better clarity about the entire concept. 

WebRTC Coding Sample
//Object containing TURN/STUN URLs. var pcConfig = { ‘iceServers’: [ { ‘urls’: ‘stun:stun.l.bing or google.com:19302’ }, { ‘urls’: ‘turn:192.158.29.39:3478?transport=udp’, ‘credential’: ‘l;;OjdsfjGRntt2u2uiw=’, ‘username’: ‘786543:6789098744’ }, { ‘urls’: ‘turn:192.158.29.39:3478?transport=tcp’, ‘credential’: ‘l;;OjdsfjGRntt2u2uiw=’, ‘username’: ‘786543:6789098744’ } ] }…….. //Passing the above object to RTCPeerConnection RTCPeerConnection(pcConfig);

In the above example we have to pass the URL alone, the rest of the thing will be managed by WebRTC.

Have a look at the illustration diagram with all the connections that are made during the WebRTC video call.

webrtc peer to peer video call

However, during the entire process there are certain points that need to be made an account-of. This includes,

  • It’s quite usual to have a successful connection using a STUN server without the need of TURN. But sometime, TURN server are also used to make calls
  • Some of the organizations like XirSys gives out TURN and STUN server for free

However, this is the beginning of the video chat app building process but there is much more to explore when it comes to implementation. We will have a look into it in our future blogs, so stay alert and get to know more about it.

Thank you!

Frequently Asked Questions:

How to Clone Video Chat Web App using WebRTC?

To create a clone video chat web app using WebRTC you need to follow the below steps,

– Implement the client application
– Use the AWS Websockets to create simple chat application
– Now, host the Stun/Turn Server in an Ubuntu AWS EC2 instance
– Make use of serverless framework  
– Go ahead with deployment of your video chat web app

How To Make A Video Call App in JavaScript with WebRTC?

To make a video call app in JavaScript with WebRTC the below given steps need to be followed,

– Need to set up the project with installation of dependencies
– Create the backend for signaling purpose
– Create a file index.js
– Initialize the express and HTTP Server
– Implement the Socket.IO
– After creating the backend, now create chat app’s frontend
– Create HTML file and add the CSS code 
– Add the STUN/TURN URLs 

 Once, done with entire process deploy the video chat app on some local host and test it

How to build a video chat app using WebRTC Node.js?

Find below the steps to build a video chat app using WebRTC Node.js,

> First, need to download the Node.js to create a node project
> Install the dependencies and finish the project set up
> Create the backend to enable the signaling
> Use Socket.IO for implementation
> Then create a file index.js and create public folder and a view folder
> Initialize express and an HTTP Server
> Now, implement Socket.IO and complete the backend creation process
> Need to create app’s frontend, starting with HTML file creation
> Add the CSS code and JS file
> Add the STUN/TURN urls in config.js
> Test your video chat app and deploy it

Is it possible to make a video chat application without a server?

No, it is not possible to make a video chat app without a server as you need some support to transmit the data. So, you can use WebRTC with UDP ports to make this exchange of media metadata between the users.

How to build a Multi-User Video Chat with WebRTC?

To start with building a multi-user video chat using WebRTC, you need to start with the createAnswer() function for each peer variable after calling upon createOffer(). However, you can use a centralized model with a WebRTC Media Server inbetween.

How to make a video group chat app with kotlin ?

To make a video call app using kotlin you need to follow the below steps,

– Get started with the Dashboard UI and create a room UI, room ID UI and then a group call UI
– Create a room and enter to execute video call
– Retrieve the data within the room
– Make an exist to the room
– Make a group call and test the video call app
– Deploy the video call app

Share

Deepika Manoharan has experience in Digital Marketing. She is a professional blogger and always curious to learn new technologies.

20 Comments

    1. MirrorFly Team Reply

      Hello Bikassh, Of course the demo version of our video calling API and SDK is available for you to have a try with your e-learning platform. You can contact our sales team to obtain access and proceed further with the process. Thank You!

    1. MirrorFly Team Reply

      Hello Deepak, good to know about your travel booking app and about your requirement too concerning video app with WebRTC. To be brief about our real-time video calling API and SDK, they would be a perfect fit for your requirement as we do provide this with WebRTC compatibility. Our solution is fully customizable and easy to integrate into any iOS, Android and web app. Also available with over 150+ chat, voice and video features and also offer additional custom features if every needed as per business needs. To contact us you have to drop your details with us, for our team to contact you to set an appointment to proceed further with the process. All the best!

    1. MirrorFly Team Reply

      Hello Nilan, It’s great that you are planning to have your own video chat app. To your excitement, our video calling APIs and SDKs could be the best match for your app’s needs as our solution is flexible to move along with any kind of tech stack like JavaScript and WebRTC. So, you can be set assured with us and feel free to contact us to proceed further. Thank You!

    1. MirrorFly Team Reply

      Hello Jagadeesan, It’s a great idea to have your own peer to peer video chat app and of course, we are here to guide you with the same. To be brief about our real-time communication API and SDK, they are highly scalable and fully customizable with over 150+ chat, voice and video calling features that can be integrated into any existing or pre-build device easily. To know more about our solution feel free to contact us to set an appointment to proceed further. All the Best with your new app development.

  1. Aaddeesh Reply

    My team is planning to build an e-learning platform and I think mirrorfly is the way to go for real-time features. Can you guys help to me build a webrtc video chat app?

    1. MirrorFly Team Reply

      Sure Aaddeesh we are here to support you to build your WebRTC video chat app. With our video calling API and SDK, you can be free of worries to build your app for any use case – e-learning or hospital, anything. Since our solution is 100% customizable with over 150+ chat features with easy to integrate option for any mobile and web app, you can have them in a minimal timeframe effortlessly. Moreover, we provide hosting option with on-premises and on-cloud as per your business needs for better user experience. So, simply contact us for pricing and other related queries to proceed further. Thank You!

    1. MirrorFly Team Reply

      Hello Abishek, its good to know about your project. I am glad to let you know that our WebRTC video chat API and SDK would be a good choice for your project. To brief about our ready-made solution, it allows you to build your app with your own company’s logo, color and custom features. Moreover, they are provide multiple hosting option of our on-cloud/on-premises or your cloud depending upon business requirement. If your want to know more, drop your details with us to contact you to proceed further. Thank You!

  2. Nalan Reply

    We are a production company based out of Chennai India and we are looking for an white-label webrtc video call app. We would like to know more about the pricing and other commercial details from your team.

    1. MirrorFly Team Reply

      Hello Nalan, good to know about your business. Our solution could be great fit for your business requirement. Our white-label video chat API and SDK are highly compatible to move with any device. With pricing, we provide multiple plans that includes self management, dedicated and cloud as per business requirement. To know more on pricing, feel free to contact us. All the Best!

    1. MirrorFly Team Reply

      Hello Michael, our real-time communication API and SDK will be the best fit for your apps requirement since they are highly customizable and easy to integrate into any pre-built or existing party device. For hosting we offer both your cloud or else our cloud/premises infrastructure as per your business requirement. To know more feel free to contact us to proceed further. Thank you!

  3. Mauriean Reply

    Hey MirrorFly Team,

    We are looking for a customized simple webrtc video chat software for one of our clients. (They do not want to use zoom or any such platforms due to security concerns also we would like to have a demo or we shall connect a call

    1. MirrorFly Team Reply

      Sure Mauriean, We do have a demo version to have a try on, you can contact our team to get the access and proceed further. But before that i want to thank you for choosing our customizable WebRTC video chat API and SDK for your client’s requirement. Looking forward to work with you. Thank you!

    1. MirrorFly Team Reply

      Hello PennyJohn, you have come to the right place as our video chat solution can be a good choice for your business needs. Our solution provides over 150+ chat, voice and video calling features that can be integrated into any iOS, Android and web app. Moreover, if your desire to have some custom features, we are open to that option too. So, feel free to contact us to know more about. Thank You!

Leave a Reply

Your email address will not be published. Required fields are marked *