Photobooth.js - A HTML5 Webcam plugin for jQuery | Hacker News Reader

Photobooth.js - A HTML5 Webcam plugin for jQuery

wolframhempel.com

69 pointswolframhempel17 comments

Thanks :-). It's doing some quite heavy lifting for the HSB calculations. Every frame of the video is drawn onto a hidden canvas. The pixel data from that canvas is then read, manipulated and drawn onto the visible canvas. In Chrome and Opera this partially happens on the GPU which makes it quite smooth, but in Firefox it is slow to an extend that made me add the "videoOnly" mode. (In this mode it just shows the video element and only allows for cropping.

Would it be helpful if forcing the “video only mod”e would be exposed as a public method? (Currently it can only by switched off by setting the forceHSB flag to true.)

Please find the github repo for the project at https://github.com/WolframHempel/photobooth-js

I'm currently finishing off a project that would have seriously benefited from html5 webcam support. The current state of things is really frustrating, in the latest chrome and firefox you can access a webcam and take pictures, but it's not possible to actually do anything with the video stream, you can't broadcast it to the server without horrible (and slow) hacks, so it's really crippled. That's the frustrating thing about html5 generally at the moment, it's eventually going to be awesome, but you can't actually use a lot of it yet.

This should hopefully change as WebRTC gets more fleshed out support. It's something I aim to try and tackle in my own webcam library (that was posted here a short while ago), but yeah. Finding an efficient way to even send a single frame is a bit awkward, and there's more than one way to do it.

As much as I am excited to see such hacks, a lot of the HTML5 goodness is just reinventing what Macromedia Flash did 5 years ago. The page turn JS, the audio recording JS, webcam js, etc have all been possible before with Flash quite easily in 10 or 15 lines. Not to mention it has been more reliable (no audio sync issues, no video drivers issues, etc) and it works with 99.3% [1] of the browsers in the market instead of just a few.

Proprietary or not but Flash still fills this need better than anything out there and it is sad to see that the so called better alternative is still in such a dismal shape (even in the latest release version of browsers).

[1] http://www.adobe.com/products/player_census/flashplayer/

I think the point is that the web platform should be able to do all these things natively.

Right now, the implementations aren't perfect - and cross-browser support is definitely lacking. But ultimately, I think it's hard to argue that the end goal of having this stuff baked in to HTML and JS is better than relying on a proprietary 3rd-party plugin.

Yes, I had to use flash, but of course that means I can't broadcast from mobile devices.

This is awesome! Thank you for making and sharing this! I recently launched a web app and of course users can upload profile pictures. I totally plan to implement this and allow users to take pictures from right within the app! Feel free to check it out and see your excellent work in action - https://writeapp.me (it's free).

A few minor problems, though - it kind of slows the down the browser. Like a lot. I'm using a new Macbook Air and this thing is incredibly fast and has actually never slowed down on me once (and I really abuse it). Also, it seems like the image is kind of stretched. Maybe I'm getting fat and don't realize it. But all in all, excellent work. Would you consider putting it on GitHub and allowing people to contribute? I'd be first in line!

Not working for me whatsoever. Never enables my webcam.

Chrome 23.0.1271.95(Windows 7 Service Pack 1)

No iOS (MobileSafari, Chrome) support yet, it seems. At least not in iOS 6, on an iPad 2.

These APIs aren't available to iOS Safari, unfortunately.

Wow! Cool, Thank you, I'll try to use it on my projects!

Doesn't seem to work for me (FF 17.01, Mac OS X 10.6.8).

Have you tried setting navigator.media.enabled in about:config to true? This seems to be necessary in some versions of FF

This config variable doesn't exist on my FF.

Why tie this to jQuery instead of making it standalone?

It is completely standalone. I've just added the jQuery integration for convenience. Please see the "standalone" tabs on http://wolframhempel.github.com/photobooth-js/ and the bottom line in the source that says "jQuery integration. (It's safe to delete this line if you're not using jQuery)"

Some years back, it would have been great. But today we could just take a pic and upload via the mobile.

Reply on news.ycombinator.com