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 :

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. )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/*

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);    

}