The home of Dino

Webcam background removal in Flash

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!

4 comments