webcam brightness

[borisreitman]

Is there a way to increase or auto-adjust webcam brightness?

[positlabs]

You can do this best via webcam driver software

[borisreitman]

You should add an API setBrightness (percentage). It has to be done as part of webcam software. For example, Skype adjusts the brightness. Here's an outline how to do it with HTML5:

To apply brightness to a video elementis easy using CSS3 brightess filter. It works on the video element too.

http://bennettfeely.com/filters/

Then, the same brightness should be applied to the snapshot image using Canvas manipulation. Here's how:

http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

For flash fallback, something similar should be implemented, in AS3.

[positlabs]

Applying a brightness filter in post is more expensive and lower quality than doing it directly in the drivers.

But if you need to do it programmatically, then sure... apply a css filter and do some canvas drawing for the output. I just tested, and CSS filters work on flash objects (see below)!

If you need to post-process the image, that should also be handled outside of this lib. You could create a post-effect wrapper lib that applies css filter effects, and uses a similar canvas effect on the image output.

@jhuckaby, it will be much easier/safer for people to do this kind of thing if we make Webcam instantiable (a breaking change, but I think it will be worth it).

[jhuckaby]

@positlabs I completely agree with you, Josh. v2.0 will be instantiable, I promise ;) I am done with the singleton pattern -- it was a design flaw to do it that way.

We can even have a Plugin / hook system for adding post-capture effects!

[positlabs]

Yes! I like that plan!

[borisreitman]

It should be part of the webcamjs library, because the library handles the upload of the image from the Canvas element. The whole Canvas step is handled by the library now. Either expose a hook to modify the canvas before image is uploaded, or handle it inside the library.

Also, a singleton pattern works as well.

[jhuckaby]

We'll do a hook / Plugin system for image manipulation.

The singleton is going away in v2.0, sorry. People need to be able to instantiate multiple webcam instances on the same page (different cameras), and a singleton makes that impossible.

[positlabs]

The image upload feature is totally optional. We aren't forcing you to use it.

I know it's already in there, but I don't think this lib should handle image uploading, either.

[borisreitman]

@positlabs How did you try the CSS to make it lighter on IE ? What CSS did you use?

[borisreitman]

This is how I figured out how to make flash brighter -- add this to ActionScript code:

import flash.geom.ColorTransform; ... video.transform.colorTransform = new ColorTransform(1.5,1.5,1.5);

What seems a logical thing to me is to add a method to webcamjs, setBrightness which will do CSS filter for Chrome / Firefox and Safari, and on IE where flash is used, it will call a method in flash to update the transform.

Then the same brightness can be applied to the image on the canvas.

[positlabs]

CSS filters won't work on IE, unfortunately.

Personally, I would not support a feature that requires Flash, and show a message to upgrade to a newer browser.

Speaking of which... @jhuckaby do you plan to lose flash support in the 2.0 update? I think it's time. Users can choose to use an older build if they need flash support.

If you use a browser that supports getUserMedia and webgl, you could use glsl shaders to control the output. Much more performant and future-proof.

[borisreitman]

If you don't support Flash, then you can't support IE11 and below. I don't know statistics, but I would think that IE11 is used plenty.

[jhuckaby]

Alas, as much as I want to get rid of Flash, we'd lose too many users at this point. Not only IE, but also all Mac Safari users as well (which includes me):

http://caniuse.com/#search=getusermedia

What I am planning, however, is changing the architecture dramatically in 2.0. Flash will simply be a real-time webcam input to a HTML5 Canvas (2D or WebGL) which is constantly updating. UserMedia will also be an input that does the same thing. They both will "feed" video frames into a single Canvas element.

Meaning, the user only ever sees and has to deal with a single Canvas element (automatically populated behind the scenes with either Flash or userMedia). That way, we can do things like pixel-level manipulation or WebGL shaders, and it will stick in the final captured image. So when you ask for a capture, it will simply grab the current pixels from the buffer and produce a JPEG or PNG out of it.

Like this cool effects library here:

http://evanw.github.io/glfx.js/demo/

Imagine that kind of thing built into WebcamJS 2.0! That's the direction I'm headed.

Also, Flash and UserMedia will be separate "modules", which you can include or not include, based on your app. They'll essentially be "Plugins". Who knows, maybe someone will invent a new input in the future! Then we can just add a Plugin for it.

Another "Plugin" will be image file selection, for iOS Safari. So users can just touch the element and snap an image from their camera, and it will feed into the Canvas element just like the other sources do (it just won't live-update, but filters will still work).

[borisreitman]

I like the idea of what-you-see-is-what-you-get. So whatever user sees in the canvas, with all the effects applied is what will be uploaded to the server. So that the server doesn't have to do any more work.

[jhuckaby]

WYSIWYG! That's the term I was thinking of. Thank you. Yup, that :)

[positlabs]

Ok, +1 on this canvas approach!