Filtering a webcam using getUserMedia and HTML5 canvas

With the recent release of Opera 12 which has webcam support with the getUserMedia API, I decided to have a look at this API myself and see how easy it is to use. As it turns out, it’s ridicously simple.

The getUserMedia API itself is not yet complete and approved, and most of it is informing browser vendors how to implement the API and is largely irrelevant to the front-end developer.

Getting a webcam stream

There is a JavaScript API defined within the specification, but the most important question you’re probably wondering is “how do I actually ask the browser to get me the webcam stream?”. First of all it’s best to check if the browser actually supports getUserMedia and this is done my simply asking:

if (navigator.getUserMedia) {
   // do stuff
}
else {
   // boo
}
									

Once you have established that the browser does support getUserMedia you then ask it to obtain a stream from the video. The browser must ask the user to allow access to the webcam by the web page, and this is usually done via a popup box (but may of course vary across browsers when more implement the API). Once the user has given permission for their webcam to be accessed, you then do the following:

navigator.getUserMedia({video:true, audio:false}, success, error); 
									

Where video:true indicates that we want video access and audio:false indicates that we don’t want audio (retrieving audio isn’t supported by any browser yet), and success is the function to call when a webcam stream is successfuly received, and the function error will be called when no stream is received.

The success function received an argument which points to the webcam stream, and this can now be assigned to the src attribute of an already defined HTML5 video element for display:

function success(stream) {
   document.getElementById('myVideo').src = stream;
}
									

The webcam image will now start streaming via the video element.

There are a number of JavaScript coding examples in the specification itself which you can look at.

HTML5 canvas

Since the webcam is now being streamed through a normal video element, we can also manipulate that through HTML5‘s canvas element and API.

Chapter 9 of my book, HTML5 Multimedia Develop and Design shows you how a video can be displayed and manipulated and through a HTML5 canvas element. The book’s website has some code examples of how this can be achieved.

Webcam filters demo

Of course the webcam is now streaming through a video element so we can do the same. I have put together a small application that shows how different filters, such as greyscale, brighten and blur, can be applied to a webcam using the getUserMedia API and HTML5 canvas.

I won’t go into the code, as it’s commented well enough and you can look at it there. Some of the more advanced filters were taken from HTML5 Rocks as a lot of that stuff is simply over my head!

At the moment it’s best to view the demo in Opera 12.