March 19, 2006
Flash 8: Realtime Video Color Keying

My previous experiment with the selective color transforms made me think a bit more about creating masks from colors and its applications. I wondered if it is possible to use a similiar technique to calculate green screen or blue screen masks in realtime for Flash video. And indeed - it works.

I've programmed a keying technique similar the Color Difference Key known from AfterEffects or other video editing programs. This kind of keying allows for finer control and better transitions than for example a simple chroma key.

A very important factor for successful keying is good lighting of the fore- and background and as I don't have a studio at hand for this demo I allowed myself to use the example clip from this Macromedia Video Tutorial featuring Tom Green - I hope that's okay for this purpose. I've converted the original 20MB quicktime movie to a 1 MB FLV (wow, isn't that on2 codec great?) - and there is definitely no more alpha channel in there. Alternatively you can try to use your webcam, but if you don't have good lighting and a decent background the results will be only so-so. But I can imagine that the same technique could be used for example on still images to mount peoples' heads on avatars.

Here is the demo:

The sliders have the follwing functions:
- Preblur will blur the source before the difference, thus reducing noise and smoothing the edges of the mask
- Mask In sets the black point of the mask
- Mask Out sets the white point of the mask
- Gamma changes the transition between the transparent and opaque areas of the mask
- Postblur can be used to feather the mask's edges
- Defringing is an attempt to reduce background color bleeding at the edges - depending if your new background color is dark or bright try the different settings

Download the source files here
(Released under Creative Commons Attribution-Noncommercial 3.0)

Posted at March 19, 2006 10:49 PM | Further reading
Comments

Just awesome. Well done!

Posted by: Tom Lee on March 19, 2006 11:32 PM

More Mario brilliance! Thanks for sharing the source. Where do you find the time?

Posted by: steve w on March 20, 2006 02:19 PM

Nice done!

Posted by: Weyert de Boer on March 20, 2006 03:57 PM

Sweet! Was planning on building one of these myself, love the level of control it provides... One question - how does the realtime key compare with an alpha-channel based on cpu usage? I would imagine it would be more so, just curious what kind of overhead you saw during development.

Posted by: mray on March 20, 2006 05:33 PM

Hi ! it's excellent !
I've tested a little threshold on video ( http://jeanphiblog.media-box.net/dotclear/index.php?2005/10/16/162-flash-8-thresholdcamera-detourage-en-live )but not also perfect like your sample
thanks for sharing
JP

Posted by: jeanphilippe on March 22, 2006 05:53 AM

Really cool, since i saw this at a flash 8 presentation last year i wanted to build it... never got around to i though :(

One minor problem, it works fine in my macromedia flash player (read 8) but my latest adobe flashplayer (8.5) doesn't like it and crashes my browsers (both ie and firefox)... i hope this isn't going to be a trend with other future products from adobe :)

Posted by: Laurent on March 22, 2006 05:21 PM

Mario.. this is great!!! Thanks a lot for sharing too. Extremely impressive

Graeme

Posted by: Graeme on March 22, 2006 06:45 PM

Incredible!

Posted by: Marc Kremers on January 11, 2008 03:04 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Most Visited Entries
Experiments
Popular on Aviary

Lectures
Contact
Backlog
In Love with
Powered by