Captures images from the webcam and save them to the desktop

August 25th, 2009 in Flash | 26 Comments

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.

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++;
}

What you think ...

(26 Comments)

+ Add a Comment

James
Aug 27th, 2009
Yes sir ! Exactly what I need
Ricko
Aug 28th, 2009
Very usefull work ! I did something like that in a tutorial. You cand find it here: http://groups.adobe.com/posts/a2ae12ada8. And the live demo is here : http://upgradescript.ro/tutorial/.Hope it helps.Keep it up with this tutorials.They are very helpful.
Amrita
Sep 7th, 2009
Thanks !! Very helpful !!

Exactly what I want , but i have a query can we manipulate height and width of the jpg ?

Thanks
Amrita
Michael Inkoom
Sep 8th, 2009
I can’t open saveWebcam with AS3 and there seems to be errors in the source.
admin
Sep 8th, 2009
As mentioned above, this example requires Flash Player 10 so you need to have Flash CS4 to open the file.
We have tested the source that we gave, it works just fine.
Luca
Sep 24th, 2009
PROBLEM
I tried your demo, I clicked “Allow access”, but a white box appears with no image.
The application seems unable to access my webcam. Some useful data below:

SYSTEM: MAC OS X 10.5.6
FLASH PLAYER: MAC 10,0,32,18
Pat
Sep 24th, 2009
@Luca: check the previous tutorial http://www.riacodes.com/flash/capture-images-from-the-webcam/.
In the comments, Ryan Barnes spoke about a problem with his Mac
Maybe the same problem…
nemo
Sep 29th, 2009
Thanks for the source code, its much appreciated!

Just one question, when viewing your demo, or executing the given .fla file, the image quality is quite pixelated slightly, any ideas why that is? The flash setting is set to High.
ikawka
Oct 14th, 2009
hello,

this code is very helpful, however may i ask how do you improve the camera quality? i tried to camera.setQuality(0,100) but still same quality… tnx
ASH
Oct 27th, 2009
Hey
i’m having a problem saving the image, it come sup with this
1061: Call to a possibly undefined method save through a reference with static type flash.net:FileReference.
fernando
Nov 21st, 2009
wooow!
thanks a lot!!..
godblessyou!
Sebastian
Jan 10th, 2010
Hi,

thank you for this tutorial.
Is it possible to run this application on my webserver to give the users the possibility to take a new picure an save it on the webserver in a defined folder?

Also i want to give the jpg a defined name like the users id in the datebase.

How can i do that ?
andrew
Jan 21st, 2010
thank you sir…
can you please add the ability to crop the images before save?

i appreciate the help…
i needed for my church…
Godbless you
Soumya
Mar 10th, 2010
HI,
really its good one. But please tell me how to add it to html page.
Please reply soon.
Nick
Apr 3rd, 2010
Hello,

I’m trying to employ this on my local computer. It works perfectly, but shows the save dialog box — is there any way to bypass this so the user doesn’t have to see it every time they capture a picture?

Thanks!
Benj
Apr 26th, 2010
Hi

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

I take it I’d use setInterval but im pretty stuck with it, can you help?!

Many thanks
Wallville
Apr 29th, 2010
ikawka and Nemo…

In CS4, on the export settings…checkout the Jpeg settings. Use the deblock jpeg.
Wallville
Apr 29th, 2010
kawka and Nemo…

In CS4, on the export settings…checkout the Jpeg settings. Use the deblock jpeg. Also increase your cam resolution by setting your initial vars as such….

var quality:int = 100;
var bandwidth:int = 0;
var cam:Camera = Camera.getCamera();
cam.setQuality(bandwidth, quality);
cam.setMode(320,240,3,false);
gemea
May 12th, 2010
Hello.

I’ve tried your example and works very nice. I have a question then, how could you crop your image from the background? Is there a way to do this?

Thanks
Bharat
May 24th, 2010
can we record video using webcam in flash
fag
Jun 22nd, 2010
hi, thank you very much for this tutorial.
I need to send the picture to an ASP page, and show it there. Can somebody help me with the ASP code? I’d try with…

but it isn’t work.
Thanks a lot!
fag
Jun 22nd, 2010
sorry, here is my ASP code…

// start…
bytecount = Request.TotalBytes
binread = Request.BinaryRead(bytecount)
Response.BinaryWrite binread
//end.
Ferra
Aug 3rd, 2010
Hi, i would like to know how can i import back the pictures that i’ve saved in desktop, to be imported back to the flash . Like automatically, maybe the picture will ‘rain’ into my flash movie. I’m working on a school project, i need help. thanks a lot and greatly appreciate if you would reply me.
cherry
Aug 4th, 2010
some problem for the MAC….how to deal with that?
Mondo Jay
Aug 4th, 2010
…
Does anyone know how, or where I could find a tutorial,
that would tell me how to add images to the captured photo?

Like lets say you wanted to add a clown nose or watermark to the captured photos?
Is there any tutorials out there for that?
…
offcourse
Aug 17th, 2010
Hi

Is it possible to preselect a camera that the server can find, such as a usb cam or ip cam, instead of the visitor’s cam?

Thank you

Popular Posts

Captures images from the webcam and save them to the desktop

What you think ...

(26 Comments)

Leave a Comment

Terms of Use

ABOUT