Click here to Skip to main content
14,972,848 members
Articles / Web Development / CSS
Posted 30 Dec 2012


1 download
74 bookmarked

Video Conferencing using WebRTC

Rate me:
Please Sign up or sign in to vote.
4.82/5 (23 votes)
11 Jan 2013Public Domain4 min read
Video Conference in HTML5 using WebRTC with websockets and javascript only.

Image 1


This project is implementing a simple video conference application, where you can do an online video conference between two persons opening the same html page. This is done via WebRTc and Websockets.


Video Conferencing is hard and needs many things like Wideband codecs (voice and video), Echo cancellation, Automatic Gain Control, Noise reduction/suppression, Dynamic jitter buffers, Error concealment, Network Traversal, P2P protocols, and Session setup.

However, now it became much easier with WebRTC as you can do video conferencing in browser without plugins!

 First let's know what is WebRTC? 

WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs.

The mission of WebRTC is to enable rich, high quality, RTC applications to be developed in the browser via simple Javascript APIs and HTML5.

The work is still going on WebRTC and it is supported by Google Chrome Chanary/Firefox Aurora/Opera Labs.  

What you need to do it?

To do video conferencing we need to do five things:

1. Set up video element in an html page:


2. Access local devices (camera,microphone):


3.  Display a/v from local or remote peer:


4. Connect to remote peers


Using the code 

First, to access local device and display it in your html page we use this code: 

// Replace the source of the video element 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 occurred: [CODE ' + error.code + ']');

Browsers implementations for GetUserMedia(): 

WebKit (Chrome):

set video.src directly


Not implemented until now. 

Second, we need to set up a peer connection:

We can establish the connection via Websockets, or use a channel management server on Google’s appengine (Like the open source apprtc application). I decided to use Websocket server to be working as two-way communication channel.

WebRTC uses PeerConnection to communicate streams of data. However, we need a mechanism to send control messages between peers, a process known as signalling. You can choose whatever messaging protocol you prefer, such as SIP.

  • Signaling Procedure:
    - Caller sends offer.
    - Callee receives offer.
    - Callee sends answer.
    - Caller receives answer.

To start a session WebRTC client needs local & remote configuration information so those configuration information are sent by SessionDiscreption which conforms to SDP. The SessionDescription sent by the caller is known as an offer, and the response from the callee is an answer. This architecture is called JSEP, JavaScript Session Establishment Protocol.

Enabling chat messaging via WebRTC
 I was interested to get text chat working with WebRTC as I knew that it is not an available feature since you can stream video/audio only. What I did to get it working was modifying the signaling procedure a little bit. So, when the Caller wants to send a text message I make him send a chat message in SessionDescription message and once the reciever recieves it he add it to the chatting iframe he have. 

Third, we need to add the remote stream after creating the peer connection: 

var remotevid = document.getElementById('remotevid');

try {
    logg("Creating peer connection");
    var servers = [];
    servers.push({'url':'stun:' + stunServer});
    var pc_config = {'iceServers':servers};
    peerConn = new webkitRTCPeerConnection(pc_config);
    peerConn.onicecandidate = onIceCandidate;

 catch (e) {
   logg("Failed to create PeerConnection, exception: " + e.message);

  peerConn.onaddstream = onRemoteStreamAdded;
  peerConn.onremovestream = onRemoteStreamRemoved;

function onRemoteStreamAdded(event) {
  logg("Added remote stream");
  remotevid.src = window.webkitURL.createObjectURL(;

Points of Interest

This project was interesting as I learned something new and I also was even interested in implementing and trying something like capturing pictures from the camera stream.

So, to take a picture from a camera stream do create canvas element:

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

And also we need a buton to take a picture and an img tag to set the captured picture to it:

<button id="btn">Take photo</button>

<img src="" id="photo" alt="photo" style="margin-left:90px;">

And ofcourse you have to have video element as we learned above. Then:

startbutton  = document.querySelector('#btn');

startbutton.addEventListener('click', function(ev){
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);

Also, something more interesting was to apply live effects to the camera stream using CSS.

How to run the code

1. Download the source code.
2. Move the source files to your www directory (You need to have an http server running locally).
3. Install node.js (From ) to be able to run the server using it.
4. After installing node.js (And the required commands with it) open Node.js Command Prompt.
5. Move to the directory were the websocket server is located (websocket-server.js).
6. Write this command: node websocket-server.js.
7. Now the server is running and listening on port 1337.
8. Open VideoConference.htm and modify the ip address in the code to match your computer's network ip (or you can write ).
9. Now, the other client should do steps 1-2 & 8 (In step 8 he should put the ip address of the computer who has the server running).
10. Now, after opening VideoConference.htm (In Chrom Canary browser), the server should detect the connection from both of you.
11. After both clicking on start and now you can see youself. Click on Connect to see the remote client also.


This work was part of a project for SWE 344 Internet Protocols and Client-Server Programming (Fall 2012).
The project was suggested by my instructor,  Dr.
Nasir Darwish. 


1. GingerTech:

He implemented the websocket server and I adapted it to my application (The demo there is not working because it is an old one and uses the old depricated APIs.

2. apprtc applicatino done by Chrom developers:

To understand the process and see the new APIs.


For general information and demos:

4. HTML5Rocks:

To get general information and understand the process.

 5. Photobooth example:

For the CSS filters to apply on live stream.

Source Code 



v1.0 : Initial release - 24th of December 2012.


This article, along with any associated source code and files, is licensed under A Public Domain dedication


About the Author

Hussain Mubaireek
Saudi Arabia Saudi Arabia
Software Engineer at KFUPM university.

Comments and Discussions

Questionwhat i do for USER 2 system Pin
Member 1312932224-Feb-18 21:28
MemberMember 1312932224-Feb-18 21:28 
QuestionHttps required ? AND Run code in xampp server (without Install node.js is Compulsory )? Pin
krishnapatel131018-Apr-16 19:31
Memberkrishnapatel131018-Apr-16 19:31 
GeneralMy vote of 5 Pin
krishnapatel131018-Apr-16 3:51
Memberkrishnapatel131018-Apr-16 3:51 
GeneralMy vote of 5 Pin
krishnapatel131018-Apr-16 3:50
Memberkrishnapatel131018-Apr-16 3:50 
QuestionWebRT Pin
lestari sintika15-Apr-16 3:23
Memberlestari sintika15-Apr-16 3:23 
GeneralMy vote of 5 Pin
john_172630-Mar-16 20:04
Memberjohn_172630-Mar-16 20:04 
GeneralMy vote of 1 Pin
john_17261-Mar-16 10:39
Memberjohn_17261-Mar-16 10:39 
GeneralRe: My vote of 1 Pin
john_172630-Mar-16 20:03
Memberjohn_172630-Mar-16 20:03 
Questionmultiple web servers? Pin
john_172631-Mar-16 5:19
Memberjohn_172631-Mar-16 5:19 
BugError at Loading page Pin
Member 1233922119-Feb-16 11:04
MemberMember 1233922119-Feb-16 11:04 
Questionsub:webRTC Pin
Member 114866535-Jan-16 23:22
MemberMember 114866535-Jan-16 23:22 
QuestionHELP ME Pin
Nano Anur28-Nov-15 19:28
MemberNano Anur28-Nov-15 19:28 
QuestionLocal stream not running yet. Pin
Nano Anur26-Nov-15 4:05
MemberNano Anur26-Nov-15 4:05 
AnswerRe: Local stream not running yet. Pin
Member 125082546-May-16 22:23
MemberMember 125082546-May-16 22:23 
QuestionRegarding WebRTC Support Pin
Usefuldesk2-Jun-15 1:11
MemberUsefuldesk2-Jun-15 1:11 
QuestionReg for Android App Pin
karthikdhanajeyan29-Apr-15 22:32
Memberkarthikdhanajeyan29-Apr-15 22:32 
Questionusing this code Pin
Permadi Wibisono26-Oct-14 6:07
MemberPermadi Wibisono26-Oct-14 6:07 
Questionhow I connect from another computer on the same network? Pin
kathe-ruiz07@hotmail.com4-Sep-14 11:35
Memberkathe-ruiz07@hotmail.com4-Sep-14 11:35 
GeneralMy vote of 5 Pin
IssaharNoam22-Oct-13 2:21
MemberIssaharNoam22-Oct-13 2:21 
GeneralMy vote of 4 Pin
Mic6-Aug-13 14:57
MemberMic6-Aug-13 14:57 
QuestionWebRTC conferencing demo with NGVX Pin
Member 1016029617-Jul-13 6:11
MemberMember 1016029617-Jul-13 6:11 
QuestionHow to allocate unique id to the server url Pin
sunil.panthanghi27-Jun-13 20:51
Membersunil.panthanghi27-Jun-13 20:51 
Jay-Arr Ballesteros4-Mar-13 1:40
MemberJay-Arr Ballesteros4-Mar-13 1:40 
QuestionProxy Server in WebSocket Server for HTML5 Pin
adeel8428-Feb-13 7:16
Memberadeel8428-Feb-13 7:16 
QuestionServer Problem Pin
adeel8427-Feb-13 3:26
Memberadeel8427-Feb-13 3:26 

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

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