Capture images from the webcam

July 6th, 2009 in Flash | 28 Comments

In this tutorial, we are going to learn how to take image captures from the webcam.

View DemoDownload Source

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.

  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(28 Comments)

+ Add a Comment
  1. Paul
    Jul 8th, 2009

    Great stuff …
    Thanks

  2. Márcio Guerra
    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

  3. Sudeep Gurung
    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?

  4. surendar singh rathod
    Jul 14th, 2009

    hey thanks for this i need for catching my friend pics from webcam

  5. Flash tutorials | Some Special Flash Effect | Lemlinh.com
    Jul 21st, 2009

    [...] Read tutorial  [...]

  6. Albert
    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?

  7. admin
    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

  8. Marcel
    Jul 24th, 2009

    Thanks you!

  9. Script
    Jul 27th, 2009

    nice tutorial

  10. Ryan Barnes
    Jul 28th, 2009

    This method dosen’t seem to be picking up my Macbook Pros webcam. Any idea why that’s happening?

  11. admin
    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.

  12. Ryan Barnes
    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!

  13. Piotr
    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?

  14. admin
    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 …

  15. chandra_gpe
    Aug 17th, 2009

    nice tutorial…im a beginer, just wondering how to save the image capture in to a database of image..
    thx

  16. Ben
    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 ?

  17. Ahmed Nuaman — Freelance Designer and Developer — Blog — Actionscript 3 Web Cam Capture Made Easy
    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 [...]

  18. Jyothidhar
    Sep 21st, 2009

    Good1 u saved me alot of time.
    Thnx keep up the good work

  19. scotty
    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!

  20. alikh
    Sep 24th, 2009

    this is awesome.

  21. Yeoj
    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 :D

  22. joshua
    Nov 3rd, 2009

    hi is it possible to export the captured image into a file..like a jpeg or png file?

    thanks!

  23. Andrei
    Nov 3rd, 2009

    JOshua check this tutorial : http://www.riacodes.com/flash/captures-images-from-the-webcam-and-save-them-to-the-desktop/

  24. Márcio Ferreira Rosa
    Jan 31st, 2010

    Excelent tutorial!
    Could you tell me if I could to send to server this image?

  25. Gerardo Ulises
    Feb 28th, 2010

    Great work!!

    That´s just what i wanted

  26. Abdullah
    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

  27. WebCam » Bruno bg + ADOBE FLEX
    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 [...]

  28. JJ
    Jul 21st, 2010

    Nice and simple. Just what I was looking for. Thank you.

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website