Flash AS3: Apply bitmap filters to a webcam image

Simple (beginner-intermediate) Flash AS3code example on how to apply a bitmap filter on a webcam image. Also image rotation and simple motion detection (activityLevel) is included.

You can make a Photobooth of this script as well. Mark Knol wrote an ImageSaver class that sends a .jpg or .png picture of a Display element to a simple PHP script that stores it on a webserver :
Stroep.nl AS3 ImageSaver Class.

You need a webcam and give Flashplayer access to the camera to see the example below :

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ useexpressinstall=”true” movie=”http://media.kasperkamperman.com/2010/03/camera-example.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

For more in-depth information see the following subjects in the Flash Actionscript 3.0 reference :

• filters
• bitmapdata
• camera

The code ( copy-paste directly in a new Flash project in the Actions – Frame. )

/*
Example how to detect motion in a webcam image and to apply a color filter 
and/or rotation. 

www.kasperkamperman.com - 10-03-2010
*/

var fps:int = 25; // frames per second you want to grab and display

var cam:Camera;
cam = Camera.getCamera();
cam.setMode(640,480,fps);

var video:Video;
video = new Video(cam.width, cam.height);
video.attachCamera(cam);

// motion detector ------------------------------------------------
cam.setMotionLevel(30, 100); // level 30, timer 500ms
cam.addEventListener(ActivityEvent.ACTIVITY, activityHandler);

// variable to store movement ( use later to apply the filter )
var imageMovement:Boolean = false; 

function activityHandler(e:ActivityEvent):void 
{  if (e.activating == true) {
    imageMovement = true;
    trace("movement above threshold. Level :"+cam.activityLevel);
   } else {
    imageMovement = false;
    trace("no movement. Level :"+cam.activityLevel);
   }    
}

// --- filter ---------------------------------------------------------

// filter green/blue components ( leave red)
var redFilterMatrix:Array = new Array();
redFilterMatrix = redFilterMatrix.concat([1, 0, 0, 0, 0]); // red
redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 0, 0]); // green
redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 0, 0]); // blue
redFilterMatrix = redFilterMatrix.concat([0, 0, 0, 1, 0]); // alpha

var filter:ColorMatrixFilter = new ColorMatrixFilter(redFilterMatrix);

// --- BitmapData ------------------------

// make a BitmapData object on which you can draw to video
// ( exchange width/height when you want to rotate the image )
var bmd:BitmapData = new BitmapData(cam.width,cam.height,false,0);

// rectangle and pointer for applying filter
var rect:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);
var point:Point = new Point(0, 0);

var canvasBitmap:Bitmap = new Bitmap(bmd); // link BitmapData to Bitmap 
addChild(canvasBitmap);                    // add Bitmap to stage

// --- rotate camera image ---------------------------------------------------

var rotateMatrix:Matrix = new Matrix();
rotateMatrix.rotate(2 * Math.PI * (90 / 360));
rotateMatrix.translate(cam.height,0);

// --- Timer to refresh the image --------------------------------------------
var refreshTimer:Timer = new Timer(1000/25); // 1000ms / 25fps
refreshTimer.start();
refreshTimer.addEventListener(TimerEvent.TIMER, imageRefresh);

function imageRefresh(e:Event)
{    // draw video on BitmapData
     bmd.draw(video);
     
     // draw video rotated on BitmapData ( don't forget to change BitmapData to 
     // the right size ) and comment the bmd.draw(video) line. 
     //bmd.draw(video, rotateMatrix);
     
     // apply the red filter when there is enough image movement
     if(imageMovement==true) bmd.applyFilter(bmd,rect,point,filter);    
}