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.
The latest WebRTC hotness to catch our eye is developer Wolfram Hempel’s Photobooth.js, a JavaScript library for working with a device’s camera. Photobooth.js allows users to take pictures directly on your website, for example, to add an avatar. It also acts a bit like the OS X Photobooth app, offering real-time adjustments for hue, saturation and brightness (one word of warning, hue can really slow down Firefox).
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.
Add an HTML5 Webcam to Your Site With Photobooth.js
This article
Add an HTML5 Webcam to Your Site With Photobooth.js
can be opened in url
http://itchynews.blogspot.com/2012/12/add-html5-webcam-to-your-site-with.html
Add an HTML5 Webcam to Your Site With Photobooth.js
