Question

I am working on a project, where I have to make an annotation video player!

Basically, I followed this tutorial[1] where the author presents how to draw(in this case just a rectangle) on the own web camera, using Flex.

Everything went great, but now I want to add a listener to get a snapshot of the image(what I draw + the web camera image) and then save it on my computer.

I have created the listener, but the problem is that this listener saves only the image from the web camera without my drawing(even though I added that draw to the camera).

private function save():void {

    var bitmapData:BitmapData = new BitmapData(videoDisplay.width,videoDisplay.height);
    bitmapData.draw(videoDisplay);

    var ba:ByteArray = (new PNGEncoder()).encode(bitmapData);
    (new FileReference()).save(ba, "doodle.png");       
}

I don’t have experience at all with Flex/Flash so maybe I did smth wrong.

Can you please help me?

[1]http://narinderkumar.wordpress.com/2012/02/16/drawing-on-live-video-in-flex/

Answer 1

this example works fine – i dont see the problem in that codesnippet of yours but maybe you are just drawing vis graphics on the video, in thatcase the graphics layer is behind the camera… hope hat helps 😉

package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.media.Camera;
    import flash.media.Video;

    public class cameratest extends Sprite
    {
        private var holder:Sprite;
        private var layover:Sprite;
        private var display:Sprite;

        public function cameratest()
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align     = StageAlign.TOP_LEFT;

            var cam:Camera = Camera.getCamera();
            var video:Video     =new Video(cam.width, cam.height);
            video.attachCamera(cam);

                    //holder hollds the video and on top the layover to draw on
            holder = new Sprite();
            stage.addChild(holder);
            holder.addChild(video);

            //layover to draw on                
            layover = new Sprite();
            holder.addChild(layover);

            //will show the snapshot
            display = new Sprite();
            display.x= 350;
            stage.addChild(display);

            //listener for onclick do snapshot
            stage.addEventListener(MouseEvent.CLICK, drawAndSave);
        }
        private function drawAndSave(E:Event=null):void{
            layover.graphics.beginFill(0xff0000,1);
            layover.graphics.drawCircle(10,10,10);

            var bmd:BitmapData=new BitmapData(holder.width,holder.height);
            bmd.draw(holder);

            var bmp:Bitmap = new Bitmap(bmd,'auto',true);
            display.addChild(bmp);
        }
    }
}