Kalinium’s Blog

Webcam Flash: http://kalinium.co.uk/view.php?img=15

I was watching my brother flick across the internet using StumbleUpon when he came across a Flash sample that someone had created. It used the webcam to let the user deflect “liquid” balls using their hands, and guide them into containers. It was a video of it being played, and gave no obvious link to the actual thing. “I wish you made good things like this” was his comment.

So, I set about creating my own webcam Flash. I’ve not used the Bitmap/image manipulation part of Flash much before. I have a deep hatred for anything that requires me to do pointless things (”import flash.display.BitmapData;” - why doesn’t the compiler do this itself whenever it finds a command that needs it?) and so give a disapproving glare to anything that would need these things. I’d normally prefer to stick to my usual practices of “if it works I’ll keep it”. I still don’t see the point in writing “var money:Number = 10″ when “money = 10″ will do just fine.

Previous feeling aside, I had been challenged by my (younger) brother and wasn’t going to give up over some silly little imports, however pointless they might first appear.

The first stage was to work out how to get the webcam’s image into my Flash file. Google provided this on a search of Webcam Flash. Whilst it looked great at first, I was stumped when it told me to add a “Video” symbol. I tried a number of things but couldn’t work out what it meant by this (named Video, exported for linkage name Video, some kind of Component?). A second search showed how do this (Library, then the little icon that looks like a few bullet points and an arrow down, and then go New Video. Everyone probably knows how to do that anyway, I should really use some of the new fangled things once in a while).

I’d now managed to get the webcam onto the screen. From that point, it was reasonably easy to get it into a BitmapData and attach this to a movie clip. Then came the next stage - finding the motion. The theory was to take the current image from the webcam and the one from the previous frame, then find the areas of difference. It wasn’t too hard to code. Make a bitmap image, draw the current frame, then draw the old frame over the top with a “difference” blend mode. However, nothing appeared. The new bitmap data was empty. After a little fiddling, the problem was revealed. I was using the “identity matrix” as a blank matrix for adding the two images together. It wasn’t working because I hadn’t imported the matrix thingy. Why didn’t clever old Flash just say “He’s clearly trying to use matrices, instead of bitching about how it’s not imported, why don’t I just import the damn thing and be done with it”. I hope that CS3 doesn’t need me to do something stupid like “import flash.Movieclips”.

That aside, it worked fine. I tried experimenting with the add and subtract modes to make it draw the motion areas more visually, but couldn’t get anything decent. With a little more work (ie some of the stuff I now notice is described in the link above) this could be turned into something more interesting. Perhaps I’ll do that later.

.swf can be viewed here: http://kalinium.co.uk/view.php?img=15

Source code:

if(not camSetup) {
camSetup = true//Get the camera - may not work if you’ve got more than 1 webcam
var my_cam:Camera = Camera.get();

//Attach this to a Video object (see post) called mVid
mVid.attachVideo(Camera.get());
}
//Yay imports
import flash.display.BitmapData;
import flash.geom.ColorTransform;
import flash.geom.Matrix;

//Make a blank BitmapData
var img:BitmapData = new BitmapData(160,120);

//Grab the current image from the webcam and draw it onto the BitmapData
img.draw(mVid);

//Make a second blank BitmapData
var img2:BitmapData = new BitmapData(160,120);

//Copy the old BitmapData onto the new one
img2.draw(img);

//Overlay the old BitmapData onto the current one (oimg is defined later, the first run of this is useless, but couldn’t tell us anything anyway)
img2.draw(oimg,new Matrix(), new ColorTransform(),”difference”);

//This was the code that I used to test the subtraction/addition
/*var img3:BitmapData = new BitmapData(160,120);
img3.draw(img2);
img3.draw(img,new Matrix(), new ColorTransform(), “subtract”); */

//Display the old image onto a movieclip called s
_root.s.attachBitmap(oimg,1)

//Display the motion onto a movieclip called s
_root.t.attachBitmap(img2,1)

//Set the current webcam picture as the old one, for use next run of this
oimg = img

This entry was posted on Saturday, December 8th, 2007 at 11:03 pm and is filed under Flash, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.