WebRTC – Getting started !

I have got some exciting news – The WebRTC project is gaining some real momentum now. How do I know this? For starters the weekly Mozilla WebRTC meeting on Google+ has become crowded. A couple of months back when I first joined the hangout to see what WebRTC was all about there used to be hardly six people. Now, I have to fight for space on the hangout as only ten people can be accommodated at a time, and people have to keep dropping off after their relevant part is done to accommodate others (Yes! we need a better meeting solution – hopefully WebRTC will cater to our needs). The other reason for this gain in momentum is more people are getting involved as the components are getting stabler and better by the day thanks to the super enthusiastic, skilled and hardworking people involved in the project. Presently, there are a few developers working on creating some cool demos (and hopefully tutorials) for WebRTC which is exactly what we want now. Now, gUM is pretty much stable. Peer Connection has made real progress with a few demos where you could make video calls and Datachannels is being used to create a demo – this is a social app with filesharing also included as of its many awesome features. This is what I call real progress. Itching to try out WebRTC? Don’t know where to start? Want to know what can be done? Well, I am hoping this post will be of some use to all those who are deluded by these questions and maybe it will even fuel your interest to start experimenting with WebRTC.

A good place to start exploring WebRTC is gUM. My first reason for suggesting gUM is that it is the most stable and least buggy of all the WebRTC components. The second reason is that it is the easiest to use for a newbie as there is very little to learn about how it works and it can be easily integrated with whatever you are working on 😉 I forgot to mention the obvious, the reason I use it – its just so much  FUN! 🙂 A simple demo on gUM created by Anant is the best place to try out gUM. Here, you can see that you can get audio and video independently or together, how cool is that? And of course for those of you obsessed with yourselves there is an option to take a photo of yourself! Yay! To get this demo to work you will need the Nightly version of Firefox from nightly.mozilla.org Then you will have to change the preferences which can be accessed by typing about:config in the address bar. Then toggle the following two preferences to true – media.navigator.enabled and media.navigator.permission.disabled. This should have you all set for the demo and voila! Your first look into WebRTC! (*Any bugs or problems you have, we would be happy to hear about them and fix them asap – you can report on bugzilla or just add a comment to this post*)

To get a better idea on how to write code check out the source of the demo on gUM that I had previously mentioned. Now, let us walk through the code or rather the part that matters the most and help you get a better idea on how this works! I am sure you’ll manage with the rest of the code. (My explanations might sound naive to a first time user but you are welcome to mail me or catch me on IRC)

    try {

The gUM function starts here. You can specify the parameters you want to pass through the param argument. A valid set of parameters would be the ones which determine the values of video_status, audio_status and picture_status bool values used later on.

window.navigator.mozGetUserMedia(param, function(stream) {
message.innerHTML = "<p>Success!</p>";

Depending on the bool value of video_status the video stream is obtained and played or the code in the if block is ignored.

if (video_status) {
 video.mozSrcObject = stream;

Depending on the bool value of audio_status the audio stream is obtained and played or the code in the if block is ignored.

} else if (audio_status) {
audio.mozSrcObject = stream;

Depending on the bool value of picture_status the picture is taken and displayed or the code in the if block is ignored.

} else if (picture_status) {
picture.src = window.URL.createObjectURL(stream);
picture.onload = function(e) {

The function and catch statements are used to display error messages in case gUM fails due to some of the commonly known ways of incorrect usage.

 }, function(err) {
message.innerHTML = "<p class='error'>" + err + "</p>";
} catch(e) {
message.innerHTML = "<p class='error'>" + e + "</p>";

For more info on gUM you should check out the following links –
W3C Draft

First part of WebRTC landed

gUM has just Landed

gUM still image capture for Android has landed

Talk on WebRTC


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: