Simple Marker Tracking (using a webcam and AS3)

Short Introduction

Inspired by the manifold possibilities of motion tracking, and having developed an "Augmented Reality Pong" using the Studierstube4 framework, I decided to realize my own motion tracking system using four different marker types. For this purpose I made use of the different image processing capabilities provided by the libraries of ActionScript 3.0, and surprisingly the application runs really smoothly.

The main methods of the program: Mirroring the webcam image, binarization, marking of regions (via floodfill), extracting possible markers (cropping via bounding boxes), analysing the result. Additionally there is the option to activate edge detection. At the end of the source code, there is some outcommented code (this is for getting the orientation of the edges, rotating a bitmap using a matrix, and obsolete: my own flood filling algorithm).

The following pdf shows you the single steps of the pattern recognition:


Time Spent On Project
This project needed about 55 hours (from 20 to 30 June 2008) of my time. It has been my first contact with ActionScript 3 and its ways to handle BitmapData.

These are the markers I created as the source of tracking:

Print them and hold them in front of your webcam to test the application's tracking!

Marker Tracking in ActionScript 3 [02:03]

* For the animation of the red 3D-cube I used some classes of the Papervision 3d project.

Start the Program (in your browser)

Alternatively, you might use this link

Some Notes
1. Please note, that it would actually be better to use a coloured marker (such as complete RED or BLUE), then it would be much easier to detect the marker in the image! To filter a red marker you could use a threshold like 0xDD0000.
(I couldn't do that because I do not have a color printer...)

2. Try to avoid a dark background! Use a bright background instead, which makes it easier to detect the marker (reduces flickering).

3. There are many parts of the code that can be optimized. Feel free to improve!

4. I used 'lockers' (Booleans) to prevent the access to methods, when it is doing the image processing. Maybe this is not necessary.

Source Code
Here is the source code (one document per class):

Or download the whole package including all files you need for coding: or here (mirror)



Tom hat gesagt…
nice! is it possible to do in AS2?
Kajus hat gesagt…
AS3 is way faster than AS2. But if you have to do it in AS2, those links might help you:
Image API in Flash 8
[AS3 to AS2] - BitmapData + getPixel + colorTransform

For more help, please use the corresponding Google Search
Syazani Suhaifi hat gesagt…
Thank you! I have been wondering how to do tracking. I read lots of papers but never really understood. Now I understand what do I have to do.