Home » Code Samples, Flash, Flex, General Discussion, New Developments

Augmented Reality Using Flex, AS3, And A WebCam

4 November 2009 | 23,432 views | 15 Comments


Augmented reality (AR) on the Flash and Flex platform is really quite a new technology, but there are a large amount of developers and businesses that are embracing the use of AR online. Media companies such as Esquire, and technology companies such as GE are using the tech to engage their users both through print media as well as online media.

AR research explores the application of computer-generated imagery in live-video streams as a way to expand the real-world.

The possibilities of how you could use Augmented Reality (AR) are endless. Picture yourself walking or driving down the street. With augmented-reality displays, which will eventually look much like a normal pair of glasses, and informative graphics appearing in your field of view, and audio that coincides with whatever you see.

Now, this article doesn’t go as far as how to create your own AR glasses, but rather a “first step” into what is capable when using AR.

I’ve created a quick example of an AR environment below. Using your webcam, and the provided PDF, you can experience what AR is all about. Make sure to take a look at some more advanced examples in the links above also.

First, print this PDF.

Next, activate the Flash movie below to allow access to your webcam, and hold up the piece of paper to the camera to activate the AR environment. Make sure the large square is fully visible within the camera, and you’ll see how the AR loads and animates with how you position the paper.


Like I said, this example is brief. The AR that you will see above when holding up the pattern you printed is quite simple. There will be three cubes that will be displayed within your streaming video. The AR environment reacts to wherever the pattern on the printed pdf goes. You can rotate or angle the pattern against the camera, the the AR will follow.

There are many ways that this small “first step” towards a more interactive AR environment can be upgraded, and it’s only a start.

Using this technology you can stream video, add animations, or animate entire environments. You could green-screen actors or musicians and place them in a music video that comes to life seemingly right in your own hands. There are thousands of ways to implement AR to engage your website visitors or publication readers. Artist labels could use AR in their branding or CD packaging, or anyone with a business card could use AR to allow for mini-presentations. Whether that be a video or information displayed to a potential client by simply holding your business card card up to their webcam, while visiting your own website.

The ways of incorporating Augmented Reality into online and print media are nearly endless.

If you do not have a web cam, here’s how this simple example looks.

Please Upgrade Your Flash Player

Get Adobe Flash player

Have you used AR in any of your projects yet?

  • Gops4us

    Its not working . I keep the print out infront of the camera. But nothing is working as you said here.

  • Gops4us

    Its not working . I keep the print out infront of the camera. But nothing is working as you said here.

  • Haridas

    can u give the source code….

  • Haridas

    can u give the source code….

  • Ramachandran

    Hi,
    I want source code…. please send to my email for AR code..
    email: ramachandran@divum.in

  • Saul Miquilena

    where is the source code for this?

  • Test

    You can use the Flash.media.camera and flash.media.video classes
    and use the following codes.
    v_video = new Video();
    v_cam = Camera.getCamera(); ////it will select the default webcam connected to your system
    v_cam.setMode();//set mode for the webcam
    v_video.attachCamera(v_cam);//it will add the stream of the webcam as video
    addchild(v_video);//this will add the video stream to the current Sprite class.

  • Tasri

    This is awesome. Do share the source code with us!

  • For now, I’m not releasing the source. If there’s enough interest in it, I could though. Would just need some cleaning up is all.

  • romit

    fahim i am romit.. i hav decided to make a small project on AR. i m not being able to see my webcam video in flash builder 4.. my email id is chhabra.romit@gmail.com
    can u plz help mee

  • How can I add a webcam into my website for users to view my AR work?

  • ar-ra’du

    take a look this…
    one of a biggest newspaper in indonesia already using the augmented reality

    http://kompas.com/ar/

    n i want to learn it, could you show me how? thanks

  • ar-ra’du

    Excuse me, by the way, where is the source code?

  • Great use of AR

  • Great use of AR