Recording Video with Adobe AIR 2.5 on an Android device

In this example we will develop a simple mobile AIR application that let the user capture some video with the built in Camera application, and bring the video back into the AIR application. Accessing one camera is a cool new feature in Adobe AIR 2.5.

Setting up your working environment

What I really like about Adobe AIR 2.5 mobile development is that the tools (Adobe Flash CS5 or Flash Builder Burrito) give you the possibility to immediately test on a real USB connected device. At adobe MAX 2010 a few weeks ago we all got a brand new Motorola Droid 2 device so that will be my testing device. When I first played with the telephone I had some problems in running the pre- installed AIR applications. It seemed that in some way the Adobe AIR plugin was not correctly installed. But no problem, I went to the Android market, downloaded and installed Adobe AIR again. Then I was able to run the installed AIR applications (Gravity Lander, GridShock,…) which is cool.

So first step is to make sure your mobile device runs Adobe AIR 2.5. You can install AIR 2.5 on Android devices running Android 2.2 (Froyo).

Next step is to make sure that your device is connected to your computer. For more information on connecting your Android devices to your computer look into this guide:   Connect your Android device to your computer

You also have to make sure that your mobile device is configured well. You have to set USB-debugging on, turn off mass storage mode and enable charge mode. For more information also go to the above URL.

Next step is to check that  your mobile device is on the same wireless network so it is able to connect to the debugger. If you are on Windows (7, Vista, XP) make sure to disable your firewall because port 7935 must be open to make a connection between your device and your computer. Also install the necessary USB driver for your mobile device. There are some USB device drivers preinstalled when you install Flash Builder Burrito (Google Nexus One, Motorolla Droid, HTC Incredible,…)

Checking if CameraUI is supported

Let’s go ahead by setting up a new ActionScript Mobile Project in Flash Builder Burrito and in the document class we have to  check if our device actually supports the Camera. It is a best practice that when  you use specific features of a mobile device you always do a check first to see if that feature is supported.

You can check the property isSupported of the CameraUI class to see if you your device has a Camera and a user interface to take video or take pictures/capture videos.

if(CameraUI.isSupported){
     //your code here
}

But what does  the CameraUI class actually do? The CameraUI class allows you to capture a still image or video using the default camera application on a device. Make sure that your phone has an external storage card available because on Android the default camera application does not open when a card is not available.

Ok, now we actually want to launch the default camera application.

Using the default Android device camera application

There is want very important thing to know. For several features of your mobile phone you need to ask permission to use it. This is kind of a security thing. You can ask for permission by settings manifestAdditions in the app-xml file of your AIR application. If you want to use the device camera you must explicitly set android.permission.CAMERA inside an uses-permission node of your app-xml file.

     <!--[CDATA[

               uses-permission android:name="android.permission.CAMERA"/>
           </manifest>
      ]]>
     </manifestAdditions>
</android>

For more information about the app-xml Android specific permissions go to following URL:    Android specific permissions

One other thing we want to set is the autoOrients and aspectRatio node of the app-xml file. You add this tags inside the initialWindow node.

<autoOrients>false</autoOrients>
<aspectRatio>landscape</aspectRatio>

So we want to start our application in the landscape format (height less than width) and we want our application NOT to change orientation as the user rotates the device or performs another orientation-related gesture such as opening or closing a sliding keyboard.

Ones we haved edited our app-xml file, we can go to the next step.

Recording video

We first instantiate our CameraUI object and then we call the launch() method of the CameraUI class. When you call this method you have to pass in the media type that you want to capture. The different mediatypes are available as static String constants in the MediaType class. You can capture MediaType.IMAGE or MediaType.VIDEO. In our case we are interested to capture a video, so we set the requestedMediaType parameter to MediaType.VIDEO.

if(CameraUI.isSupported){
     ui = new CameraUI();
     ui.launch(MediaType.VIDEO);
}

If we executes this code, we will see that our AIR application loses focus and the default Camera application opens above it, the user can start taking a video. But when the user is done taking a video, we are interested to know that in our application.

Showing the recorded video in Adobe AIR 2.5

To know when the user stops capturing video we will have to listen for a specific event that tells us that the user completed the task of captureing a video (when user pressed the “done” button in the default camera application). This is where the MediaEvent class comes in. We can listen for a MediaEvent.COMPLETE event :

if(CameraUI.isSupported){
     i = new CameraUI();
     ui.addEventListener(MediaEvent.COMPLETE,UICompleteHandler);
     ui.launch(MediaType.VIDEO);
}

We call the UICompleteHandler function when the media capture is completed.

Inside the returned mediaEvent we can access the data property which is a MediaPromise instance.  The MediaPromise instance gives our AIR application access to the promised media object. For example we can access the mediaType, relativePath and  file property  (to access the File instance representing the media object).

private function uiCompleteHandler(event:MediaEvent):void{
     var media:MediaPromise = event.data;
     trace(media.file.url  + “ - ” + media.relativePath + “ - ” +media.mediaType);
}

output :

file:///mnt/sdcard/dcim/Camera/2010-11-07_20-45-04_201.3gp
 - 2010-11-07_20-45-04_201.3gp - video

If you look to the output of the trace statement you can clearly see that you cannot use the relativePath property value to address your recorded video because it only contains the file name of the media object. If you want to load the recorded video stream, you will need to use File.url property for the path name which follows URI scheme file://host/path where host is the fully qualified domain name of the system on which the path is accessible, and path is a hierarchical directory path of the form directory/directory/…/name.

So now that we know the location of the recorded video, we can simply load the video into our AIR application by using techniques we know from desktop Flash Platform development.

First we set up a new Video object, initialize it and add to the displaylist, next we attach a NetStream object to it and play the stream that is accessible through the media.file.url property.

So the final UICompleteHandler method looks like this :

private function UICompleteHandler(event:MediaEvent):void{
     var media:MediaPromise = event.data;
     trace(media.file.url  + " - " + media.relativePath + " - " +media.mediaType);
     //instantiate the video object and add to displaylist
     video = new Video();
     addChild(video);
     var conn:NetConnection = new NetConnection();
     conn.connect(null);
     //attach a stream  to the video-object
     var stream:NetStream = new NetStream(conn);
     video.attachNetStream(stream);
     stream.client = new MobileClient();
     //play the stream
     stream.play(media.file.url);
}

When you run the application you will be able to shoot a video using your device camera and play it inside your AIR application !  Nice 🙂  !

Sources

You can download the AIR 2.5 application sources here [ZIP ARCHIVE]

You can download the APK install file here

If you LIKE this post, do not hesitate to share  it on Facebook, Twitter,… Sharing makes me happy 🙂

Happy coding ,

Koen

Advertisements

27 responses to “Recording Video with Adobe AIR 2.5 on an Android device

  1. Brett Widmann 7 November , 2010 at 11:28 pm

    This is awesome! I’ve been looking for a good approach to using the video features using Flash for Android.

    Any word on how and when this can be done for iPhone and iPod Touch devices? I’d really like to find a way to access the microphone for recording, even though the native Microphone class doesn’t support iPhone (based on what I read).

  2. Koen 7 November , 2010 at 11:38 pm

    hey Brett, i think this must work for IPad and IPhone devices also but me not sure because me cannot test it 🙂

  3. Mr. Angelo Fallein 7 November , 2010 at 11:45 pm

    Time for a new book my friend.
    Love this post!

  4. Scott Janousek 8 November , 2010 at 6:18 am

    Nice to see some Android gurus getting involved with the next generation of Flash on Devices. 🙂

  5. Pingback: Weekly Shared Items – 8. November, 2010 | TOXIN LABS - weblog of a german design student from wuerzburg

  6. Arend 13 November , 2010 at 8:32 am

    Nice article Koen,

    I wonder though, did you manage to play back audio too ? I don’t seem to get that going, the recorded audio is in AMR Narrow Band (SAMR) and this is something the Flash player cannot handle.
    Maybe your Droid records audio in AAC / mp3 format and my HTC Desire does not?

    Keep it up!

    • Koen 13 November , 2010 at 9:18 am

      @Arend, it also plays the audio on my Droid 2 device but indeed it all depends on the codecs your phone is using. That is the same for the video formats.

  7. Pingback: Scott Janousek » Blog Archive » Recording Video with Adobe AIR 2.5 on Android devices

  8. Dusty 21 November , 2010 at 6:12 am

    What phone did you use? I’m not able to load the 3gp video into a netstream… says “NetStream.Play.NoSupportedTrackFound” on my Nexus One.

  9. Arend 21 November , 2010 at 9:36 am

    This is the problem according to the docs: “Since the default camera application can save the image or video in a variety of formats, there is no guarantee that returned media object can be loaded and displayed by the AIR runtime. ” Many phones will use the AMR codec for the audio part which the AIR runtime can’t decode/play. There is also no way to set a default profile (h.264/h.263/etc) or discover available profiles. Still a big step forward, but not there yet for my use case.

    Btw, I believe Koen uses the Droid 2 (as mentioned in a previous reply)

  10. Thuyen 8 January , 2011 at 9:38 am

    I tested out the Android version of my video conference app (using AIR 2.5) between a friend’s Droid 2 and my netbook (WinXP). While the video and audio streams are received on both devices, it was practically unusable. Video frame rate on the Droid 2 was very slow, and audio was extremely choppy. The audio from the Droid 2 improved a little bit, but still not very usable, when its video stream is paused. I wonder if the problem was inefficient code in AIR 2.5, or is it the Droid 2 hardware not fast enough? Or is there some special codecs and settings that are unique to the device?

  11. Protocall 24 February , 2011 at 10:55 am

    Great article. I have a Galaxy Tab, it records video in mp4 which uses 3gp6. I can’t get it to play in netstream. Netstream can play flv and others encodeded in H264 formats. Now Android don’t even support openWithDefaultApplication(), what can we do after recorded the video, Android AIR just can’t show the result. Hope Adobe can get openWithDefaultApplication working.

  12. Arend 24 February , 2011 at 11:20 am

    To be honest, I think AIR for Android is not the right tool for video related apps. I was expecting better performance and integration in the hope to keep a single AS3 based development environment for cross platform game development. But it is not going to happen any time soon.

  13. Pierre 5 May , 2011 at 3:07 pm

    Guys,

    I have installed it but the first screen of the application is a full screen filled with green color only. If I touch the screen then it loads the native camera application. I can use this, but when I press “Done” to save the video, I go back to the green screen again…anybody else having the same problem?

  14. Julius 28 May , 2011 at 4:10 pm

    @Pierre
    I have the same problem…

  15. Julius 28 May , 2011 at 4:21 pm

    I think this is the problem:

    “A file found in a source-path can not have more than one externally visible definition. Main;MobileClient”

  16. Marylou 19 July , 2014 at 2:25 am

    Galveston has been a home to Carnival cruises since
    the year 2000. Nowhere TV combines many channels from Roku’s channel store
    and some that are not, into one interface. Subconsciously, the baby is a representation of her.

  17. 非常にadidas アディダス アディダスウェアサイト ユニフォーム海外サッカーチー 22 July , 2014 at 4:48 am

    What’s up, I log on to your new stuff on a regular basis.
    Your writing style is awesome, keep up the good work!

  18. Jennie 4 September , 2014 at 9:52 am

    Nice post. I used to be checking constantly this blog and I am inspired!

    Very helpful info particularly the closihg phase 🙂 I handle such information a lot.
    I was looking for this certain info for a long time. Thank you and bewst of luck.

  19. US UK Canada business database email lists 21 September , 2014 at 1:41 am

    Ӏ haave learn ɑ few just right stuff herе. Certainly ѵalue bookmarking fοr revisiting.
    ӏ surprise ɦow so much attempt ƴou set to makе sucɦ a excellent informative site.

  20. Lucienne 26 September , 2014 at 5:35 am

    Hi! I know this is somewhat off topic but I was wondering if
    you knew where I could find a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble
    finding one? Thanks a lot!

  21. Download The Amazing Spider Man 2 2014 Full HD 30 September , 2014 at 10:59 am

    Howdy I am so happy I found your blog page, I really found you by mistake, while I was looking on Askjeeve for
    something else, Nonetheless I am here now and would just like to say thanks
    a lot for a remarkable post and a all round entertaining
    blog (I also love the theme/design), I don’t have time
    to read through it all at the moment but I have book-marked
    it and also added your RSS feeds, so when I have time I will
    be back to read much more, Please do keep up the excellent b.

  22. Reggie 11 October , 2014 at 3:33 am

    I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to design my own blog and
    wluld like to find out where u got this from. thank you

  23. gamestua 27 November , 2014 at 5:02 pm

    Great beat ! I wish to apprentice at the same time as you amend
    your site, how could i subscribe for a blog site?

    The account aided me a acceptable deal. I have been tiny bit acquainted of this your broadcast
    provided brilliant clear idea

  24. Darkness Reborn Hack 7 January , 2015 at 6:16 pm

    Thanks for your marvelous posting! I quite enjoyed reading it, you’re a great author.I
    will be sure to bookmark your blog and will often come back
    at some point. I want to encourage you continue your great job,
    have a nice evening!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s