Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme



Look, it's Gaurav!!!

Getting Started with the Webcam

by Gaurav Pandey, edited by kirupa   |   2 October 2011

  Have questions? Discuss this Flash / AS3 tutorial with others on the forums.

Almost everyone these days has a webcam attached to your computer. It is so common that sites, for example, like Facebook integrate with your webcam for allowing you to set your profile picture. There is no reason you shouldn't partake in all of this webcam action yourself.

In this introductory tutorial, I will explain how you build a small application that connects to a webcam and displays the resulting video to your screen.

Below is an example of what you will create:

Get Adobe Flash player

[ I wonder who that is?! ]

Ok, let's get started!

Getting Started

Launch Flash and create a new ActionScript 3 project:

new as3 document

[ create a  new AS3 project ]

Once you have created your project, you will see a blank stage where all of the magic will take place.

The way you will get your webcam image to display is made up of two steps:

  1. Adding a Video symbol to your stage that will display the stream from your webcam
  2. Adding a few lines of ActionScript 3 code that associates your webcam with the Video symbol you added a few seconds ago

Let's look at these two steps in greater detail.

Adding a Video Symbol

You are probably going, "What is a Video symbol?" Even long time Flash users probably have no idea of what this is, but it is basically a symbol similar to a MovieClip, Graphic, or Button that you can add to your stage.

The way you add this is via your Library. Make sure your Library is displayed by going to Window | Library (or by pressing Ctrl + L):

library is empty

[ your Library awaits ]

Right now, your Library will be empty. Let's fix that by adding your Video symbol. The way you add the Video symbol is by clicking on the obscure Options button found in the top-right corner of the Library panel:

[ I bet you have never clicked on that before! ]

When you click that button, a menu will appear with various things you can do:

add a new video item!!!!

[ there is New Video item there.... ]

One of those things is the ability to add a Video symbol! Go ahead and click the New Video item, and once you have done that, you will see the Video Properties dialog appear.

From this dialog, give your symbol the Name webcamVideo, and make sure the Video option is checked:

add the video symbol

[ specify your Symbol name here ]

After you have made those changes, press OK to create your Video symbol. Your Library will now have your Video symbol created and stored:

Video symbol is now stored

[ your webcamVideo symbol sleeps, sleeps, sleeps in a coil ]

A symbol in your Library isn't particularly helpful, so what we are going to do is actually instantiate it (makin' it real) by adding this symbol to your stage. To do that, simply drag your webcamVideo item from your Library and drop it onto your stage:

here is a video symbol

[ your Video object is represented as a box with an X in it ]

When you dropped your Video object, you will see a box with an X through it, and this box is now an instance of your webcamVideo object. There are two changes we need to make.

 First, resize this instance to the size of your stage. You can do this by manually resizing the adorners or by setting a width/height explicitly in the Properties panel:

video symbol stage

[ make your Video object larger! ]

The final thing we are doing to do is give your Video object an instance name. Make sure it is still selected, look over in your Properties Panel, and give your object the instance name webcamVideo:

webcam video instance name

[ give your Video object an instance name ]

Once you have done this, you are done fiddling with your webcamVideo object.

Adding the Code

The last step before you have a working example is adding your code. We are going to use a Document Class that associates your stage with a particular class. If you are not familiar with this, please take a few moments and read the Specifying a Document Class tutorial first.

Associate your application with a class called WebcamVideoHelper:

webcam video helper

[ set the Document Class name ]

Go ahead and generate the new class file and save it is WebcamVideoHelper.as in the same directory as your FLA file.

Right now, you will see your WebcamVideoHelper.as file open and displayed:

your code is displayed

[ the default code that gets inserted for you ]

What you are going to do is add some code to the WebcamVideoHelper constructor function. As a part of doing that, you will declare some import statements outside of that function as custom would dictate.

Go ahead and modify the code that currently lives inside WebcamVideoHelper by adding the non-grayed out lines in similar locations as shown below:

import flash.display.MovieClip;
import flash.media.Camera;
import flash.media.Video;
public class WebcamVideoHelper extends MovieClip
public function WebcamVideoHelper()
var camera:Camera = Camera.getCamera();
camera.setMode(400, 300, 30, false);

If you make the above additions, save your code file, and preview the animation by pressing Ctrl + Enter, you will see your webcam video showing up in your Flash application.

First, you will see the permissions dialog that Flash will automatically throw up:

the permissions dialog

Once you select Allow, you will now be able to see the webcam video appear:


Wohooo! You now have a working application that utilizes your webcam!

Why your Application Works

Now that you have a working application, let's take a look at why it works the way it does.

Let's start with the code first:

import flash.display.MovieClip;
import flash.media.Camera;
import flash.media.Video;
public class WebcamVideoHelper extends MovieClip
public function WebcamVideoHelper()
var camera:Camera = Camera.getCamera();
camera.setMode(400, 300, 30, false);

The most important line of code here is the following:

var camera:Camera = Camera.getCamera();

This line initializes our Camera object by calling the getCamera() function. One you have your Camera object, it is time to specify the parameters of the video being recorded.

That specification is handled by the setMode function:

camera.setMode(400, 300, 30, false);

The setMode function takes four arguments:

  1. width
    The width at which your camera will capture the image
  2. height
    The height at which your camera will capture the image
  3. fps (frames per second)
    The rate at which your video will be captured
  4. favorArea
    By default, your webcam will have some recommended values for width, height, and frame rate. If your webcam does not specify that information or you wish to override it for your own purposes, you can do so by passing in false as the argument.

In our example, we set the capture width and height to be 400 and 300 respectively, and that matches the size of our webcamVideo object in our stage. You should adjust it as you see fit.

The frame rate is set to 30, and I pass in false for our favorArea because I want to override the default values with my own.

Once you have specified the details of how your camera will capture the data, all that is left is to funnel the data to our Video object:


Our video object, lovingly referred to with an instance of webcamVideo, contains the attachCamera method that takes our Camera object as its argument. In case you forgot, the webcamVideo object is what you added to your stage in Flash a short while earlier!


I hope this tutorial helped give you an overview on using the webcam with Flash. There is a lot more you can do, and this tutorial just scratched the surface of what is possible.

If you have any questions or comments, please don’t hesitate to post them on the Forums.


Gaurav Pandey

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!


Creating engaging and entertaining content for designers and developers since 1998.



Loose Ends

:: Copyright KIRUPA 2024 //--