Flex and the webcam

Art is a passion of mine, I really enjoy working on a piece of artwork (usually graphite drawing on canvas) and someday, when I grow up, I would like to make some sort of living as an artist. Anyhow I thought a great way to get a bit of exposure for my artwork would be to do some time-lapse recordings of the actual process of drawing an image.

So I looked around on the internet for some time-lapse recording software, and there is a lot of great stuff out there. However just before buying I was fortunate enough to go to the conference in Queenstown NZ which showcased some of the cool RIA technologies avaiable and in the works. Anyhow after seeing some of the speakers demonstrate how simple it is to build some very powerful applications, I thought why not build it myself.

These is loads of information on this sort of stuff on the web but regardless, I thought I will blog about some of the things I build along the way… sort of stepping stones to the final application.

So step1… get my webcam to work with an AIR application.

This was actually a little bit tricky for a relative flex/air noob like me. There are alot of sample apps out there but not alot that relate to webcams as such. I did find a good one which deals with flex and webcams which helped me alot.

In anycase lets get to this basic webcam app… I’ve gotta warn you, this sample app does nothing more than display your webcam’s video stream on the application… no error catching, no nothing extra really

First, the very very basics… make sure you have Flexbuilder and AIR installed on your machine. And make sure your webcam is installed and plugged in

Second, create a new air project in flexbuilder… call it “basic_cam” or something easy like that. You should end up with a file that contains something similar to the code below:


 


Now we add the object which will eventually display the webcam stream, give it an id=”cnvWebcam” attribute:

 

width=”160″ height=”120″

id=”cnvWebcam” left=”10″>


now we need to import the necessary objects for the camera to function. Add an mx:script tag to the code and import the , and into the file.

    

Now we need to add the camera initialization function inside the script tags.

 public function initCamera():void {
videoHolder = new UIComponent();
cam = Camera.getCamera();

video = new Video(160,120);
/* Set the video to get its stream from the camera */
video.attachCamera(cam);

/* Attach the video object to the UIComponent */
videoHolder.addChild(video);
/* Attach the video holder to our canvas object */
cnvWebcam.addChild(videoHolder);
}

Finally we make the application initialise the when it is completed by altering the windowed application tag…


 

and that should be that… below is the complete code…




width=”160″ height=”120″
id=”cnvWebcam” visible=”true” left=”10″>


this can also be done as a flex app by following the same instructions except creating a flex project rather than an AIR project

Comments
Add New
Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Help my beer fund

RocketTheme Joomla Templates