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:
You'll see two important functions in there:
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; } }
- 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.
- getSnapshot() - Returns a Bitmap rendered from the BitmapData (from getSnapshotBitmapData)
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:
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.
7:54 AM
|
Labels:
Flex with Video
|
This entry was posted on 7:54 AM
and is filed under
Flex with Video
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 comments:
Post a Comment