Take a webcam snapshot in Flex 2.0

The bitmapdata class is also represent in Flex offcourse but finally I had the time to test a few things. In this little article I want to show you how you can easily capture a snapshot from a webcam in Flex 2.0. Because I want to do some more experiments later on I created an actionscript component that immediately embed the webcam image in a Panel. So we need to extend the Panel class to make our custumized WebcamPanel class. This sound difficult but it really isn't. Let's go ahead !
First make a new Flex project by choosing File > new > Flex Project. Give your project the name you like eg WebcamTutorial.

Next we are going to build our custom WebcamPanel component. Make some new "actionscript class" in your project by choosing File > new >actionscript class. As package we choose myComponents and we call our class WebcamPanel. As superclass we choose mx.containers.Panel.

We want to have all the functionality from our parent class so in the constructor of our WebcamPanel class we call the super() method.

public function WebcamPanel(){
   super();
   insertWebcamVideo();
}

As you see in the constructor we also calling another method called insertWebcamVideo(). These method looks like this:

public function insertWebcamVideo():void{
   var videoHolder:UIComponent = new UIComponent();
   var camera:Camera = Camera.getCamera();
   video = new Video(camera.width*2, camera.height*2);
   video.attachCamera(camera);
   videoHolder.addChild(video);
   addChild(videoHolder);
   videoHolder.y =10;
}

The first thing we do in the insertWebcamVideo method is declaring a variable videoHolder of the UIComponent type. We must do this to avoid getting errors when adding this as a child to our Panel. I tried casting to an UIComponent also but this way seems to be the only working. The next step is to put our camera stream into a Video object by using the attachCamera method. Next we want to make this all visible (= put it in the DisplayList) by using the addChild method. This way we first put our video object in the videoHolder and last but not least we put our videoHolder in the Panel which we are inheriting from. In the example code above we also changed the y value of our videoHolder to make it look a bit better in the Panel.

Ok, now we have following actionscript class:

package myComponents
{
 import mx.containers.Panel;
 import flash.media.Camera;
    import flash.media.Video;
    import mx.core.UIComponent;   

public class WebcamPanel extends Panel
 {
  public var video:Video
  public function WebcamPanel(){
   super();
   insertWebcamVideo();
  }
  public function insertWebcamVideo():void{
   var videoHolder:UIComponent = new UIComponent();
   var camera:Camera = Camera.getCamera();
   video = new Video(camera.width*2, camera.height*2);
         video.attachCamera(camera);
         videoHolder.addChild(video);
         addChild(videoHolder);
         videoHolder.y =10;
  }
 }
}

Next step in our webcam project is to use our actionscript component in a mxml application.

Choose FILE > new > MXML application. Give it eg the name "MainApplication".

Your MainApplication.mxml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">    

</mx:Application>

You can see we are now using the default adobe namespace defined by mx prefix.
But we also want to use our own namespace where our components are defined. Change the application opening tag so it looks like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*" layout="absolute">

As you can see we can now reference all our own components in the package myComponents with a prefix "MyComp".
This is really cool ! So lets implement our component in our application and skin our panel (YEAH, skinning is sooo damn easy in Flex !) Type following code right under your <mx application> opening tag:

<MyComp:WebcamPanel x="69" y="51" width="360" height="320" layout="absolute" backgroundColor="#ffffff" backgroundAlpha="1.0" title="Thats me…" fontSize="18" fontFamily="Verdana" color="#ff0080" borderColor="#ff0080" borderStyle="solid" cornerRadius="0" barColor="#FFFFFF" borderThickness="10" dropShadowColor="#FFFFFF" dropShadowEnabled="false" footerColors="#FFFFFF" headerColors="#FFFFFF" highlightAlphas="0" shadowDirection="center" textAlign="right" textDecoration="none" borderAlpha="0" fontWeight="bold" id="pnlWebcam" shadowDistance="10" alpha="1.0" >
</MyComp:WebcamPanel>

This is the code that places our own WebcamPanel on the screen. You see we use our own MyComp namespace to reference our component. Next we want to place a normal Panel where we are going to place the snapshot later on :

<mx:Panel x="499" y="51" width="360" height="320" layout="absolute" backgroundColor="#ffffff" backgroundAlpha="1.0" title="Thats me also..." fontSize="18" fontFamily="Verdana" color="#ff0080" borderColor="#ff0080" borderStyle="solid" cornerRadius="0" barColor="#FFFFFF" borderThickness="10" dropShadowColor="#FFFFFF" dropShadowEnabled="false" footerColors="#FFFFFF" headerColors="#FFFFFF" highlightAlphas="0" shadowDirection="right" textAlign="left" textDecoration="none" borderAlpha="0" fontWeight="bold" id="pnlSnapshot" visible="false">
</mx:Panel>

We also place a button instance on the screen by writing following code:

<mx:Button x="288" y="389" label="Take Snapshot" borderColor="#FFFFFF" focusAlpha="1" color="#000000" textRollOverColor="#FFFFFF" textSelectedColor="#000000" themeColor="#ff0080" fillAlphas="[1.0, 1.0]" errorColor="#ff0080" fillColors="[#ff0080, #ff0080]" fontSize="14" fontFamily="Verdana" fontWeight="bold" cornerRadius="0" alpha="1.0" click="takeSnapshot()"/>

As you can see at then end of last code we call a function takeSnapshot() when a user click on the button. So next we have to do is writing that function that will do the snapshot job. We write this function in actionscript between tags. These tags are placed directly under your application tag. As mxml files are based on the XML standard we have to use a CDATA section wherein we write our actionscript code. So the start situation is like this :

<mx:Script >
   <![CDATA[   

//write code here    ]]>
</mx:Script>

Place following code between your CDATA section:

import mx.core.UIComponent;
import flash.display.BitmapData;	   

public function takeSnapshot():void{
        var snapshotHolder:UIComponent = new UIComponent();
	var snapshot:BitmapData = new BitmapData(320, 240, true);
	var snapshotbitmap:Bitmap = new Bitmap(snapshot);
	snapshotHolder.y =10;
	snapshotHolder.addChild(snapshotbitmap);
	pnlSnapshot.addChild(snapshotHolder);
	snapshot.draw(pnlWebcam.video);
	pnlSnapshot.visible = true;
}

As you can see in the function takeSnapshot we use the same technics as in the beginning of this article. We start by declaring a Bitmapdata object with width 320px and height 240 px. We put the bitmapdata in a real Bitmap object. Normally we should try now to add this Bitmap as a child to the Panel pnlSnapshot but also here it is not possible to add it directly because of type problems. So we use a snahshotHolder to store our bitmap. That snapshotHolder can easily be added to our pnlSnapshot as a child. After or before (you can choose) we did that we can call the draw() method of the BitmapData class to put the captured data in our bitmapData object (snapshot) and the job is done !

I hope you liked this tutorial and feel free to give some feedback

---

Possibly related posts: (automatically generated)

• Flex 3 is in beta