Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to make a simple video conferencing application using WebRTC?

In this tutorial, we shall learn how to make use of WebRTC and create a video conferencing application that can help us stay connected.

The application of technology in various different ways makes our lives easier. With the Internet, we have ways and means to communicate over various different applications. Chatting was popular till calling became the norm. And now, we have video chatting applications that help us stay directly connected.

Video chatting applications were pretty hard to build. These required the use of Wideband codecs for both, video as well as audio, and the likes of -

  • Automatic Gain Control,
  • Echo cancellation,
  • Dynamic jitter buffers,
  • Noise reduction or suppression,
  • Network traversal,
  • P2P protocols,
  • Error concealment, and
  • Session startups.

Here, we take one such look into how to create a video chatting application by using the likes of WebRTC.

What is necessary?

To build a simple video conferencing application, we require the use of –

  • WebRTC
  • Websockets.

What exactly is WebRTC?

WebRTC happens to be an open source project that is free and powers web browsers with Real Time Communication features. It does so with the help of simple JavaScript APIs and HTML5.

WebRTC states that its mission is to enhance the possibility to develop high quality and rich applications that can be developed in a browser. So far, work is still underway with WebRTC and it has also been supported by major browsers such as Google Chrome, Firefox, Opera, etc.

How is WebRTC beneficial?

WebRTC proves to be very advantageous as it helps in saving costs. In fact, WebRTC does not require the use of a middle-man server and that can help save you big on costs that involve the use of bandwidth.

The entire package of WebRTC includes P2P, Video/Audio codecs, Data streaming that allows the live transmission of chats across many peers. It is also said to include methods for peer-to-peer connections by the means of a common STUN, in order to generate ICE candidates.

Lastly, WebRTC is easy and ready to use. It is truly great for mobile app development too, and gives developers an extra edge.

We shall now go into the main course, where we will learn to develop an application that permits video conferencing.

What you are required to do first?

Setting up a video chat applications requires some pre-requisites. Here are some four things that you need to do to build a video conferencing application.

  • The first thing is to setup the video element in a HTML page.

<video> </video>

  • Access the local devices that will be used in the process.


  • Displaying the audio/video from local or the remote peer.


  • Then connect to remote peers.


Accessing local device and setup on HTML page

Now that we are done with the pre-requisites, we shall find a means to access the local camera device and then display it on the web page.

Listing 1: Code to access local device and display on html page

// You should be replacing the source of the video with the stream from the camera
navigator.webkitGetUserMedia({audio: true, video: true}, successCallback, errorCallback);
catch (e) 
navigator.webkitGetUserMedia("video,audio", successCallback, errorCallback);
function successCallback(stream) {
  sourcevid.src = window.webkitURL.createObjectURL(stream); = "rotateY(180deg)";
  localStream = stream;
function errorCallback(error) {
  logg('An error has likely occurred: [CODE ' + error.code + ']');

Implementations of GetUserMedia() by various browsers

The code given above makes use of Google Chrome browser implementation. However, for other browsers, one needs to use their implementations, which are provided below.

Chrome -


Opera -

 set video.src directly

Mozilla Firefox -

Internet Explorer - Not yet implemented till now.

Setting up of a peer connection

The next step in the tutorial is to set up a peer connection. Now, this can be done on two separate methods. One is the establishment of a connection by the use of Websockets, which is what we have resorted to use as a two way communication channel in this tutorial. The other method is the use of a channel management server of Google’s appengine, very much like the apprtc application.

WebRTC makes use of PeerConnection for the communication of streams of data. However, there is the need to have a certain mechanism implemented that allows the sending of control messages between peers. This method is also known as signaling. One can choose any protocol of choice to send such messages, but here, we have opted for SIP protocol.

Signaling Procedure

  • Offer sent by the caller
  • Offer received by the callee
  • Answer sent by the callee
  • Answer received by the callee.

In order to start a session, the WebRTC client needs to make use of local, remote configuration information. Such configuration information is sent by SessionDiscreption, which is also known to conform to SDP. Also, the SessionDiscreption sent by a caller is labeled as an offer, while that responded by a callee is termed as the answer. This architecture is known as JSEP, which expands to JavaScript Session Establishment Protocol.

Adding remote stream

After the creation of the peer connection, we need to add a remote stream. This is done with the help of the code provided below.

Listing 2: Adding remote stream

var remotevideo = document.getElementById('remotevideo');
try {
    logg("Creating a peer connection");
    var server_s = [];
    server_s.push({'url':'stun:' + stunServer});
    var pcconfig = {'iceServers':server_s};
    peerConnect = new webkitRTCPeerConnection(pcconfig);
    peerConnect.onicecandidate = onIceCandidate;
 catch (e) {
   logg("Failed to create a Peer Connection, exception: " + e.message);
  peerConnect.onaddstream = onremotestreamadded;
  peerConnect.onremovestream = onremotestreamremoved;
function onremotestreamadded(event) {
  logg("Added the remote stream");
  remotevideo.src = window.webkitURL.createObjectURL(;

Some additional features

Besides the building up of a video conferencing application, one can also employ certain nifty tricks to add some extra bonus features alongside the main application. Some of the extra stuff that we added here was that of a chat feature and secondly, capturing pictures from the camera stream.

Enabling chat on WebRTC

Generally, WebRTC only streams audio and video. However, one can get chat working on it despite it not being available by default.

To do so, one needs to toy around a little with the signaling procedure. When the caller looks to send a text message, you can make hi/her send a chat message in the SessionDescription message. And, once the receiver gets the message, he/she can add it to the chatting iframe that’s present.

Capturing pictures from camera stream

In order to take snapshots from the camera stream, one needs to first create a canvas element.

<canvas id="canvas"> </canvas>    

Secondly, one needs to use a button that will capture the picture, and along with it, an image tag that sets the captured picture to the tag.

 <button id="btn">Take photo</button>
<img src="" id="photo" alt="photo" style="margin-left:100px;"> 

And lastly, we need to add the video element too.

 start_button  = document.querySelector('#btn');
start_button.addEventListener('click', function(eve){
  }, false);
  function takeapicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var dataa = canvas.toDataURL('image/png');
    photo.setAttribute('src', dataa);

Besides this, one can also add some extra effects to the camera stream by making use of CSS elements that are available at your disposal.

Running the code

Here are the steps that will allow you to run the code.

  • Get hold of the complete source code.
  • Move all of the files source code files to the www directory. Make sure you have a local http server running.
  • Download and then install node.js from This allows you to run the server.
  • Now, you will need to open the Node.js Command Prompt.
  • Then go to the directory that houses the websocket server.
  • Type the command – node websocket-server.js
  • The server then starts running and will be listening on port 1337.
  • Change the IP address to your IP in the code that meant for the video conferencing application. You can also key in
  • Now the other client will need to carry out all the steps in 1-2 and then step 8. Here he/she needs to insert their IP.
  • Now, once you open the main HTML file for video conferencing, the server will detect both the connections.
  • Once you click on the start button, you will be able to see each other. Clicking on connect shows the remote client as well.

Following is a sample WebRTC demo page.

WebRTC demo

Figure 1: WebRTC demo page


Building a video conferencing application can prove to be extremely helpful, and as mentioned before, save on huge data costs. Very often, a simple video chat application can be just what is required to connect, without the involvement of third-party applications. This is the idea that has been demonstrated.

The above given tutorial is a simple one that teaches you as to how you can get going and develop your own video conferencing application using WebRTC and Websockets. Lastly, it also takes you through the steps on how you can get your application running.

Website: Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login