Flex | Flash | Air | AS3
Captures images from the webcam and save them to the desktop
August 25th, 2009 in FlashThis 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++;
}
Aug 27th, 2009
Yes sir ! Exactly what I need
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.
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
Sep 8th, 2009
I can’t open saveWebcam with AS3 and there seems to be errors in the source.
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.
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
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…
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.
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
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.
Nov 21st, 2009
wooow!
thanks a lot!!..
godblessyou!
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 ?
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
Mar 10th, 2010
HI,
really its good one. But please tell me how to add it to html page.
Please reply soon.