Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR pour Android – Récupérer une image issue de la galerie Caméra avec CameraRoll (browseForImage)

La classe CameraRoll, diffusée avec Air 2.5 vous permet d'aller récupérer une photo depuis la galerie native de votre téléphone Android. Les photos que vous prenez avec la caméra ou que vous recevez (par mail par exemple) sont toutes enregistrées dans cette galerie. Sur votre portable, vous pouvez y accéder par l'intermédiaire de l'application "Gallery".

Grâce à l'objet CameraRoll, et notamment à la méthode browseForImage(), votre application Air peut demander au système Android le choix d'une image. C'est alors l'application native Gallery qui prend la main.

Dès que l'utilisateur choisit une image, un évènement de type MediaEvent sera dispatché. S'il a choisit une image, un évènement de type MediaEvent.SELECT sera renvoyé. S'il choisit de ne pas choisir d'image, un évènement de type Event.CANCEL sera propagé.

A partir de cet objet MediaEvent, vous pouvez récupérer un objet de type MediaPromise depuis la propriété "data". Celui-ci n'est pas directement une référence vers un fichier (objet de type File) mais un objet intermédiaire vous permettant de récupérer le fichier par la suite. Une référence vers le fichier est contenu dans la propriété "file".

Une fois que vous avez cette référence vers un objet de type File, vous pouvez récupérer le chemin natif de cette image grâce à la propriété "nativePath". Sur Android, pour une photo issue de l'appareil photo, le chemin est de type "/mnt/sdcard/DCIM/100MEDIA/IMAGxxxx.jpg".

Une fois que vous avez ce chemin, vous pouvez utiliser un Loader pour charger l'objet MediaPromise pour récupérer le résutlat et le mettre dans un objet de type mx:Image par exemple ou le dessiner sur un BitmapData.

Démonstration vidéo !

Roulement de tambour, grande première sur flex-tutorial.fr, une démonstration vidéo ^^! Ce n'est pas encore super au point comme celles de evangelist Adobe qui ont du matos (et des gens pour filmer). J'ai essayé avec mon appareil photo, le résultat est pas vraiment top, sûrement parce qu'il fait rarement jour quand j'écris mes tutos. J'utilise donc un utilitaire pour faire un screencast du rendu de mon téléphone qui me sort un fichier .mov. Ce n'est pas extra-ordinaire mais pour l'instant, cela vous permet de voir ce qui se passe !

Application Exemple

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      /**
       * Access the native image gallery
       */
      private var _cameraRoll:CameraRoll = null;
      /**
       * Intermediate object that contain the file
       * selected by the user
       */
      private var _mediaPromise:MediaPromise = null;
      /**
       * Loads the nativePath to show it in an image
       */
      private var _mediaPromiseLoader:Loader = null;

      private function onGetImage():void {
        if (!_cameraRoll) {
          if (CameraRoll.supportsBrowseForImage) {
            _cameraRoll = new CameraRoll;
          } else {
            showInfo("Fonctionnalité browseForImage non supportée...");
            return;
          }
          _cameraRoll.addEventListener(MediaEvent.SELECT, onSelection);
          _cameraRoll.addEventListener(Event.CANCEL, onCancel);
          _cameraRoll.addEventListener(ErrorEvent.ERROR, onErrorEvent);
        }
        // demande de récupération d'image au système Android
        _cameraRoll.browseForImage();
      }

      private function onErrorEvent(event:ErrorEvent):void {
        showInfo("Erreur lors de la sélection");
      }

      private function onCancel(event:Event):void {
        showInfo("L'utilisateur a annulé la sélection...");
      }

      private function onIOError(event:IOErrorEvent):void {
        showInfo("Erreur lors de la récupération de la sélection...");
      }

      private function showInfo(text:String):void {
        log.text = text;
      }

      private function onSelection(event:MediaEvent):void {
        _mediaPromise = event.data as MediaPromise;
        var nativePath:String = _mediaPromise.file.nativePath;
        showInfo("Sélection: " + nativePath);
        //Loads the MediaPromise object
        _mediaPromiseLoader = new Loader()
        _mediaPromiseLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        _mediaPromiseLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
        _mediaPromiseLoader.loadFilePromise(_mediaPromise);
      }

      private function completeHandler(event:Event):void {
        var content:Bitmap = event.currentTarget.content as Bitmap;
        if (!content) {
          showInfo("Impossible de récupérer le Bitmap associé");
          return;
        }
        mainImage.source = content;

      }
    ]]>
  </mx:Script>
  <mx:Style>
    global {
      font-size: 24;
    }
  </mx:Style>
  <mx:ApplicationControlBar left="0" right="0" bottom="0" height="80" paddingTop="8" paddingLeft="8"
                            paddingBottom="8" paddingRight="8" horizontalGap="8" verticalGap="8"
                            dock="true">
    <mx:Box width="100%">
      <mx:Button label="Get Image" click="onGetImage();" height="100%" width="100%" />
      <mx:Label id="log" fontSize="18" />
    </mx:Box>
  </mx:ApplicationControlBar>
  <mx:Image id="mainImage" width="100%" height="100%" />
</mx:Application>