Capture images from the webcam
July 6th, 2009 in Flash | 50 CommentsIn this tutorial, we are going to learn how to take image captures from the webcam.
You might be interested in looking at a sequel of this tutorial : Captures images from the webcam and save them to the desktop
1. Create a new flash file (Actionscript 3.0) and save it as captureWebcam.fla.
2. Rename ‘layer 1′ to ‘button’. Create a button on the stage, convert it to a movie clip and give it an instance name of capture_mc.
3. Create a new layer named ‘actions’ and with its first frame selected open the actions panel.
All that we are going to do now happens in the actionscript code.
4. First we initialize a webcam by attaching a camera to a Video object that we add to the stage:
var cam:Camera = Camera.getCamera(); var video:Video = new Video(320,240); video.attachCamera(cam); video.x = 20; video.y = 20; addChild(video);
5. Then, we need to use the Bitmap and BitmapData classes to store the image that we want to capture and display on the stage.
We start by importing the Bitmap and BitmapData classes:
import flash.display.Bitmap; import flash.display.BitmapData;
6. Then create a new BitmapData object of the same proportions of the video object to store the BitmapData captured from the playing webcam.
And create a bitmap object to display the data from the BitmapData object and add it to the stage.
var bitmapData:BitmapData = new BitmapData(video.width,video.height); var bitmap:Bitmap = new Bitmap(bitmapData); bitmap.x = 360; bitmap.y = 20; addChild(bitmap);
7. Finally, after setting its buttonMode property to true, we add a Click event listener to our button. This event is handled by the captureImage function that draws the image that is currently displaying from the webcam into our bitmapData object.
capture_mc.buttonMode = true;
capture_mc.addEventListener(MouseEvent.CLICK,captureImage);
function captureImage(e:MouseEvent):void {
bitmapData.draw(video);
}
8. Here is the final code :
import flash.display.Bitmap;
import flash.display.BitmapData;
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);
function captureImage(e:MouseEvent):void {
bitmapData.draw(video);
}
9. Test your movie to see it in action.
Jul 8th, 2009
Great stuff …
Thanks
Jul 11th, 2009
Hi! This is nice, yet I knew it from AS2. Thanks for the upgrade. Seems a lot similar… Just one thing. Do you know if it is possible to do it also in Director? I know that Director accepts SWF. files from Flash, but, in Director itself, can we do it similarly without any SWF, just «old plain» DIR. files?
Thanks
Márcio Guerra
Jul 13th, 2009
Great tutorial, thanks a lot.
Is there any way to give a name to the captured image and save it on the server side or the same computer?
Jul 14th, 2009
hey thanks for this i need for catching my friend pics from webcam
Jul 21st, 2009
[...] Read tutorial [...]
Jul 21st, 2009
Hi really nice tutorial, i am a bit of a beginner when it comes to AS, but I am wondering how to do the exact same thing but for AS 1 or 2 so I can incorporate this function in my flash project?
Jul 24th, 2009
@ALBERT : Hello,
Sorry but our site offers only AS3 tutorials.
By the way, we encourage you to upgrade to AS3.
Good luck
Jul 24th, 2009
Thanks you!
Jul 27th, 2009
nice tutorial
Jul 28th, 2009
This method dosen’t seem to be picking up my Macbook Pros webcam. Any idea why that’s happening?
Jul 29th, 2009
@ RYAN BARNES :
Hi Ryan, sorry but we haven’t tested this code on a Mac. We’ll reach you when we find out the solution.
Jul 30th, 2009
Issue resolved. The problem came from the settings. If you right click on the .swf, go to settings, then click on the camera, then drop down the menu and choose ‘USB Class Video’ rather then the default ‘DV Video’, it will work on your new Macbook Pro.
Thanks again!
Aug 1st, 2009
I have tested it on MacBookPro and I can confirm it
GR8 stuff
I would like to make a translation of this post on my blog, of course with linking to this site and U as author – is it ok for you?
Aug 1st, 2009
@ PIOTR :
Hi Piotr, yes you can translate this post on your blog with reference to our site like you said.
Stay tuned for more tuts …
Aug 17th, 2009
nice tutorial…im a beginer, just wondering how to save the image capture in to a database of image..
thx
Aug 18th, 2009
Hello there, thank you for sharing this great little Flash asset. I’m wondering how could I save the taken picture on my server ?
Sep 18th, 2009
[...] the web cam in Actionscript 3 isn’t hard, here’s a nice tutorial from Riacodes.com: Capture images from the webcam. But I thought I’d make it into a class so it would be reusable for your everyday [...]
Sep 21st, 2009
Good1 u saved me alot of time.
Thnx keep up the good work
Sep 22nd, 2009
Ryan-Thanks for figuring out the USB Class Video for the Mac…… I was so confused on why it would enable my cam on a iMac…. for like the past month.
Thanks again!
Sep 24th, 2009
this is awesome.
Oct 11th, 2009
this is cool! im trying to look for this code till i get here but the one im looking for is how just the image, i want to save it just the image, i really like to add features for the next of my games like this http://joeyddizon.deviantart.com/art/Gorgeous-Angel-Dress-up-138992946 could you help me about it? thanks! in advance
Nov 3rd, 2009
hi is it possible to export the captured image into a file..like a jpeg or png file?
thanks!
Nov 3rd, 2009
JOshua check this tutorial : http://www.riacodes.com/flash/captures-images-from-the-webcam-and-save-them-to-the-desktop/
Jan 31st, 2010
Excelent tutorial!
Could you tell me if I could to send to server this image?
Feb 28th, 2010
Great work!!
That´s just what i wanted
Mar 29th, 2010
Hi guys
I have Macromedia Flash MX
how can I use
import flash.display.Bitmap;
import flash.display.BitmapData;
in Macromedia Flash MX
May 9th, 2010
[...] http://www.riacodes.com/flash/capture-images-from-the-webcam/ http://www.ultrashock.com/forums/actionscript/as3-save-bitmap-82715.html http://www.bytearray.org/?p=90 http://blog.mxml.com.br/capturar-imagem-da-webcam-e-salvar-com-php http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12732 [...]
Jul 21st, 2010
Nice and simple. Just what I was looking for. Thank you.
Aug 23rd, 2010
[...] exemplo rápido foi retirado dos sites: RiaCodes e Luiz Henrique [...]
Aug 24th, 2010
Nice tutorials…
Do you have the as2 version of this?
Thanks.
Aug 24th, 2010
[...] http://www.riacodes.com/flash/capture-images-from-the-webcam/ [...]
Sep 4th, 2010
wow.. its really nice script…
Thanks a lot
Sep 17th, 2010
[...] 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. [...]
Sep 23rd, 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
Nov 12th, 2010
Hey, how would I add any effects to the images?
Thanks
Jan 19th, 2011
greatt!! i have try it, and the code work! thx……
Mar 6th, 2011
Very nice example! I was able to adapt it to Flex. Thank you!
Mar 22nd, 2011
Hi, im a beginner, so maybe this would be a stupid questions.
‘If you right click on the .swf, go to settings, then click on the camera, then drop down the menu and choose ‘USB Class Video’ rather then the default ‘DV Video’,’
where can i find the .swf to click on???
Mar 22nd, 2011
sorry i figure out the way to change it to the USB Class Video
but it doesn’t work for my macbook pro
There are two errors
which is
scene1, Layer ‘actions’, Frame 1, Line 18&19 1120: Access of undefined property capture_mc
after this, i highlight the button -> Modify -> Convert to symbol -> Name the button as Capture_mc ->
Type: Movie clip
it still doesnt work
any ideas why?
Mar 24th, 2011
Short, Simple & Sweet.
Thanks for sharing.
Apr 13th, 2011
@SUDEEP GURUNG: to save the picture, you can combine the code with another tutorial for printing
http://www.riacodes.com/flash/how-to-print-with-as3/
Jun 8th, 2011
That’s GREAT!!!!!!!Working Fine!!
Aug 5th, 2011
Hey guys,
i imported all my classes,but im getting runtime error…..pls clear my doubt…
import flash.media.Camera;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.media.Video;
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at videoCamera_fla::MainTimeline/videoCamera_fla::frame1()
Sep 20th, 2011
Excellent Stuff, but where the captured images are 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.
thanks in Advance
Shashi
Oct 14th, 2011
Hey friend
I seriously need u’r help
can u post a Webcam recording and saving it in the desktop code
please it would be a really big help friend
or mail me at sunnythangaraj@aol.com
I really want your help in this
please help me out in this
hope u would help me out ……….. Thank You
Oct 20th, 2011
Great stuff …
Thanks
Nov 12th, 2011
thank you very much this is exactly what i need, actually smplier what i expect
Nov 15th, 2011
after captured images, how to saving in database mysql,.thx
Nov 29th, 2011
[...] 2. Capturing web camera (web flash): jpegcam – http://code.google.com/p/jpegcam/ tutorial – http://www.riacodes.com/flash/capture-images-from-the-webcam/ [...]
Nov 30th, 2011
Hi does anyone know how to capture video and reinsert it into another video… bit like http://blistjarna.se/ cheers