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.
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
getUserMedia and this is done my simply asking:
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:
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.
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:
The webcam image will now start streaming via the
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.