4 ms·

Photobooth.js - A HTML5 Webcam plugin for jQuery

69 points by wolframhempel 14y ago

bpatrianakos 14y ago
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 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!
ForFreedom 14y ago
Some years back, it would have been great. But today we could just take a pic and upload via the mobile.
wolframhempel 14y ago
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 https://github.com/WolframHempel/photobooth-js
phpnode 14y ago
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.
- FuzzyDunlop 14y ago
  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.
- superasn 14y ago
  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/ http://www.adobe.com/products/player_census/flashplayer/
  - kevincennis 14y ago
    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.
  - phpnode 14y ago
    Yes, I had to use flash, but of course that means I can't broadcast from mobile devices.
malandrew 14y ago
Why tie this to jQuery instead of making it standalone?
- wolframhempel 14y ago
  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/ 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)"
wazoox 14y ago
Doesn't seem to work for me (FF 17.01, Mac OS X 10.6.8).
- wolframhempel 14y ago
  Have you tried setting navigator.media.enabled in about:config to true? This seems to be necessary in some versions of FF
  - wazoox 14y ago
    This config variable doesn't exist on my FF.
- wolframhempel 14y ago
  Have you tried setting navigator.media.enabled in about:config to true? This seems to be necessary in some versions of FF
jschuur 14y ago
No iOS (MobileSafari, Chrome) support yet, it seems. At least not in iOS 6, on an iPad 2.
- rboyce 14y ago
  These APIs aren't available to iOS Safari, unfortunately.
rdonato 14y ago
Wow! Cool, Thank you, I'll try to use it on my projects!
quaunaut 14y ago
Not working for me whatsoever. Never enables my webcam. Chrome 23.0.1271.95(Windows 7 Service Pack 1)

69 points by wolframhempel 14y ago

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

ForFreedom 14y ago

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

wolframhempel 14y ago

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 https://github.com/WolframHempel/photobooth-js

phpnode 14y ago

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.

FuzzyDunlop 14y ago
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.
superasn 14y ago
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/ http://www.adobe.com/products/player_census/flashplayer/
- kevincennis 14y ago
  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.
- phpnode 14y ago
  Yes, I had to use flash, but of course that means I can't broadcast from mobile devices.

malandrew 14y ago

Why tie this to jQuery instead of making it standalone?

wolframhempel 14y ago
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/ 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)"

wazoox 14y ago

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

wolframhempel 14y ago
Have you tried setting navigator.media.enabled in about:config to true? This seems to be necessary in some versions of FF
- wazoox 14y ago
  This config variable doesn't exist on my FF.
wolframhempel 14y ago
Have you tried setting navigator.media.enabled in about:config to true? This seems to be necessary in some versions of FF

jschuur 14y ago

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

rboyce 14y ago
These APIs aren't available to iOS Safari, unfortunately.

rdonato 14y ago

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

quaunaut 14y ago

Not working for me whatsoever. Never enables my webcam. Chrome 23.0.1271.95(Windows 7 Service Pack 1)