If you’re a fan of the EyeToy or you’ve just got You’re In the Movies on Xbox 360, you’ll know what this is all about. How to remove yourself from a web cam image and superimpose you on another background.
The mighty Jop had a bit of a testbed working and I thought I’d get the old brain working again and have a tinker. It’s not pretty code but it’s available below if you’re interested in a few pointers. It’s also not that good, but if it inspires you to do it better (I.e. properly) then it’s done its job.
** FLASH used to be embedded here but I’ve removed it due to it being discontinued **
If the web cam doesn’t initailise. Try this link:
In a nutshell:
1: Grab camera feed
2: Take a snap of the background
3: Use a ‘difference’ filter on them both to fighure out which pixels have changed the most
4: Use a ‘threshold’ filter to remove all the pixels that haven’t changed much
5: ColourTransform the resulting pixels to black
6: Apply a slight blur to help make it less jagged
7: Cache the resulting image as a bitmap (so it can be used as a mask) and put it over a copy of the live feed
8: Cache the live feed as a bitmap and apply the mask
9: And repeat using an interval or similar
Here’s the main function:
function takeSnapshot() {
//grab the cam and render it into a snapshot bitmapData obj
snapshot.draw(output_vid);
}
function checkVid() {
//grab live cam
liveData.draw(output_vid);
// grab snapshot
maskData.draw(snapshot);
// apply difference to 2 images
maskData.draw(liveData, new Matrix(), new ColorTransform(), ‘difference’);
// remove all unchanged pixels. Make them transparent
maskData.threshold(maskData, new Rectangle(0, 0, output_vid.width, output_vid.height), new Point(0, 0), “<=”, (threshVal/100)*0x00ffffff, 0x00000000, 0x00ffffff, true);
// colour what’s left black
maskData.draw(maskData, new Matrix(), new ColorTransform(0, 0, 0, 1, 0, 0, 0, 0))
// Blur to improve quality
maskData.applyFilter(maskData, maskData.rectangle, new Point(0, 0), blurFiltr);
resultData.draw(liveData);
// cache the resulting mask and apply it to the live feed
mask_mc.cacheAsBitmap = result_mc.cacheAsBitmap = true;
result_mc.setMask(mask_mc);
}
Source is here. Have fun!
Just fixed the link… rogue folder left from the FTP upload. Sorry about that!
I don’t suppose you have any idea how this would work in as3?
If I’m honest, not really. I use Flash for fiddling and prototyping these days so haven’t really bothered with the whole AS3 thing. I should do… 🙂
looks like a company finally uses background removal in a professional game.
check out kung fu live for the ps3