Captures images from the webcam and save them to the desktop
August 25th, 2009 in Flash | 45 CommentsThis 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.
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!
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
Apr 29th, 2010
ikawka and Nemo…
In CS4, on the export settings…checkout the Jpeg settings. Use the deblock jpeg.
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);
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
May 24th, 2010
can we record video using webcam in flash
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!
Jun 22nd, 2010
sorry, here is my ASP code…
// start…
bytecount = Request.TotalBytes
binread = Request.BinaryRead(bytecount)
Response.BinaryWrite binread
//end.
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.
Aug 4th, 2010
some problem for the MAC….how to deal with that?
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?
…
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
Sep 20th, 2010
hi can anyone help ?
i want fileRef.save() not Opens a dialog box save a file to the local filesystem.
i just want save automatically in local drive .
any other class in FileReference().
thanks a lot
Sep 20th, 2010
Hi, I don’t know why the source perfectly works when I test it locally but it doesn’t work in your demo page…
Sep 28th, 2010
Thanks For Your Tutorials , But I Have One Question ?
I want To Save Image Automatically In Predefined Folder ?
How To Save Image With Out Showing The Dialog Box (The save as Box )
ex : Like face book Camera
Oct 22nd, 2010
May i save the jpg file in server folder too? How can i do this in a php language? Thanks
Dec 4th, 2010
how would i save this into the flash library instead any advice
Jan 14th, 2011
can u specify whjere input name of image and where user can specify path save the image like c:\files
Jan 14th, 2011
QUESTION:I want To Save Image Automatically In Predefined Folder ?
ANSWER:
IN FLASH
import flash.display.BitmapData;
shaF.onPress = function() {
output();
};
function output() {
snap = new BitmapData(mc._width, mc._height);
snap.draw(mc);
var pixels:Array = new Array();
var w:Number = snap.width;
var h:Number = snap.height;
for (var a = 0; a<=w; a++) {
for (var b = 0; b<=h; b++) {
var tmp = snap.getPixel(a, b).toString(16);
pixels.push(tmp);
}
}
var output:LoadVars = new LoadVars();
output.img = pixels.toString();
output.height = h;
output.width = w;
output.send("show.php", "output", "POST");
}
stop();
IN PHP
<?php
//If GD library is not installed, say sorry
if(!function_exists("imagecreate")) die("Sorry, you need GD library to run this example");
//Capture Post data
$data = explode(",", $_POST['img']);
$width = $_POST['width'];
$height = $_POST['height'];
//Allocate image
$image=(function_exists("imagecreatetruecolor"))?imagecreatetruecolor( $width ,$height ):imagecreate( $width ,$height );
$background = imagecolorallocate( $image ,0 , 0 , 0 );
//Copy pixels
$i = 0;
for($x=0; $x<=$width; $x++){
for($y=0; $y<=$height; $y++){
$r = 255-hexdec("0X".substr( $data[$i] , 0 , 2 ));
$g = 255-hexdec("0x".substr( $data[$i] , 2 , 2 ));
$b = 255-hexdec("0x".substr( $data[$i++] , 4 , 2 ));
$color = ($r << 16) | ($g <
Jan 14th, 2011
php FULL CODE:
<?php
//If GD library is not installed, say sorry
if(!function_exists("imagecreate")) die("Sorry, you need GD library to run this example");
//Capture Post data
$data = explode(",", $_POST['img']);
$width = $_POST['width'];
$height = $_POST['height'];
//Allocate image
$image=(function_exists("imagecreatetruecolor"))?imagecreatetruecolor( $width ,$height ):imagecreate( $width ,$height );
$background = imagecolorallocate( $image ,0 , 0 , 0 );
//Copy pixels
$i = 0;
for($x=0; $x<=$width; $x++){
for($y=0; $y<=$height; $y++){
$r = 255-hexdec("0X".substr( $data[$i] , 0 , 2 ));
$g = 255-hexdec("0x".substr( $data[$i] , 2 , 2 ));
$b = 255-hexdec("0x".substr( $data[$i++] , 4 , 2 ));
$color = ($r << 16) | ($g <
Feb 2nd, 2011
Very good Tutorial…works like a charm…
now…how can I save this to a predefined server location using ColdFusion as backend…
What I want to achieve is to complete a registration form for my users to input their personal information, asign the registry an ID number…and allow them to take a picture, save it in the server with the #ID.jpg filename and add the file path in the database along with the rest of the user information…
Mar 13th, 2011
Hi i´m beginer in Action Script, i got the .fla file and i test it with flash cs5 and it does not works…. what i can do for the source can do the same that does in this tutorial???
thanks for your help
Mar 16th, 2011
i want to save without ask, in c:\
Mar 28th, 2011
it’s really great code and it’s so useful to me .. thanks 4 u..
and i want more help plz
how i can save image automatically without asking about destination ??
and i have another question
how i can open webcam without asking ??
thanks for your time……..
May 23rd, 2011
Hello is there an asp classic code I need it very much…your help will very much appreciated…thanks
May 27th, 2011
the PHP script from ABDULLA is not complete I’m afraid…. is there anyone who has a working solution to save the captured image ON THE WEBSERVER ?
I want users to be able to create an icon for their account, so the captured image should be on the server
Jul 19th, 2011
hello … very good tutorial …
I want to print automatically capture …
as could do that?
thank you very much.
Luis from Argentina
Aug 31st, 2011
Abdulla … Can you provide the full PHP code? It seems like both posts were cut off after “$color = ($r << 16) | ($g <". Thanks.
Sep 20th, 2011
Excellent Stuff, but where the captured image is saving. I did not find the captured images anywhere on my machine, i even did not find the save captured image option. please do the needful as soon as possible.
thanks in Advance
Shashi
Oct 18th, 2011
Cannot seem to open the source in my flash cs3. but the previous source for the capture image tut worked just fine. i tried tweaking it to get the save button working but i keep getting a 1061 error on line 36. Help please?
Oct 18th, 2011
Also, looking to add a customized frame? How does one go about that? Thanks!