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

AIR Mobile – Prendre une photo (CameraUI ou CameraRoll) et garder les headers intacts

Avec Adobe AIR, vous avez la possibilité de récupérer les photos de l'utilisateur, soit en passant par la Galerie avec CameraRoll ou en passant par l'appareil photo "natif" avec CameraUI.

Vous pouvez ensuite récupérer une variable de type MediaPromise qui va vous permettre d'accéder au contenu de la photo. Les systèmes de stockages de chaque plate-forme étant différents, certaines techniques ne fonctionnent pas sur iOS (pas de vrai système de fichiers).

Heureusement, il y a une solution cross-platform qui fonctionne sous iOS, Android et même BlackBerry Tablet OS:

AIR pour Android – Prendre des photos / vidéos avec CameraUI

Jusque là, tout va bien mais essayez donc le code suivant, très simple, qui va prendre la photo et l'écrire sur le stockage du téléphone:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
  <fx:Script>
    <![CDATA[
      private var _cameraRoll:CameraRoll = null;
      private var _mediaPromise:MediaPromise = null;
      private var _cameraUILoader:Loader = null;
      private var _stream:FileStream = null;
      private var temp:File = null;
      private var dataSource:IDataInput;

      private var _uploadDir:String = "D:/GeoWeb/Multimedia/Equipement/888/";

      private function raiseGalleryCall():void {
        if (!_cameraRoll) {
          _cameraRoll = new CameraRoll;
          _cameraRoll.addEventListener(MediaEvent.SELECT, onCameraRollSelection);
        }
        // demande de récupération d'image au système Android
        _cameraRoll.browseForImage();
      }

      private function onCameraRollSelection(event:MediaEvent):void {
        loadImage(_mediaPromise);
      }

      private function onMediaLoaded(event:Event):void {
        readMediaData();
      }

      private function readMediaData():void {
        loadImageHandler(null);
      }

      public function loadImage(mediaPromise:MediaPromise):void {
        if (!_cameraUILoader) {
          //Loads the MediaPromise object
          _cameraUILoader = new Loader();
        }
        _cameraUILoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageHandler);
        _cameraUILoader.loadFilePromise(mediaPromise);
      }

      public function loadImageHandler(event:Event):void {
        var ba:ByteArray;
        _cameraUILoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadImageHandler);
        var li:LoaderInfo = LoaderInfo(event.currentTarget);
        ba = li.bytes;
        var now:Date = new Date();
        var filename:String = "IMG" + now.fullYear + now.month + now.day + now.hours + now.minutes +
          now.seconds + ".jpg";
        //temp = File.createTempDirectory().resolvePath(filename);
        temp = File.documentsDirectory.resolvePath(filename);
        if (!_stream) {
          _stream = new FileStream();
          //_stream.addEventListener(Event.COMPLETE, onTempFileStreamComplete);
          _stream.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorStream);
          _stream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onOutputProgress);
          _stream.addEventListener(ProgressEvent.PROGRESS, onProgress);
        }
        _stream.openAsync(temp, FileMode.WRITE);
        _stream.writeBytes(ba);
      }

      protected function onProgress(event:ProgressEvent):void {
        //trace(event);
      }

      protected function onOutputProgress(event:OutputProgressEvent):void {
        if (event.bytesPending == 0) {
          onTempFileStreamComplete(null);
        }
      }

      protected function onIOErrorStream(event:IOErrorEvent):void {
        trace("onIOErrorStream");
      }

      protected function onTempFileStreamComplete(event:Event):void {
        _stream.close();
      }

      private function onError(event:Event = null):void {
        trace("onError");
      }
    ]]>
  </fx:Script>
  <s:Button label="___________" click="raiseGalleryCall()" />
</s:View>

Ici, on a simplement un bouton qui va appeler la galerie sur le téléphone. On récupère la MediaPromise, que l'on passe dans un Loader puis une fois la MediaPromise chargée, on récupère les bytes et on les écrit dans un fichier sur la carte SD. En gros, on a fait une copie du fichier de la Galerie sur la carte SD.

Très bien, on récupérons ensuite l'image copiée sur la carte SD sur son PC. Windows n'arrive pas à générer d'aperçu et affiche ceci lorsque l'on veut l'ouvrir:

Windows n'arrive pas à lire le fichier qui semble corrompu, pourtant après vérification, on a bien écrit tous les bytes de l'image, celle-ci fait exactement le même poids. C'est en fait en comparant le fichier dans éditeur de texte (Notepad++) que l'on s'aperçoit d'une différence:

A gauche, on a l'image originale, à droite la copie. Les fichiers sont identiques mais les headers diffèrent légèrement. Si vous uploadez la photo directement sur votre serveur, vous aurez le même problème car les headers sont mauvais. Vous pourriez repasser les bytes dans un PNGEncoder (cela fonctionne) mais cela a un gros impact sur les performances en mobile.

La solution MediaPromise::open()

Après pas mal de recherches en vain, j'ai trouvé la solution qui est la manière par laquelle on charge la MediaPromise. Pour une raison que je ne connais pas, la méthode loadFilePromise(…) va vous pourrir vos header. Il faut en fait lire le flux d'une manière différente, en utilisant la méthode open sur MediaPromise.

Attention, la MediaPromise peut être synchrone ou asynchrone, pensez bien à prendre en compte les 2 cas.

Voici la partie du code à remplacer:

private function onCameraRollSelection(event:MediaEvent):void {
private var dataSource:IDataInput;
...
        dataSource = null;
        _mediaPromise = event.data as MediaPromise;
        dataSource = _mediaPromise.open();
        if (_mediaPromise.isAsync) {
          trace("Asynchronous media promise.");
          var eventSource:IEventDispatcher = dataSource as IEventDispatcher;
          eventSource.addEventListener(Event.COMPLETE, onMediaLoaded);
          //readMediaData();
        } else {
          trace("Synchronous media promise.");
          readMediaData();
        }
      }

      private function onMediaLoaded(event:Event):void {
        readMediaData();
      }

      private function readMediaData():void {
        loadImageHandler(null);
      }

      public function loadImage(mediaPromise:MediaPromise):void {
        if (!_cameraUILoader) {
          //Loads the MediaPromise object
          _cameraUILoader = new Loader();
        }
        _cameraUILoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageHandler);
        _cameraUILoader.loadFilePromise(mediaPromise);
      }

      public function loadImageHandler(event:Event):void {
        var ba:ByteArray;
        ba = new ByteArray();
        dataSource.readBytes(ba);
        var now:Date = new Date();
        var filename:String = "IMG" + now.fullYear + now.month + now.day + now.hours + now.minutes +
          now.seconds + ".jpg";
        //temp = File.createTempDirectory().resolvePath(filename);
        temp = File.documentsDirectory.resolvePath(filename);
        if (!_stream) {
          _stream = new FileStream();
          //_stream.addEventListener(Event.COMPLETE, onTempFileStreamComplete);
          _stream.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorStream);
          _stream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onOutputProgress);
          _stream.addEventListener(ProgressEvent.PROGRESS, onProgress);
        }
        _stream.openAsync(temp, FileMode.WRITE);
        _stream.writeBytes(ba);
      }

Et miracle, votre image va être strictement identique à l'originale, vous pourrez donc l'uploader tranquille sur votre serveur