How do I capture an Image using Flex 4.5.1, in a mobile project?

Question

I am a newbie in Flex and ActionScript programming and learning it as fast as I can. I have tried few sample applications. Now I am trying to capture the image using ActionScript through the webcam attached with the PC.

I have written following code...

        protected var myCam:CameraUI;

        protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
        {
            if (CameraUI.isSupported){
                currentState = "normal";
                myCam = new CameraUI();
                myCam.addEventListener(MediaEvent.COMPLETE, onComplete);
            }
            else currentState = "unsupported";
        }

        protected function btnPic_clickHandler(event:MouseEvent):void
        {
            img.filters = [];
            myCam.launch(MediaType.IMAGE);
        }

        protected function onComplete(evt:MediaEvent):void
        {
            img.source = evt.data.file.url;
        }

        protected function applyFilter():void
        {
            if (img.filters.length==0)
            {
                var matrixArray:Array = [.33,.33,.33,0,0,
                    .33,.33,.33,0,0,
                    .33,.33,.33,0,0,
                    0,0,0,1,0];
                var blackWhiteFilter:ColorMatrixFilter = new ColorMatrixFilter(matrixArray);
                img.filters = [blackWhiteFilter];
                btnBW.label = "COLOR";
            }
            else 
            {
                img.filters = [];
                btnBW.label = "B/W FILTER";
            }
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal"/>
    <s:State name="unsupported"/>
</s:states>

<s:layout>
    <s:VerticalLayout paddingTop="20" paddingBottom="20" paddingLeft="10" paddingRight="20" gap="40" 
                      horizontalAlign="center" verticalAlign="middle"/>
</s:layout>

<s:Label text="This device does not support Camera." width="95%" includeIn="unsupported"/>
<s:HGroup includeIn="normal">
    <s:Button id="btnPic" click="btnPic_clickHandler(event)" label="TAKE A PICTURE"/>
    <s:Button id="btnBW" click="applyFilter()" label="B/W FILTER" />
</s:HGroup>

<s:Image id="img" height="649" y="124" width="460" x="10" includeIn="normal"/>    

But the camera is not getting detected.. currentsState is always unsupported... Is there anything wrong...

Any other way to capture image/video for mobile devices using FlexMobileProject..?

Any blog/tutorial related to Flex Mobile Development will be of gr8 help..Thanks...

Answer 1

From the docs: "Use the Camera class to capture video from the client system or device camera. Use the Video class to monitor the video locally."

The first thing you should read is about the Camera Class.

Then check out the Video Class.

Example from the docs:

    package {
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.events.*;
        import flash.media.Camera;
        import flash.media.Video;

public class CameraExample extends Sprite {
    private var video:Video;

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

        var camera:Camera = Camera.getCamera();

        if (camera != null) {
            camera.addEventListener(ActivityEvent.ACTIVITY, activityHandler);
            video = new Video(camera.width * 2, camera.height * 2);
            video.attachCamera(camera);
            addChild(video);
        } else {
            trace("You need a camera.");
        }
    }

    private function activityHandler(event:ActivityEvent):void {
        trace("activityHandler: " + event);
    }
}
}

See if you can get that bit working, and then ask another question about filtering the pic and saving it.