Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

AIR pour Android : Utilisation de la caméra - Afficher l'image prise par la caméra

Compatible AIR 2. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Par joni (Joni), le 21 novembre 2010

Une des fonctionnalités d’AIR pour Android est l’accès à la caméra du téléphone.

L’avantage, c’est qu’Adobe a mis à notre disposition plusieurs solutions pour nous permettre de récupérer une vidéo sur nos téléphones Android:

  • La classe Camera (déjà existante dans Flash pour les webcam sur ordinateur)
  • La classe CameraRoll (qui sera traitée dans la deuxième partie de ce tutoriel)
  • La classe CameraUI (qui sera traitée dans la troisième partie de ce tutoriel)

Nous allons voir chaque classe, avec ses avantages et ses inconvénients.

Mais avant tout, vous devez bien avoir à l’esprit que de manière native, vous ne pourrez pas enregistrer de video en format FLV afin de la relire dans votre application AIR. Il faudra passer par certaines classes comme SimpleFLVwriter mais qui risquent de consommer beaucoup de ressources puisqu’elles nécessitent de capturer chaque image de la vidéo une par une afin de les injecter dans un fichier avec les bons headers.

Les principales utilités de la caméra depuis une application AIR sur Android sont donc les mêmes qu’avec une webcam sur ordinateur, à ceci près que vous êtes beaucoup plus mobiles. Mais il est tout à fait possible de créer de superbes applications en couplant la caméra avec le système de géolocalisation (qui fera l’objet d’un prochain tutoriel) par exemple.

Pour commencer, téléchargez ce fichier.

Il contient tous les éléments graphiques nécessaires à la réalisation de ce tutoriel. Ouvrez le dans Flash CS5.

La classe Camera

La premier avantage de la classe Camera est qu’elle est exactement la même que celle du Flash Player pour navigateur. Cela signifie donc que si vous réalisez une application qui sera destinée à la fois aux mobiles et aux ordinateurs, cette classe vous évitera d’avoir à écrire un code spécifique pour chaque version.

Le deuxième avantage est que cette classe permet également d’afficher l’image de la caméra dans l’application.

L’inconvénient majeure est que les performances (surtout la fluidité) ne sont pas des meilleures et que vous allez devoir sacrifier en qualité si vous voulez obtenir suffisamment de fluidité.

Voyons un petit exemple de l’utilisation de cette classe dans le cadre d’une application AIR.

Reprenez le fichier téléchargé au début du tutoriel.

Vous pouvez voir 6 calques.

  • Le premier est vide et servira à accueillir le code ActionScript de ce tutoriel.
  • Le deuxième contient deux boutons transparents (un sur le bouton OK de l’appareil photo nommé “shootBtn” et un sur le bouton ressemblant à un bouton play nommé “seeBtn”)
  • Le troisième contient l’image de l’appareil photo (il s’agit de mon Nikon D3000)
  • Le quatrième contient un MovieClip nommé “contImage” qui recevra la photo visualisé depuis le CameraRoll.
  • Le cinquième contient un clip nommé “clac” qui contient une petite animation permettant de savoir quand la photo est prise.
  • Le sixième contient l’objet vidéo nommé “video” qui recevra l’image de la caméra.

Pour commencer, nous allons ajouter l’objet camera et le lier à notre objet vidéo présent sur la scène.

Placez-vous sur l’image du calque vide et affichez le panneau Action (F9).

Il faut tout d’abord importer la classe Camera comme ceci :

import flash.media.Camera;

Ensuite, créons un objet camera comme ceci :

var cam:Camera = Camera.getCamera();

Précisons les paramètres de la caméra :

cam.setMode(video.width, video.height, 30);

Ici, nous demandons à Flash une résolution de la caméra la plus proche possible de la taille de notre objet video placé sur la scène à une cadence de 30 images par secondes.

Enfin, nous allons lier notre objet camera à notre objet video afin d’afficher l’image sur la scène :

video.attachCamera(cam);

Ce qui donne au final le code complet suivant :

import flash.media.Camera;
 
var cam:Camera = Camera.getCamera();
cam.setMode(video.width, video.height, 30);
video.attachCamera(cam);

Vous pouvez d’ores et déjà tester votre application. Vous pourrez voir l’image de votre caméra s’afficher dans la fenêtre de visualisation de l’appareil photo (si vous avez une webcam sur votre ordinateur, vous pouvez déjà la tester en faisant Ctrl+Entrée).

Conclusion

Vous remarquez donc que l'utilisation de base de la caméra est très simple à mettre en place. En fait, c'est exactement le même code que celui utilisé sur ordinateur. Ce qui présente l'avantage de pouvoir être utilisé dans une application qui sera compilée à la fois avec AIR pour Android et le Flash Player pour navigateur (et éventuellement avec AIR pour desktop et bientôt également sur Blackberry et d'autres OS mobiles).

Vous vous dîtes sûrement, pourquoi avoir fait un tutoriel avec si peu de code et tant de blabla ? Et bien en fait c'est surtout une introduction pour amener les vrais nouveautés que vous allez trouver dans la deuxième partie du tutoriel.

En savoir plus