Captures images from the webcam and save them to the desktop

Captures images from the webcam and save them to the desktop

This tutorial is a sequel of our tutorial called “Capture image from the webcam”. Here we’ll add a new functionnality that let the user save the captured photo to his desktop. This example requires Flash Player 10.

View DemoDownload Source

1. Read and follow the steps of our previous tutorial “Capture image from the webcam” . We’ll begin this tutorial from the finished capatureWebcam.fla file of this previous tut.

2. Open the previous file. Create a new button on the stage, convert it to a movie clip and give it an instance name of save_mc.

3. In order to encode the captured image as a JPG, we’ll use the Adobe JPG Encoder that is available in the as3corelib. Visit http://code.google.com/p/as3corelib/ to download the library. Unzip the file and inside the src folder grab the com folder. We’ll use what’s in the com/abode/images folder.
In order to save the image, we’ll use the Flash Player 10 FileReference API.

4. With the ‘actions’ layer selected open the actions panel. Add the following import statements :

import com.adobe.images.JPGEncoder;
import flash.net.FileReference;

5. Next add a click event listener to the save button that will be handled by the saveImage function.

save_mc.buttonMode = true;
save_mc.addEventListener(MouseEvent.CLICK,saveImage);

6. Inside the saveImage function declare a JGPEncoder and create a ByteArray of the bitmapData encoded as JPG.
Use the FileReference.save() method and pass in the ByteArray and the file name.

var i:Number=1;
var fileRef:FileReference = new FileReference();

function saveImage(e:MouseEvent):void{
     var encoder:JPGEncoder = new JPGEncoder();
     var ba:ByteArray = encoder.encode(bitmapData);
     fileRef.save(ba,"capture"+i+".jpg");
     i++;
}

7. Here’s the final code with the added code highlighted, test the movie to see it in action.

import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
import flash.net.FileReference;

var cam:Camera = Camera.getCamera();
var video:Video = new Video(320,240);
video.attachCamera(cam);
video.x = 20;
video.y = 20;
addChild(video);

var bitmapData:BitmapData = new BitmapData(video.width,video.height);

var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = 360;
bitmap.y = 20;
addChild(bitmap);

capture_mc.buttonMode = true;
capture_mc.addEventListener(MouseEvent.CLICK,captureImage);

save_mc.buttonMode = true;
save_mc.addEventListener(MouseEvent.CLICK,saveImage);

function captureImage(e:MouseEvent):void {
	bitmapData.draw(video);
}

var i:Number=1;
var fileRef:FileReference = new FileReference();

function saveImage(e:MouseEvent):void{
     var encoder:JPGEncoder = new JPGEncoder();
     var ba:ByteArray = encoder.encode(bitmapData);
     fileRef.save(ba,"capture"+i+".jpg");
     i++;
}

60 thoughts on “Captures images from the webcam and save them to the desktop

  1. Pingback: Coding the Capture | Final Project Diary

  2. Pingback: Codes used REFERENCED | Final Project Diary

  3. yatin

    how do I save image from webcam without using save dialogue box.
    I want it like once i click save it should save image to specified location on disc shoild not pop up dialogue box for saving image.
    how can we do this?

  4. Mohan kumar

    Hi can any one help me how to use the above sample to capture video instead of image….?

  5. Fergus Chan

    How would I go about automating the capture and adding a delay? I would like a movie clip to play a 3…2…1 countdown animation then take the capture automatically

    can you help?!
    thanks

  6. priya

    Hi,
    I tried your code..its working good..still i need a help..I want store the captured image in mysql database using asp.net..can anyone tell me how to do this

  7. Sally Mack

    Thank you very much. I struggled with the instructions in the Adobe site, and in other places, but your instructions are so clear, I’ve been able to use them to make a little web cam to run from inside our LMS so the students don’t have to access Web Toy etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>