Capturing Still Images From A Camera Stream in Flex 2 Beta 3

A project that I am working on now requires capturing still images from a camera video stream (from a flash.media.Camera object). Here's a prototype that I put together to demonstrate the concept (requires Flash 9). I started everything with the camera example in the Flex 2.0 API documentation.

I started with my CameraStream class (based off the example) that handles the connection with the camera. I've cut out some other functions for resizing and changing dimensions to keep this example simple. Here's my CameraStream class:

package {

import flash.media.Camera;
import flash.media.Video;
import flash.events.*;
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.display.Bitmap;
import flash.system.Security;
import flash.system.SecurityPanel;

public class CameraStream extends Sprite {

public static const DEFAULT_CAMERA_WIDTH : Number = 320;
public static const DEFAULT_CAMERA_HEIGHT : Number = 240;
public static const DEFAULT_CAMERA_FPS : Number = 30;

private var video:Video;
private var camera:Camera;

private var _cameraWidth : Number;
private var _cameraHeight : Number;

public function CameraStream() {

camera = Camera.getCamera();

_cameraWidth = DEFAULT_CAMERA_WIDTH;
_cameraHeight = DEFAULT_CAMERA_HEIGHT;

if(camera != null) {

camera.setMode(_cameraWidth, _cameraHeight, DEFAULT_CAMERA_FPS)
video = new Video(camera.width, camera.height);
video.attachCamera(camera);
addChild(video);

}
else {

Security.showSettings(SecurityPanel.CAMERA)
trace("Go get a camera.");

}

}

public function getSnapshotBitmapData():BitmapData {

var snapshot:BitmapData = new BitmapData(_cameraWidth, _cameraHeight);
snapshot.draw(video,new Matrix());

return snapshot;

}

public function getSnapshot():Bitmap {

var bitmap : Bitmap = new Bitmap(getSnapshotBitmapData());

return bitmap;

}

}

You'll see two important functions in there:

1. getSnapshotBitmapData() - Returns a BitmapData object from the camera stream. You'll see that it creates a new BitmapData object, and draws the current frame from the video stream into the new BitmapData.


2. getSnapshot() - Returns a Bitmap rendered from the BitmapData (from getSnapshotBitmapData)

In my MXML code, I have two panels: The first is called videoContainer, and it contains the video stream. In the creationComplete event of the videoContainer there is the following function:

private function attachCameraStream():void {

cameraStream = new CameraStream();
var ref : UIComponent = new UIComponent();
videoContainer.addChild( ref );
ref.addChild( cameraStream );

}

You can see that you need to create a new UIComponent, then attach the cameraStream (Sprite) to it. The second panel is not important... what is important is the Tile container inside of the panel, called "imagesTile". When the user clicks on the "Capture Image" button, the following function is executed:

private function captureSnapshot():void {

var uiComponent : UIComponent = new UIComponent();
uiComponent.width = cameraStream.cameraWidth;
uiComponent.height = cameraStream.cameraHeight;
uiComponent.addChild(cameraStream.getSnapshot());
imagesTile.addChild(uiComponent);

}

You can see that this creates a new UIComponent from the snapshot captured from the cameraStream instance. This UIComponent is then added as a child of the imagesTile object.

You can check out a working example here (requires Flash Player 9).