WebRTC, Plugin-Free Real Time Communication for the Internet

Currently, most browsers come with Flash installed and a lot of web developers are very familiar with flash. However, there is a some problems with Flash such as being a single-vendor proprietary that is closed source, proprietary codec tools, and many others that I could write a full article.

Well..What is WebRTC?

For this article and upcoming articles, I want to talk about WebRTC, a somewhat new HTML5 Feature. Currently only Chrome, Opera and Firefox supports this spec, hopefully soon the other browsers will support this. WebRTC stands for Web Real-Time Communication and this is a really exciting topic for me because I love building and experimenting with real time data communication and in the future,it’s going to be easier then ever to do this in the browser.

Before, we could make a chat client using web sockets and have our server push the data to each client but now with WebRTC the browser can make a Peer-to-Peer connection and could allow you to bypass your web server all together. This is so cool! Also with WebRTC, you can communicate with your microphone, video, or arbitrary data over TCP or UDP.

The WebRTC API has 3 API Extensions but for this article, I want to talk about what the Media Stream API Extension(also known as getUserMedia).

When building your application with Google Chrome on your laptop, one way to test your code locally is to open google chrome with some special flags so that you can access your your file system and set permissions properly. In firefox, you don’t need to do this.

$ open -a "Google Chrome" --args --allow-file-access-from-files --args --disable-web-security

getUserMedia
We are going to build a very simple application to just display our webcam and our microphone onto the browser with out using any plugins.

var constraints = { audio: true, video: true }
navigator.getUserMedia(constraints, successCallback, errorCallback);

We can get access to the clients local devices in a synchronized stream using the getUserMedia function from the navigator object.The constraints object is the first parameter you pass into getUserMedia and this requests to the user what input methods you want to use from their computer. If granted, then the successCallback is fired and of course if not granted then the errorCallback will get fired.

For our successCallback, the localMediaStream is passed into the function containing the user media data from their computer. For this example we want to display their data back to them on the browser. We create a Blob URL with the localMediaStream and set it as the source for a video element on the page.

 function successCallback(localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream); // Blob URL
};

Just like that, our video and audio is being played on to the browser. In an upcoming article, I will be talking about another API Extension to WebRTC called RTCPeerConnection. This will allow you to send the data received from getUserMedia over the network and on to the other client.

For the working example, here is the source.
https://github.com/ericraio/webrtc-examples/tree/master/getusermedia

Also check out HTML5Rocks article for more information about this topic.
http://www.html5rocks.com/en/tutorials/webrtc/basics/