Tutorials, Videos

Android, AIR and the Camera

32 Comments 29 July 2010

Android, AIR and the Camera

The prerelease program “AIR for Android” is still open and very active. Click here if you want to sign-up to participate and test AIR applications on your mobile phone: http://www.adobe.com/go/airbetasignup The new APIs in the lastest build give you a direct access to the camera of your smartphone, which was one of the biggest requests of the community. There are now two ways to play with the camera: using the Camera UI of the phone (while letting the phone capture a picture or a video), or using the classic Flash Camera class. I’ve developed two basic samples that explain how to use these new APIs on Android. I apologize for the quality of this video, I’m using my webcam and it’s always a mess to deal with the automatic brightness feature of my OS.

Android, Adobe AIR and the camera from michael chaize on Vimeo.

The CameraUI

This feature allows you to access Android’s camera application thanks to the new class flash.media.CameraUI. Once you take a picture or a video, the media is automatically saved to camera roll and fires a MediaEvent to your AIR application. You must check that this class is supported on your device. To do so, you can check the CameraUI.isSupported boolean property. Then you just need to create a new CameraUI object, and use the CameraUI.launch method to display the Android interface, and take a picture. You also need to add an event listener on a MediaEvent.COMPLETE event, and get the media transmitted by Android. In this sample, I take a picture using the Android native UI, display the result in the AIR application, and apply a filter to get a black and white picture.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   creationComplete="windowedapplication1_creationCompleteHandler(event)"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="480" height="800">
 
	<fx:Script>
		<![CDATA[
 
			import flash.filters.ColorMatrixFilter;
			import mx.events.FlexEvent;
			private var myCam:CameraUI;
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				theImage.filters = [];
				if (CameraUI.isSupported){
					myCam.launch(MediaType.IMAGE);
				}
			}
 
			protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				if (CameraUI.isSupported){
					myCam = new CameraUI();
					myCam.addEventListener(MediaEvent.COMPLETE, onComplete);
				}
			}
 
			private function onComplete(evt:MediaEvent):void{
				theImage.source = evt.data.file.url;
			}
 
			private function transformImage():void
			{
				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);
 
				theImage.filters = [blackWhiteFilter];
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Button x="10" click="button1_clickHandler(event)" y="17" label="TAKE A PICTURE" width="220" height="93"/>
	<s:Button x="250" click="transformImage()" y="17" label="APPLY FILTER" width="220" height="93"/>
	<mx:Image id="theImage" height="649" y="124" width="460" x="10"/>
</s:Application>

The classic Camera class

It’s also possible to use the classic Camera class, the one we use in Flash to access the webcam of our desktop computers. This application displays the camera after a click on the START button. Nothing fancy…

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="800" height="480">
 
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			private var cam:Camera;
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				cam = Camera.getCamera();
				if(cam){
					cam.setMode(546,417,25);
					cam.setQuality(0,0);
					myLog.text = "ok";
					vd.attachCamera(cam);
				}else{
					myLog.text = "No camera here :(";
				}
 
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<mx:VideoDisplay id="vd" x="244" y="15" width="546" height="417" />
	<s:Button x="11" y="15" label="START" width="225" click="button1_clickHandler(event)" height="171" fontSize="20"/>
	<s:TextInput id="myLog" x="10" y="194" width="226" height="71" text="my log" fontSize="17"/>
</s:Application>

Be careful, by default, if you deploy this AIR application on your Android phone, it won’t work. You need to update the XML manifest that describes your application adding these tags:

– First, in the <initialWindow> tag, I specify that I want to launch my app using a landscape mode (by default, the camera will use this mode): <aspectRatio>landscape</aspectRatio>

– Then, I must use the new <android> tag to give specific rights to my application, and authorize the access to the camera. The Android security model requires that each app request permission in order to use features that have security or privacy implications. These permissions must be requested when the app is packaged, and cannot be changed at runtime. In this particular case, I need to add these lines:

<android>
        <manifestAdditions>
            <manifest>
                <data>
<![CDATA[
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.autofocus"/>
]]>
</data>
            </manifest>
        </manifestAdditions>
</android>
Links to the apk files
You must use the lastest build of AIR for Android (20th of July) before installing these apk files.

Post to Twitter

Your Comments

32 Comments so far

  1. Fab says:

    Ok, seems cool but… does it work on emulator? I tried to make your code run on my froyo emulator using AVD (Android 2.2 API level 8) and all I have is two buttons “TAKE PICTURE” and “APPLY FILTER” but no picture/video (the emualtor does not use my webcam…). Is it normal?

    Can you please test it and tell me if it is me who did things wrong or if it is the an emulator limitation?

  2. mourada says:

    thanks for your examples.
    what difference of quality between the 2 methods?
    I have not a device but i tested the Camera method in desktop and the quality is poor
    Is the Camera method use the resolution of the camera of the device?

  3. song_china says:

    how the mxml compile to apk? thank you

  4. admin says:

    To discover how it works, go to labs.adobe.com and sign-up for the “AIR for Android” beta program. Then you’ll get an access granted and you’ll be able to download and read the technical documentation.

  5. arun says:

    I am trying to browse the picture from gallery and upload the the selected the image from the gallery.

    The application reloads after selecting an image from the gallery.

    Any idea on how to fix this

  6. Sonic says:

    I have try ur APK “The classic Camera class”.
    But the camera being 90 degree anti-clockwise.
    Is it right?

  7. Johan says:

    AIR 2?5 for android is great but I have a question : will FP 10.1 for android will implements all this features (camera, micro, …) ?

  8. admin says:

    I think it’s due to current Android limitations and the browser sandbox. I hope it will evolve with future releases of Android.

  9. Fidel says:

    I tried making something similar to your cameraUI example. It wound up working very well. With one exception: Every photo taken is saved twice in the photo library of my htc desire. Any ideas what could be causing this?

  10. Rob says:

    @Fidel, To me it sounds like android is saving it, the Flex is.

  11. Santosh says:

    How can i stream with the CameraUI class?

  12. admin says:

    Impossible. Use the Camera class to stream content. CameraUI returns a file stored on your camera

  13. Saar says:

    @Fidel

    i get 2 copies also. any solution?

  14. Terry Collinson says:

    How do I set the size of the image to be captured?

  15. admin says:

    @Terry When you capture the image, it will launch the native UI where you can set the quality and size of your image (that’s the case on my android phone)

  16. I have tried “The classic Camera class” on the samsung galaxy s2 I9100. but the video quality is poor. video is showing the pupal color.

  17. ThaStyle says:

    same thing here can adjust it though, but the code from the flex game doesnt , i do however get this strange feeling that even after all the promisses, that native wins again, if you just buy a phone, i knoww what i am installing but they make it like ip upgrading, wish that one day it will become like the flash player now, well was, i ment the time internet explorer started after a clean install needing it, Another thing, just why is it that if my kids touch the pc, we always end up with a extra virusscanner ,
    Loved ur rotating tablet video on the tube and really inspired me, although i love air, the whole captiva complete thing whole package no install, is more then insane, and just feels not good.i tried and could embed the whols sysinternals suite,and yeah we asked for more xs. but this is even worse then the idea to mix silverlight web, with com xs , we wanted the same, and ended of with 2 much, sure its handy, and i know is either the one or the other, still withouth installing, no dll just be able to be registerd when not used by the app.
    Wonder can i just include office 2k3, since atfter 89mb or 499 we aint counting..
    :) just my 2 cents here, it like we asked for a weapon to defend, and got a machine gun with the bullets to go.

  18. Imran says:

    Using the method for AIR, i get a yellow tint on the images, any idea why is this happening?

  19. mario says:

    Hi

    I recognized some wired camera behavior (Nexus S with Android 4.1.2). The camera sets focus and exposure only once when AIR “connects” to the camera. If the phone lies on the table, for instance, and I pick it up after calling the camera in AIR, the exposure will be open the maximum and the camera is not able to focus anymore. Maybe a hardware issue?

    Now the important question:
    Is there a way to (kind of) poke the camera to initialize it again?

    And yes, I did set the autofocus feature.

    Thx!

  20. Jonathan says:

    CameraUI seems to not work with Android 4.1
    There is a solution ? Using a Native Extension for example ?

  21. sevendno says:

    I have tried “The classic Camera class” on the nexus 7. but the video quality is poor.and CameraUI is good.
    tell my why?

  22. admin says:

    The classic Camera class is for live view, for live video encoding for instance, broadcasting a webcam, etc… Quality shouldn’t be very good although you display it with a low resolution.
    The CameraUI class uses the native sensor of the device, and uses the native drivers of Android to produce/encode images and videos. Quality is better, high definition is possible, but you take the shot outside your app, using the native app of Android. Then the quality depends on your device.


Trackbacks/Pingbacks

  1. AIR for Android resource roundup | simon-townsend.com - July 30, 2010

    […] Access the Camera and Camera Roll […]

  2. PIA Blog / Productivity by Design » Notre revue de presse (05/08/2010) - August 5, 2010

    […] avec Air pour Android. Une vidéo de démonstration et des exemples de code sont disponibles. Consulter l’article  Coup de coeur : les expérimentations d’Hakim El HattabVoici une excellente collection […]

  3. Getting Started with AIR for Android - August 8, 2010

    […] Android, AIR and the Camera […]

  4. AIR, Android and the microphone | RIAgora - August 19, 2010

    […] having played with my phone’s camera in a previous post, I’d like to share with you a new experiment based on the microphone. My teammates already […]

  5. Android AIR and the Camera | Android Air Apps - October 3, 2010

    […] Read the full article here. […]

  6. AIR 2.5 is live | RIAgora - October 11, 2010

    […] Access to the camera from a AIR 2.5 application. I invite to discover my post on this topic: http://www.riagora.com/2010/07/android-air-and-the-camera/ […]

  7. AIR for Android and Flex Mobile Resources | Finding Out About - March 6, 2011

    […] Android, AIR and the Camera by Michaël Chaize – http://www.riagora.com/2010/07/android-air-and-the-camera/ […]

  8. LCCS showcase on your tablet | RIAgora - March 7, 2011

    […] When you download the LCCS SDK, it will install a lot of commented samples. One of them deals with the FileManager API. I used this sample to develop my application. First, you need to take a picture using the native UI of your tablet OS. To do so, use the CameraUI class available in AIR for Android. I already posted a sample on this topic here: http://www.riagora.com/2010/07/android-air-and-the-camera/ […]

  9. Beginning Mobile Development with Flash Builder 4.6 – Camera API Troubleshooting | joshknell.com - December 2, 2011

    […] Michael Chaize: Android, AIR, and the Camera Christian Cantrell: How to Use CameraUI in a Cross-platform Way Uploading images from CameraRoll and CameraUI […]

  10. Air 2.5 et stratégie multi-terminal | Blog MTI - June 17, 2012

    […] Android Camera […]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2017 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes