Mixing HTML5 Video and Canvas - HTML5 Canvas - page 531

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 applica-
tions, 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 sup-
port which features.
It might seem obvious, but you will also need a webcam of some sort for the next three ex-
amples to work properly.