Recording video from camera, overlaying bitmaps, adding audio, saving to the device all in as3/AIR mobile

Question

I am tasked with recording a live video stream from the camera on a mobile device, then overlaying bitmaps that change over time, and adding an audio mp3 track to the video file, and then saving it to somewhere on the device like the Camera roll.

I saw a few posts that were helpful, mostly this one: AS3 Flash/AIR recording video with webcam and save it

But apparently, some have experienced app freezes on desktops. I can only imagine that on a mobile device it would be worse...

Also, how can I add the video info together with a separate audio mp3 into one file?

Has anyone accomplished something like this?

b-ryce b-ryce · Accepted Answer · 2011-08-18T15:48:59

Update, I got the video working. Kinda. I still get this error sometimes. Even with short videos.

Error #2030: End of file was encountered.

Sometimes it works fine. But at least I'm able to record FLVs from components. I haven't done the audio addition yet.

To run this code, you'll need the FLVRecorder found here: http://www.joristimmerman.be/wordpress/2008/12/18/flvrecorder-record-to-flv-using-air/

<?xml version="1.0" encoding="utf-8"?>

        import mx.core.UIComponent;
        import mx.events.FlexEvent;
        private var file:File;
        private var recorder:FLVRecorder=FLVRecorder.getInstance()
        private var fps:uint = 10;
        private var timer:Timer;
        protected function viewnavigator1_creationCompleteHandler(event:FlexEvent):void
        {

            //              2. Define the target FLV-file’s properties, the file instance to your flv-file, width & height, framerate and the systemManager instance, that’s a Flash internal declared variable and the optional duration in seconds:
            file=File.desktopDirectory.resolvePath("recording.flv");
            recorder.setTarget(file,320,320,fps,systemManager)

            var camera : Camera = Camera.getCamera();

            if (camera)
            {
                var ui      : UIComponent   = new UIComponent();
                var video   : Video     = new Video(320, 320);

                camera.setMode(320, 320, 24.);

                video.attachCamera(camera);
                ui.addChild(video);
                cameraGroup.addElement(ui);
            }

            timer = new Timer(1000/fps);
            timer.addEventListener(TimerEvent.TIMER, captureScreen);
            timer.addEventListener(TimerEvent.TIMER_COMPLETE, stopRecording);


        }

        protected function stopRecording(event:Event):void
        {
            timer.stop();
            //when saving is done
            recorder.addEventListener(FLVRecorderEvent.FLV_CREATED, fileMade)
            //when saving starts
            recorder.addEventListener(FLVRecorderEvent.FLV_START_CREATION, startCreatingFLV)

            // TODO Auto-generated method stub
            recorder.stopRecording()

        }

        private function startCreatingFLV(e:FLVRecorderEvent):void{
            recorder.addEventListener(FLVRecorderEvent.PROGRESS,onFLVCreationProgress)
        }

        private function onFLVCreationProgress(e:FLVRecorderEvent):void{
            //e.progress: percent complete (0 to 1)
            //pbSaving: ProgressBar component in Flex
            trace("saving progress ", e.progress,1);
        }

        protected function captureScreen(event:TimerEvent):void
        {
            trace("captured screen");
            recorder.captureComponent(movieGroup)     //DisplayObject, takes a screenshot from that component

        }

        protected function startRecording(event:MouseEvent):void
        {
            // TODO Auto-generated method stub
            timer.start();
        }

        protected function fileMade(event:Event):void
        {
            trace("file made");
        }

    ]]>
</fx:Script>
<s:VGroup>
    <s:HGroup>
        <s:Button label="start" click="startRecording(event)"/>
        <s:Button label="stop" click="stopRecording(event)"/>
        <s:Label id="progress" text="waiting..."/>
    </s:HGroup>
    <s:Group id="movieGroup" width="50%" height="50%">
        <s:Group id="cameraGroup" width="100%" height="100%"/>
        <s:Image source="image.png" width="25%" height="25%"/>
    </s:Group>
</s:VGroup>

Recording video from camera, overlaying bitmaps, adding audio, saving to the device all in as3/AIR mobile

1 Answers