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.

 import mx.controls.Label; 

 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:

Also we will need another canvas to display this new snapshot:

    width="160" height="120"
    id="cnvSnapshot" visible="true" top="10" left="180">
  

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.