|
Righto… in the first episode we built a canvas object which displayed (hopefully) a stream from your webcam.
To follow on from that we are going to extend the application slightly to add a button which, when clicked, will take a ’screenshot’ from your webcam and display it on the application.
First off though we will quickly add some error catching to the initCamera() function just to stop those ugly pop-ups from … popping up when the is a camera error. This is quite simple… where all the other imports are we need to add one more:
import mx.controls.Label;
and we just replace the initCamera function with the one below… it puts a try-catch statement around the bits that can cause errors and displays an error message if there is an issue.
public function initCamera():void {
var lblError:Label = new Label();
try {
videoHolder = new UIComponent();
cam = Camera.getCamera();
video = new Video(160,120);
video.attachCamera(cam);
videoHolder.addChild(video);
cnvWebcam.addChild(videoHolder);
}
catch (err:TypeError){
lblError.text = “Webcam error”;
cnvWebcam.addChild(lblError);
}
}
Ok so now thats taken care of lets add the button. In the source, Underneath where the canvas is add the code below. This adds the button and gives it a function to call ,which we will write shortly, to create the snapshot:
<mx:Button label="Take snapshot" bottom="10" left="10" click="takeSnapshot()" />
Also we will need another canvas to display this new snapshot: <mx:Canvas top="10"
width="160" height="120"
id="cnvSnapshot" visible="true" top="10" left="180">
</mx:Canvas> So now all thats left to do is add the snapshot function:/p>
public function takeSnapshot():void{
var snapshotHolder:UIComponent = new UIComponent();
var snapshot:BitmapData = new BitmapData(160,120, true);
var snapshotbitmap:Bitmap = new Bitmap(snapshot);
snapshotHolder.addChild(snapshotbitmap);
cnvSnapshot.addChild(snapshotHolder);
snapshot.draw(video);
}
Here is a link to the complete code. |
