HTML5 Canvas, 2nd Edition

Web RTC Media Capture and Streams API

Not too long ago, if you wanted to access a webcam or microphone in a web browser, you had to fall back to using Flash. There simply was no way to access media capture hardware in JavaScript. However, with HTML5 replacing Flash as the standard for web browser applications, applications that relied on Flash for “exotic” features (such as webcam and microphone access) need a new way to solve this problem. This is where the Media Capture and Streams API comes in. It is a new browser-based API access through JavaScript that gives access to microphones and webcams and (for our purposes) allows a developer to utilize this input on the HTML5 Canvas.

The main entry point to Media Capture and Streams is the getUserMedia() native function that bridges the gap between the web browser and media capture devices. At the time of this writing, getUserMedia() is still experimental. It is supported in the following browsers:

• Google Chrome Canary

• Opera (labs version)

• Firefox (very soon, but our tests proved not quite yet)

Because support is always changing, a great resource to find out about the compatibility of new browser features is http://caniuse.com. It will tell you which browsers can currently support which features.

It might seem obvious, but you will also need a webcam of some sort for the next three examples to work properly.