Click here to Skip to main content
Click here to Skip to main content

Video Chat Using HTML5 Web RTC ROAP(RTC Web Offer Answer Protocol) Model

, 19 Sep 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
This article demonstrates the use of WebRTC and Websocket features of HTML5.

 

Introduction 

This is going to be an interesting article for the web lovers as well as the ones who are very interested in multimedia. You know how rapid is the growth of technologies and we can say each day is a revolution. And I would like to introdue our hero "HTML5" who is recognised as a revolutionary in web domain. Very shortly you will notice how powerful is this fellow who can make many things happen just like that!

HTML5 is the latest and greatest version of the core language of the World Wide Web. HTML5 is the superset of HTML. HTML5 has made a revolution in designing and building web technologies. JavaScript is the official scripting language and it can be said as only supported language for HTML5 due to addition of many Javascript APIs which supports new features. HTML5 is most definitely a work in progress. It began to take shape back in 2004, and the official specification may not be actually complete until the year 2022.

What is HTML5?

HTML5 is made up of family of technologies. It consists of HTML markup itself, which has been expanded to include some new elements; there are also lots of additions to CSS with CSS3 that give you even more power to style your pages. And also consists of Javascript and a whole new set of JavaScript APIs that are available to you.

  • HTML5 is all about multimedia.
  • It’s all about more descriptive markup.
  • It’s about rich Internet clients. Instead of building clients with plug-ins like Flash.
  • HTML5 is the client-side storage and caching functionality.
  • Its all about web workers to make the page more responsive.
  • Its all about advanced selectors, animations.
  • Its all about the location track.
  • And finally we can say that HTML5 is the family of all these technologies.

HTML5 Supported Features

  • Video
  • Audio
  • 2D and 3D Graphics
  • Offline Caching
  • Enhanced Forms
  • Web Sockets
  • Geo Location
  • Drag & Drop
  • Web Workers
  • Local Storage

Supporters for the Family

  • HTML: It provides the structure to HTML page.
  • JavaScript : It provides action to HTML page.
  • CSS3: It provides design to html page.

Background

Many of us have seen so many Real Time applications where one among them is Video Chat. Achievement of Real Time communication has become very simple with the help of our buddy "HTML5". HTML5 supports Real Time communication through Web RTC(Web Real Time Communication.) In this article I would like to introduce to the features supported by HTML5(Web RTC) and also the steps required to achieve the video chat functionality. As I explained, HTML5 is family of technologies and I will be using some of its family members like Web Sockets, HTML5 video tags, and the Web RTC supported Javacript APIs to achieve Video Chat.

Prerequists

To achieve Video Chat in HTML5 we need to setup websocket server and a web server to fulfil or requirements. Below are the steps to create the environment for video chat.

  • VC++ runtime: The websocket we require uses VC++ runtime to execute some of its modules. So please install VC++ runtime as the first step and you can find the executable download link: Here
  • Python 2.7.3: The websocket server we require also uses python runtime. Please install Python 2.7 as the application is tested using this version only. You can find the download link: Here
  • Nodejs: Node.js is a software system designed for writing highly scalable Internet applications, notably web servers. So to install websocket any web socket server written in Javascript we need nodejs. You can find the download link Here
  • Web Socket server 1.0.3: Please install the websocket server using the following steps:
    1. Open command prompt.
    2. Move the the nodejs installation directory.
    3. Type "npm install websocket@1.0.3"
  • Chrome V.21.0.1180.89: The application is developed using ROAP model. Since the latest chrome browser has some updates in implementation of Remote communication and the implementation model it uses is JSEP(Javascript Session Establishment Protocol). The video chat based on the newer version of chrome using JSEP model will be covered in the next series of video chat tutorial. You can find the download link for the specified chrome version: here

    Note: Please uninstall the chrome browser if already installed and use the chrome version 21.0.1180.89 downloaded. Donot install the chrome downloaded. Here are the steps to use the chrome browser as standalone.

    1. Uninstall the chrome browser if any installed.
    2. Unzip the downloaded Chrome version 21.0.1180.89 using winrar.
    3. Again unzip the obtained zipped file.
    4. Move to the unzipped directory and copy paste the chrome.exe to the directory exisitng in the same level.
    5. Click the chrome.exe to use it as a standalone browser.

    Please follow this steps for the application to work as expected. This is observed after lot of R and D work.

 

Using the Application

To run the application we need to make sure that the above stated steps are properly followed. Next comes the hosting of application and starting the websocket server. Following are the steps to be followed to view the demonstration of video chat:

Note:server.js is the name of the server file. Once you start the server you can see how the command prompt looks like

 

Note: Please make sure that both are on the same network and you are not behind any proxy server. This is because proxy server may sometimes blocks the ws protocol.

  1. Connect the web cam if it is a desktop PC or ignore incase of laptop as it has inbuilt cam.
  2. Download the demo project and host it in any web server(May be apache or IIS)
  3. Download the server javascript file as provided in this article and place it in the nodejs installation directory.
  4. Start the websocket server using following steps
    1. Open command prompt
    2. Move to the nodejs installation directory
    3. Type "node server.js"
  5. Move to the video chat application directory(hosted on webserver) and open the main.js file located in js directory.
  6. Make changes to the first line of the file ie replace the ip address to the address where websocket server is running
    Ex:var socket=new WebSocket('ws://192.168.1.5:1337/'); (Replace the ip address marked as bold to the one where your websocket server is running. It will be usually your systems IP).
  7. Note: Open your standalone chrome browser and enter chrome://flags in the address bar which takes you to the developer settings page of the chrome Please enable "Enable Media Source API on video elements" and "Enable PeerConnection" flags as the HTML5 features are still in development and it is not available as direct features.

     

     

  8. Use the standalone chrome to access the video chat application hosted in web server.
  9. Access the video chat application from other system which acts as a peer for your application.
  10. Use any name to login which will be displayed in the buddy list of your app.
  11. Start the stream using the start button placed beneath the first video element
  12. The browser prompts for your permission to start the camera and please click on yes.
  13. You find video stream in action. Same step is followed on the other peer to start the video stream.
  14. So once the videos are fetched from the web cam, click on stream button to start exchanging the SDP and followed by content. 
  15. Finally you find your buddy's video in the second video element and vice versa in your peer buddy's application.

Using the Code (Building the Application)

HTML5 provides a very interesting feature Web RTC. This Web RTC provides a way for real time communication without the use of any third party plugins. As you know even the latest Google hang up uses gtalk plugins to achieve video chat. But this Web RTC provides a clean approach to achieve Video chat without much difficulty and without intervention of any third party plugins or modules. The video tag and the web RTC javascript APIs provided can easily fetch you the things as your way. To achieve video chat the application goes through three stages as shown:

  • Fetch the videostream.(From the connected video device)
  • Fetch the SDP(Session description protocol) by connecting to Google STUN server
  • Exchange the SDP with the peer using websocket server and vice versa.(Signalling)

Fetch the Video Stream

Web RTC provides a very good and interesting APIs to fetch the video stream from the connected video device. Once the stream is received from the device , the stream is added as a source to the video tag where you can view the live data of your video device. All the Web RTC javascript APIs are event driven and callbacks based. Here you can find the code snippet for doing the same:

  try 
  {
   //Get the reference of video elements.
    sourcevid = document.getElementById('liveVideo');
    remotevid = document.getElementById('remotevideo');
    //Get the video stream from the connected deivce.
    //Api to fetch the user media that is the meida from connected device. You can observer here successCallback and errorCallbacks
    navigator.webkitGetUserMedia({audio: true, video: true}, successCallback, errorCallback);
  } 
  catch (e) {
  	//getUserMedia("video,audio", successCallback, errorCallback);
    navigator.webkitGetUserMedia("video,audio", successCallback, errorCallback);
  }
  
  //On success of fetching the video the underlying function is called with argument as stream object.
  function successCallback(stream) {
  	//Provide the stream object to video element.
      sourcevid.src = window.webkitURL.createObjectURL(stream);
      localStream = stream;
  }
  
   //On Error of fetching the video the underlying function is called with argument as error object.
  function errorCallback(error) {
  	//log the error code to the console. It can be viewed in the inspect element of the browser.
      console.error('An error occurred: [CODE ' + error.code + ']');
  }

Fetch the SDP

SDP stands for Session description protocol which contains all the details like Ip address, the format of the video and so on. This can be obtained by connecting to the Google STUN server using webkitPeerConnection API. You can find the code snippet for doing the same.

  try 
  {
  	//Create peerconnection object with the arguments as Google STUN server and callback function on success
      peerConn = new webkitDeprecatedPeerConnection("STUN stun.l.google.com:19302", onSignal);
  } 
  catch (e) 
  {
    try 
    {
    	//This is the API which is supported in chrome which we are referring in this tutorial. Now this is replaced by webkitPeerConnection00(JSEP model)
      peerConn = new webkitPeerConnection("STUN stun.l.google.com:19302", onSignal);
    } 
    catch (e) 
    {
    	//This prints the messsage in the chrome console. You can open chrome console to see if any errors.(Inspect element)
        console.log("Failed to create PeerConnection, exception: " + e.message);
    }
  }

The webkitPeerConnection API accepts two arguments. First one is the google STUN server location and the second is the success call back function which receives the SDP message. So once the SDP message is received, then the message is sent to the peer using websocket server. This Process is known as "Signalling". Signalling is not a part of Web RTC. You need to select or find the way to handshake between peers using some means. Here I have selected web socket server for achieving the signalling part as web sockets is the new feature which is supported by HTML5 and it has many advantages in concern to performance.

Exchange the SDP with the Peer using Websocket Server

Once the SDP message is received from the Google STUN server, the SDP message is sent to websocket server. The websocket server in turn sends it to the remote peer who is connected. The websocket server is written in JavaScript and we will discuss it in the later part of this article. As soon as the remote peer receives the SDP it processes the message and it will digest the things. Now it is the role of remote peer to fetch the SDP and send it to its remote peer(the one who has send the SDP) in the same way. The first peer digest the SDP message as soon as it receives it from remote peer. In this way the handshake takes place with the help of web socket server. The code snippet shows how you can receive and send the SDP to and fro.

//This is a success call back function which receives SDP message from the Google STUN server.
function onSignal(message) 
{
  //As soon as the SDP is received from Google STUN server it is messaged to websocket server.
  socket.send(message);
}

//register the event which is invoked when websocket sends the message.
// accept connection request
  socket.addEventListener("message", onMessage, false);
  function onMessage(evt) {
    console.log("RECEIVED: "+evt.data);
    if (!started) {
      createPeerConnection();
      console.log('Adding local stream...');
      peerConn.addStream(localStream);
      started = true;
    }
    // Message returned from other side
    console.log('Processing signaling message...');
    peerConn.processSignalingMessage(evt.data);
  }

There are many more checks and conditions here but it is not shown in the snippet. The main logic and the APIs involved are concentrated upon. Once you download the demo application you can walk through all the checks and conditions applicable. This function is invoked in the remote peer.

WebSocket server(server.js)

Web socket server is the one who takes care of signalling part. It receives messages from the peers and send messages to the peers. HTML5 has full support for websocket features and one main advantage of websocket server is, the connection is persistent. The websocket as of now supports only utf8 text data and partial support for binary data. The code snippet for websocket server which runs on nodejs is as below:

var WebSocketServer = require('websocket').server;
var http = require('http');
var clients = [];

var server = http.createServer(function(request, response) {
 
});
//Log the message on which the server is listening.
server.listen(1337, function() {
  console.log(" Server is listening on port 1337");
});

// create the server
wsServer = new WebSocketServer({
    httpServer: server
});

//Log if any error
function sendCallback(err) {
    if (err) console.error("send() error: " + err);
}

//This is called when any client connects to the server.
wsServer.on('request', function(request) {
    console.log(' Connection from origin ' + request.origin + '.');
    var connection = request.accept(null, request.origin);
    console.log(' Connection ' + connection.remoteAddress);
    clients.push(connection);
    
    //All the messages are handled here
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            // Display the received message
            console.log(' Received Message ' + message.utf8Data);
            //Broadcast to all the users connected.
            clients.forEach(function (outputConnection) {
                if (outputConnection != connection) {
                  outputConnection.send(message.utf8Data, sendCallback);
                }
            });
        }
    });
    
    connection.on('close', function(connection) {
        // close user connection
        console.log((new Date()) + " Peer disconnected.");        
    });
});

Since the websocket server is considered as the echo server and supports only text data. You can download the server code and walk through it to understand the implementation. The connection.on('message', function(message) is the main part of the server where server receives the messages here. The messages are interpreted using the conditions and are processed to perform the required action. The websocket here acts as a signalling medium. In WebRTC you can make use of any signalling process like SIP server, Jingle etc. But here as Websocket is also an important concept in Html5 , I have used Websocket for better understanding.

Points of Interest

This is a very interesting concept, just using the HTML5 features to achieve video chat. This made me think in terms of both client and server. I really loved doing it as it gave my brain some work. Actually when you download the application and have walk through, you find some things annoying. It requires some time to know which part of the code is run on peers, as the local and remote peer both runs the same script Smile | <img src=  . You can have a code walk through which will clear many of your doubts. I had a very good experience in doing the things. Please take some time to approach and analyze the code, you will really love it.

Points to be noted:

 

  • HTML5 is family of technologies.
  • Javascript is the official language of HTML5.
  • HTML5 supports Real Time Communication using Web RTC
  • Websockets supports utf8 text and binary data. 
  • SDP stands for Session Description Protocol(Terminology derived from SIP)
  • SDP contains all the information required to establish a session like IP address, the data format, codec details so on.
  • Websocket Protocol is persistent(Maintains the state of connection)
  • Websocket server can be used effectively for text based chat applications.

 

Note 

This demo uses ROAP model which is supported by chrome version above 20 and below 22. The latest chrome uses JSEP model where there is slight changes in the implementation approach. JSEP model may become the final and stable approach for Web RTC. JSEP uses xmlHttpRequest for Signalling. The JSEP model demonstration will be presented in the next article. Using JSEP model, the application can be run in the latest chrome versions. Please vote for the article and provide your suggestions if needed.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sandeep sunku
Software Developer Bangalore
India India
Indian.
He is a software developer. He loves programming. Always willing to work on new technologies.
 
His only passion is "Updating on technologies"
 
Want to know more about me?
Visit http://www.sandeepsunku.com

Comments and Discussions

 
Questionnot understand but still cool PinmemberMichael Xiaols24-Sep-14 16:04 
GeneralRe: not understand but still cool PinmemberMichael Xiaols24-Sep-14 16:05 
Question5 Here PinmemberRene Pilon20-Sep-14 12:38 
GeneralMy vote of 5 PinmemberEdo Tzumer4-Nov-12 20:40 
Questioncant run the example PinmemberMember 31860325-Oct-12 17:54 
AnswerRe: cant run the example PinmemberSandeep sunku27-Oct-12 4:33 
GeneralRe: cant run the example PinmemberMember 31860330-Oct-12 18:39 
GeneralMy vote of 4 PinmemberSangeethaG2322-Oct-12 17:48 
GeneralMy vote of 5 PinmemberAnil Kumar Khichar22-Oct-12 7:44 
GeneralMy vote of 5 Pinmembernagasankeerth21-Oct-12 23:50 
GeneralMy vote of 5 PinmemberSruthiKopparam21-Oct-12 17:51 
GeneralMy vote of 5 PinmemberAmbre Sachin19-Oct-12 22:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141030.1 | Last Updated 20 Sep 2014
Article Copyright 2014 by Sandeep sunku
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid