Record and play back video with AIR for iOS on iPad

6 years ago

Recently I needed to figure out how to create an iPad app when you can record and play back video from the iPad’s camera, and then upload to it to a server using AIR for iOS. I wasn’t able to find a whole lot of info on it and so I eventually pieced it together from various places. I decided to share the first part of the process here, and I might share the second part in another post later.

I will assume you have a button on the Flash stage called ‘recordbtn’ which the code below will use to fire up the device’s camera.

First we have to set up some variables and check for StageVideo availability:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// use stage video to playback recording
var stageVid:StageVideo;

// variables for displaying the video
var videoFile:File;
var ns:NetStream;
var nc:NetConnection;

// create instance of CameraUI for showing native camera app
var deviceCameraApp = new CameraUI();

// we'll use StageVideo to display the recorded video, first we have to listen for availability
stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onStageVideoAvailability);


function onStageVideoAvailability(e:StageVideoAvailabilityEvent):void
{
    // if StageVideo available
    if (e.availability == StageVideoAvailability.AVAILABLE)
    {
        // get stage video instance
        stageVid = stage.stageVideos[0];

        // create a net connection for playing back the video
        nc = new NetConnection();
        nc.connect(null);
       
        // create a netstream for the net connection       
        ns = new NetStream(nc);
        ns.client = this;
       
        // add click event to record button
        recordbtn.addEventListener(MouseEvent.CLICK, onRecord);
       
        // add event for stage video render state
        stageVid.addEventListener(StageVideoEvent.RENDER_STATE, onRender);
    }
   
}

function onRender(e:StageVideoEvent):void
{
    // when the video is ready to play set the viewport size so we can see the video
    stageVid.viewPort = new Rectangle( 247 , 43 , 529 , 397 ) ;
}

READ MORE