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.



Download, Demo and Docs can be found HERE.

53 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!

      • Great piece of JS! I am trying integrated this into a website for our local soccer (football) club. I am an old ‘C’ jockey and JS is not in my comfort zone. Would it be possible to get a version which implements a fixed size/aspect ratio crop box which is always enabled ? This would be used for ID pictures for the club. Any help would be appreciated.
        Thanks – John Volpe

  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: 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 | 架构(·

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

  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, …).


    • 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 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
    .setHueOffset( h )

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

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

  28. Very cool plugin, love it!

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


  29. —-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);

    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

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

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


  32. Pamiętaj, że nawet jeśli jesteś rozliczany systemem
    PAYE, a Twoje podatki są bardziej złożone (na przykład jeśli uzyskujesz dochód z
    tytułu czynszu lub inwestycji poza określony poziom), musisz wypełnić Samodzielne zeznanie podatkowe (Self Assessment tax return).

  33. Hi blogger, i found this post on 11 spot in google’s search results.
    I’m sure that your low rankings are caused by hi bounce rate.
    This is very important ranking factor. One of the biggest reason for high bounce
    rate is due to visitors hitting the back button. The higher your bounce rate the further down the search
    results your posts and pages will end up, so having reasonably
    low bounce rate is important for increasing your rankings naturally.
    There is very useful wp plugin which can help you. Just search in google for:
    Seyiny’s Bounce Plugin

  34. I can’t believe that this works without java or flash. I guess the Internet is going to get reinvented really soon. This reminds me of the time when Steve Jobs decided not to use Flash, because it was insecure obsolete. Thanks for sharing the post…

  35. I tried using ur plugin but it gives me an error below:

    Error: Not enough space for Photobooth. Min height / width is 200 px

    What shall I do?

Leave a Reply

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

You are commenting using your 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