Getting Started With JavaScript's WebRTC

WebRTC is a free open sourced technology that allows your everyday browsers to perform Real Time Communication through a set of simple API's written completely in JavaScript. As many people know, real time communication is not so easy even now in 2016. You normally have to pay some third party to use their libraries and usually they revolve around using older unsafe technologies like Flash, or custom plugins in order to work. And then getting them to work on a large number of environments becomes the second issue to tackle. But thanks to the, still in its infancy, WebRTC standard, all you'll need soon enough is some JavaScript and a browser to get people talking online.

A Few Problems With Real Time Communication Currently

There a fair number of problems with the current way that real time communication is handled in browsers. For example:

• It's difficult to implement
• Requires custom plugins
• Plugins require maintenance and support
• Plugins do not run in all environments
• Not compatible across different platforms
• Usually not free

And because of this many sites still stick to the good old fashioned text-based communication. Many customer support online applications still rely on chat boxes and bots. And the stone age continues on the matter. The current WebRTC specifications however, are supported by many of the latest browsers, such as Google Chrome, Opera and Firefox. For now, it runs a bit differently in each of those however, so you'll require a fair bit of shimming your code to get it to work, which I'll get into down below. Chrome for example requires that your WebRTC application be run from a server and not a local file, whereas Firefox will forgive you for this and will run it from anywhere. So let's get started with a brief summary and then a live working example to get the creativity flowing.

The WebRTC API

There are 3 major components the the WebRTC API:

• getUserMedia: Allows a web browser to access the camera and microphone and to capture media
• RTCPeerConnection: allows for video/audio communication between multiple clients
• RTCDataChannel: allows browsers to share data via peer-to-peer

These cover everything from using current devices on the client machine to transferring data between different peers. And again, this is still experimental and will probably change in the future, but for now these API's work out of the box in the latest browsers.

How to try out WebRTC

The fastest way to try out WebRTC is by playing around with the MediaDevices.getUserMedia() set of API calls. These pretty much give you control of your webcam/audio devices, assuming you give permission, and can incorporate them onto a webpage using HTML5 controls. The Media Devices collection can contain multiple "tracks" of digital media that you can extract out, like audio and video. This data then gets converted into a blob, which can be set as the src url of a video element.

Adding Constraints

In order to request the media that you'd like from the MediaDevices collection, you'll need to specify constraints first through a parameter to the getUserMedia function. There are various possible constraint values that you can pass in and passing in a non-existent value will result in the media not loading correctly. Constraints are basically objects with various properties set.

var constraints = window.constraints = {
  audio: true,
  video: true
};

Constraints can also have various media properties, such as resolution and framerate, which will request that the media be returned in a certain format. This assumes that the hardware can indeed support the format. If it doesn't, the stream does not begin. There are more properties planned for future release in order to keep up to date with better display resolutions and audio quality.

var constraints = {
  audio: true,
  video: {
    width: { min: 1280 },
    height: { min: 720 }
  }
}

A Quick WebRTC Shim

Because of how new the API is, you'll want to use a good shim like adapter.js in order to some save some hairs on your head. It handles the intricacies between browsers that can drive any developer crazy. Adapter.js is a Google supported shim just for this situation. Just include it in your project and you'll be good to go. Before using it, I spent hours trying to get a few basic API calls to work correctly in Chrome.

<script src="adapter.js"></script>

Outputting WebRTC Media

Now to the fun part. Once you have the media stream from the MediaDevices collection, you can either pass it to an RTCPeerConnection, for p2p communication, which I'll discuss on a future post, or assign it to a video elements source to display it. WebRTC works great with HTML5 controls, and the video element will render the stream out of the box.

<video id="vid" autoplay></video>

A Few Settings

If you're using Chrome and using the WebRTC libraries, you'll notice a small camera icon in the url bar with a few options.

This is how you can control which webpages can access your hardware.

With just a couple of lines of code and a few function calls, you can get full control of webcams and recording devices. You can stop/start tracks and you can even record the media streams coming in. But there's not much fun in just showing a user their webcam in action. On the next post, I'll show how you can take this data, and send it to another client, and vice versa using the p2p functionality of WebRTC.

It's time to put all of this together into a working example that you can try right on your browser. Also notice how very little code it takes to get a full example up and running.

<!DOCTYPE html>
<html>
<head>
  <title>getUserMedia</title>
<body>
  <div id="container">
    <video autoplay></video>
  </div>

  <script src="adapter.js"></script>
  <script>
// Put variables in global scope to make them available to the browser console.
var video = document.querySelector('video');
var audioTracks;
var videoTracks;

var constraints = window.constraints = {
  audio: false,
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) 
{
  videoTracks = stream.getVideoTracks();
  audioTracks = stream.getAudioTracks();

  window.stream = stream; // make variable available to browser console
  video.srcObject = stream;
})
.catch(function(error) {
  
});

</script>
</body>
</html>