I’ve been experimenting a lot with HTML 5 webcam support lately. One of the results – the audience on a galloping horse could be seen in my Next. Generation. Browser. Graphics. talk at Spa conference 2012.
Photobooth.js is a bit more useful: It’s a widget / jQuery plugin that allows the user to take pictures directly on your website. It also offers real-time adjustments for hue, saturation and brightness and the ability to crop the image.
Photobooth.js
Download, Demo and Docs can be found HERE.
Congratulations man!!!….That’s awesome….definitely a very good resource that can’t be missed in our development tools….I learned that entry on hacker news a few days before I start a project with the web camera….thank you…..I will be following the project on github….
If this takes off I’m going to have to hide my web cam. Don’t want it loading a picture of me when a page loads.
Wow this is pretty cool! Is it possible to get this working on IE? And will you be able to get over the performance issues on Firefox? I can see the potential if you can sort these two issues. Well done! Love it!
Hey , I’ve included this awesome jquery plugin in http://jquer.in
Thanks, amazing site
Pingback: Photobooth.js: HTML5-Webcam für die eigene Website - Dr. Web Magazin·
Ficou muito legal, parabéns!
Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | PJExploration·
Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Streaming Media Hosting·
Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Chicago Integrated Marketing Services·
Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Siriq Tech News·
Pingback: Three amazing uses for dataURLs | Wolfram Hempel·
Pingback: IT Digest: So.cl Beta Is Open to the Public, Gmail 2.0 on iOS, Skype Confirms Video Messaging Feature and Much More | Zfort Group Blog·
Doesn’t seem to work with Opera 12.11 or Firefox 17.0 on Linux
I get no picture with either of them.
Pingback: 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 – photobooth.js | 架构（architecture.riaos.com）·
Pingback: 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 – photobooth.js | 前端web（web.riaos.com）·
Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | BoonJack Media || We make Multimedia easy.·
Pingback: 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 – photobooth.js « 工具猫 - 简单、快速的桌面小应用开发方案·
So does this actually work for anyone? On the demo page, Firefox 17 takes an empty image. Chrome 23 seems like it might work, but it says I need to give the browser permission. In other WebRTC pages like Google’s, it asks, but in this case it never pops allow/deny. Any idea?
It is a very good javascript work!!! Is it possible to set HSB parameters programmaticaly instead of using sliders? I would like hide sliders and propose buttons which set specific HSB values (sepia, B&W, …).
Thanks!
Good suggestion, I’d be happy to add it in the next release. (Come to think of it, a takePicture() method and a hideControls() method might be nice too in order to use Photobooth without the default UI. ) Any other features or API additions you would like to see?)
If you are interested I have done functions to set HSB values. But I don’t undestood how you minimize your javascript. If you have an email, don’t hesitate to contact me, I will give you my code. To hide controls and takePicture, I use a display none css and use jquery to click on the trigger element.
What is your email? I’m trying to figure out setting the HSB and having some issues.
Guillaume -
How did you set the HSB values? Can you please let me know? Thank you.
I send you (contact at wolframhempel.com) an email with my updates. Send me an email when you have done a new version.
I’m just wondering how you got the HSB to work. I’m not Wolfram.. Particularly, I just need to make the video B&W. Any thoughts?
Actually, I just figured this out. If anyone’s curious:
_ = function (e) {
return 2
}
Minified JS is super fun to work with
My apologies for keeping you waiting. The photobooth instance has now six new methods. All setters take values between -0.5 and 0.5
The methods are
.getHueOffset()
.setHueOffset( h )
getBrightnessOffset()
setBrightnessOffset(b)
getSaturationOffset()
setSaturationOffset(s)
I’ll add them to the API documentation shortly
Awesome, thanks!!
Pingback: Cluster Tools·
Pingback: Tools·
Pingback: 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 – photobooth.js « dkankan·
Is there anyway to hide the user overlay, and more importantly, how would I go about triggering the “take photo” without pressing it in JavaScript?