AS3: Easy Web Camera SnapShot

Today I investigated a little of Action Script 3. What I really wanna do is an easy script to take a web camera snap shot. Coming from AS2 I was impressed about the EventListener present in AS3, like complete programming language (I'm thinking to Java or .NET) AS3 got the object listener which reacts to an Event. 

Taking a snapshot from web camera means convert the Bitmap Data stream captured by your web camera  into JPG (or PNG) image and save it into a file. To do that you need a special library named as3corelib available on google projects ( here ).

The corelib project is an ActionScript 3 Library that contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, Image encoders, and JSON serialization as well as general String, Number and Date APIs.

Download the library and copy the folder "/src/com" under your project's path or add the "/src/com" to the general adobe framework under "/Configuration/ActionScript 3.0/". Now you're ready to write your easy AS3 to grabbing the Web Camera Stream. I've built 3 buttons: SNAP (AS3 name: button1) which takes the image and interrupts the web camera stream to the otput video (AS3 name: video), RED (AS3 name: redButton) which drops the image and attaches the web camera stream to the output video and the GREEN (AS3 name: greenButton) which converts the image captured from "SNAP" to JPG and saves it through a php page. On practice:

import com.adobe.images.PNGEncoder;


//initialize ambient
redButton.visible = false;
greenButton.visible = false;
button1.visible = true;


var cam:Camera = Camera.getCamera();
cam.setQuality(0, 100);
//800x600, frame per second,
cam.setMode(800, 600, 24, true);
video.attachCamera(cam);

var ba:ByteArray = null;


button1.addEventListener(MouseEvent.CLICK,snap);
redButton.addEventListener(MouseEvent.CLICK,retake);
greenButton.addEventListener(MouseEvent.CLICK,ok);



function snap(e:MouseEvent):void{

var bmd:BitmapData = new BitmapData(video.width,video.height,false);
bmd.draw(video,new Matrix());
ba = PNGEncoder.encode(bmd);
video.attachCamera(null);


redButton.visible = true;
greenButton.visible = true;
button1.visible = false;
}

function ok(e:MouseEvent):void{

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = ba;
navigateToURL(jpgURLRequest, "_blank");

video.attachCamera(cam);
redButton.visible = false;
greenButton.visible = false;
button1.visible = true;

}

function retake(e:MouseEvent):void{

video.attachCamera(cam);
redButton.visible = false;
greenButton.visible = false;
button1.visible = true;


}

stop();


Thank to these few AS3 lines we're able to capture snapshot from web camera stream. The result looks pretty nice. Obviously you may change the graphic just using Flash's power.