Capture images from the webcam

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.

63 thoughts on “Capture images from the webcam

  1. Nagaraju

    Nice Tutorial, but i want video recorder, after record it will publish to server, can anybody help me

  2. MURALI

    Can tell me the procedure for auto capture that images then that images will store any location in system please…

  3. Priyank

    Hello ,,
    Great tutorial ,,, my issue is which software should i use to run this script ,,,,, and what should i do to use this in asp.net webpage ,, is it possible ,,, please point me some articles or links if you could,
    Thanks.Please reply.

  4. Abdullah

    How can I solve resolution problem? My webcam has high resolution but picture has lower than my webcam

  5. yatin

    i use macromedia flash 8…
    i open it and clicked on create action script file
    then i copied above final code and saved it with .fla extention.
    but how to get output from that.
    I am new to flash…
    please help
    i want to add same functonality in my web application to capture image from webcam

  6. yatin

    I am getting error at line 18 and 19
    error 1120 : undefined access
    then i defined var capture_mc
    but now getting error #1010 as output

    help me please

  7. yatin

    TypeError: Error #1010: A term is undefined and has no properties.
    at capture_webcam_fla::MainTimeline/capture_webcam_fla::frame1()

  8. yatin

    continue from my previous two comments ………….
    and button not working to capture image

  9. yatin

    got answer to my previous 4 comments.
    but now problem is how to save image automatically to predefined folder on disc without user being asked for where to save by pop upping save save dialogue box?

  10. babu

    Hi This is very nice post , but what my question was can i record a 2 min video and save it on my desktop.

Leave a Reply

Your email address will not be published. Required fields are marked *