06

Lights, camera, action with getUserMedia!

While webcams, video chat and other camera-related stuff has been around for a pretty respectable time, until now we had to rely on Flash or other native tools to put them to work. On of the things the WebRTC API offers us is access to video and audio input from a user's webcam/microphone. Combined with the powerful canvas element (all kneel before the canvas element please) we can do some really sweet stuff.

Here are some examples

This example only works in Chrome and Opera (It works in Firefox if you enable the media.navigator.enabled option in about:config). And it helps if you have a working webcam. :)

Click "Start video" to use your webcam.

Wait wait wait. How does that work again?

You add a <video autoplay="autoplay"></video> tag and use Javascript to stream the webcam data to your video element, comme ├ža:

// Get the video dom element
var video = document.getElementById("video");
  
// Handle video start
function videoStart(stream){
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream; // Opera.
  };
};
  
// Handle video error
function videoError(error){
  // ... handle the error here ...
};

// Get the user media, we only want video.
// Calls the videoStart callback if succeeded (the browser asks for permission)
// Calls the videoError callback if it failed
navigator.getUserMedia({ video: true}, videoStart, videoError);

Now the really cool stuff is happening when we combine this with all the might of the <canvas></canvas> element. We can directly draw video frame to a canvas with context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);. And with that you can do whatever you like with the pixel data.

Useful?

Yes! Think of all the options we have now in the browser, with no additional software needed! We could:

  • Build a VOIP webapp
  • Stream webcam data directly to a server for live analysis
  • Build augmented reality games, applications and so on
  • Build an Instagram-type app in your browser
  • Create live animated gifs (using a javascript gif encoder)

Sounds good, sounds good. But can I use this today?

For most browsers, this shouldn't be a problem as there are polyfills available. Opera has unprefixed native support for getUserMedia, in Webkit it's available with a vendor prefix and it's available in FireFox, although you have to enable it first (see above on how to enable it).

Soooouuurrrrce...need sooooourrrrce...

Feel free to look around the differente source files we used for this example.