Thursday, February 5, 2009

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.

11 comments:

Rem0teMeth0d said...

Thanks for this wonderful post. It has helped me in one of the major problems I was facing.

Patrick Silva said...

Very very nice post. Thanks a lot!

Hansika said...

Great Work!
Keep it up...

Fernando said...

Tanks for this post. helped me a lot. But I'm not getting to increase the final image. Could you help me?

Anonymous said...

Very helpful post. I'm still wondering how the php file is constructed to save the image.

Anonymous said...

Payday Loans No Fax Payday Loans Without Faxing - Get Your Cash Loans Online. Easy Cash Advance USA is a faster and efficient way to get your payday loans and. [url=http://viiumft.rahuketu.net/map.html]nj payday cash advance[/url] Magnum Cash Advance Payday Loan Chartroom at Hollywood Casino Most Sociable. Cash loans online business hosting. 14 No Funds deposited next. We provide an inheritance cash advance to heirs who are waiting to receive.

Anonymous said...

[url=http://www.blingforfun.com]hip hop jewelry[/url],[url=http://www.blingforfun.com/pendants/cat_9.html]hip hop pendants[/url],hip hop watches,[url=http://blingforfun.com/belts/cat_18.html]bling bling[/url] ,hip hop,[url=http://blingforfun.com/chains/cat_7.html]hip hop chains[/url],hip hop bling,[url=http://blingforfun.com/chains/cat_7.html]iced out chains[/url],[url=http://www.blingforfun.com/chains/cat_7.html]wholesale chains[/url]
hip hop jewelry
wholesale hip hop watches
hip hop rings

Anonymous said...

alternate drugs for risperdalxanax with birth control pills

[url=http://www.bebo.com/buylevitraonline1]buy domain levitra online 0catch com[/url]

Anonymous said...

I usually don't post in blogs but your blog forced me to, amazing work.. beautiful !

Anonymous said...

Please excuse my lack of knowledge here but how could you save that JPEG to the library as an item to use within the project? I haven't found a good tutorial on this as yet.

gh

Author said...

Thanks for the post
as3 save bitmap