Photobooth.js

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

Photobooth.js

Download, Demo and Docs can be found HERE.

58 responses to “Photobooth.js

  1. 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….

  2. 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!

  3. Pingback: Photobooth.js: HTML5-Webcam für die eigene Website - Dr. Web Magazin·

  4. Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | PJExploration·

  5. Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Streaming Media Hosting·

  6. Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Chicago Integrated Marketing Services·

  7. Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | Siriq Tech News·

  8. Pingback: Three amazing uses for dataURLs | Wolfram Hempel·

  9. 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·

  10. Pingback: 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 – photobooth.js | 架构(architecture.riaos.com)·

  11. Pingback: 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 – photobooth.js | 前端web(web.riaos.com)·

  12. Pingback: Add an HTML5 Webcam to Your Site With Photobooth.js | BoonJack Media || We make Multimedia easy.·

  13. Pingback: 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 – photobooth.js « 工具猫 - 简单、快速的桌面小应用开发方案·

  14. 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?

  15. 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.

      • Hi Wolfram. Ypur program is very good. Anyway how to switch form front/rear web cam ?
        Francesco Rotondo

  16. 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 :)

  17. 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

  18. Pingback: Cluster Tools·

  19. Pingback: Tools·

  20. Pingback: 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 – photobooth.js « dkankan·

  21. 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?

  22. Great work, and very nice of you to share too!
    One thing though, my macbook cpu goes to the roof (approx. 100%) running photobooth Have you any idea why?

  23. I try your demo
    it is something wrong like this:
    Photobooth.js NS_ERROR_NOT_AVAILABLE: Component is not available
    what is the problem,it seems sth wrong in the min version?
    does it?

  24. Is there a way to disable options: hue, saturation and brightness?
    All I need is Crop and Take a Picture.

    • Was easy to remove using jQuery:
      $(“li”).remove(“.hue, .saturation, .brightness”);

  25. Pingback: 基于HTML5实现的超酷摄像头(HTML5webcam)拍照功能-photobooth.js - web标准 - 开发者第1386311个问答·

  26. Pingback: Photobooth.js | devtutorial.com·

  27. Pingback: 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.j - Sina App Engine - 开发者第963546个问答·

  28. Hey, i’m working on an iphone simulator, i working on the caera app and photo album. i wasn’t apple to crop the picture by default to the iphone screen size, i tried simulating a click on crop icone and changer the resizehandler size , unsuccessfull, do you have an idea on how to do that ? iphone-http://project.thestouch.com

  29. Very cool plugin, love it!

    But there is a way to flip the camera image? To look like a mirror?

    Thanks

  30. —-mis-posted on shim blog—- re-posting here!!
    Hey Wolfram
    great work… I think adding translation to jpg in php is a must, makes the files much more versatile!!

    The easiest way to to this since PHP 5.2.0, is using the data:// wrapper, you can use it like a file in many of functions.

    $image = ‘data:image/png;base64,iVBORw0KGgoAAAANSUhE…’;
    $image = imagecreatefrompng($image);
    imagejpeg($image, ‘myDirectory/filename.jpg’, 100);
    imagedestroy($image);

    the $image can be dynamically populated with your output and saved to any name…even a dynamically generated one if desired with a little coding!!
    happy coding
    tony

  31. We are a gaggle off volunteers and opening a new scheme in our community.
    Your wesite provided us with helpful info to work on.
    You’ve performed an impressive task annd our entiure community wjll
    likely be thankful to you.

  32. Thanmk you for tthe good writeup. It if trut bbe told wass once a amusement
    account it. Look comllex too far introduced agreeable from you!
    By the way, how could we be iin contact?

  33. Hi Wolffram
    Your program is very good and simple. Anyway how to switch from front webcam to rear webcam ?
    Thanks
    Francesco Rotondo

  34. Hello,, it’s possible to take a picture from html button? Which class we need to call to execute the trigger?

    Thanks

  35. Today, I went to the beach front with my children. I found a sea shell and gave
    it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the
    shell to her ear and screamed. There was a hermit crab inside and it pinched
    her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!

  36. I blog quite often and I seriously thank you for
    your content. This great article has truly peaked my interest.

    I will bookmark your website and keep checking for new information about once per
    week. I opted in for your Feed as well.

  37. Thanks for ones marvelous posting! I quite enjoyed reading it,
    you might be a great author.I will always bookmark
    your blog and will often come back later in life.
    I want to encourage yourself to continue your great work, have
    a nice weekend!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s