Add an HTML5 Webcam to Your Site With Photobooth.js
The big web development news for 2013 is shaping up to be WebRTC, a set of APIs being developed by Mozilla, Google and others at the W3C that allows web developers to access device hardware — your camera, microphone, accelerometer and so on. Even now hardly a day goes by without a new demo showcasing WebRTC in some way.
Want to add a Photobooth-style camera app to your site? Just download Photobooth.js and add this code to your page:
myPhotobooth = new Photobooth( document.getElementById( "container" ) );
That’s it. Of course there’s a little more to do if you actually want to do something with your newly instantiated Photobooth — like capture images or resize and save them. But Photobooth.js makes the whole process pretty simple; see the documentation for more details.
Photobooth.js works in current versions of Chrome, Firefox, Opera, and any other browser that supports the WebRTC
getUserMedia method. You can see a complete list of browsers that support
getUserMedia over on caniuse.
Hempel’s code is available on GitHub (BSD license) and can be used as a standalone app or a JQuery plugin.