Appareil photo

Appareil photo

L'objet camera donne accès à l'application de caméra par défaut de l'appareil.

Remarque importante sur la vie privée : La collecte et l'utilisation des images de la caméra d'un appareil de mesure soulève des questions importantes concernant la vie privée. La politique de confidentialité de votre application doit examiner comment l'application utilise l'appareil photo et si les images enregistrées sont partagées avec d'autres parties. En outre, si l'utilisation de l'application de la caméra n'est pas apparente dans l'interface utilisateur, vous devez fournir un avis juste-à-temps avant que votre application n'accède à la caméra (si le système d'exploitation de périphérique ne le fait pas déjà). Cet avis doit fournir les mêmes renseignements mentionnés précédemment, ainsi que d'obtenir l'autorisation de l'utilisateur (par exemple, en présentant des choix OK et Non merci). Pour plus d'informations, consultez le Guide de la vie privée.

Méthodes

Accéder à la fonctionnalité

Depuis la version 3.0, Cordova implémente des APIs au niveau du périphérique en tant que plugins. Utilisez le plugin de l'interface en ligne de commande, décrite dans l'Interface de ligne de commande, pour ajouter ou supprimer cette fonction pour un projet :

    $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
    $ cordova plugin rm org.apache.cordova.core.camera

Ces commandes s'appliquent à toutes les plates-formes ciblées, mais modifient les paramètres de configuration spécifiques à la plateforme décrites ci-dessous :

Certaines plates-formes peuvent prendre en charge cette fonctionnalité sans nécessiter aucune configuration spéciale. Voir plate-forme prise en charge pour une vue d'ensemble.

camera.getPicture

Prend une photo à l'aide de la caméra, ou récupère une photo de la Galerie d'images de l'appareil. L'image est passée au callback "succès" comme une String encodée en base64 ou l'URI du fichier de l'image. La méthode elle-même renvoie un objet CameraPopoverHandle qui permet de repositionner la boite de dialogue de selection d'image.

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

Description

La fonction camera.getPicture ouvre l'application par défaut de l'appareil qui permet aux utilisateurs de prendre des photos. Ce comportement se produit par défaut, lorsque Camera.sourceType est égal à Camera.PictureSourceType.CAMERA. Une fois que l'utilisateur a pris la photo, l'application "camera" se ferme et l'application est restaurée.

Si Camera.sourceType est Camera.PictureSourceType.PHOTOLIBRARY ou Camera.PictureSourceType.SAVEDPHOTOALBUM, alors une boîte de dialogue s'affiche pour permettre aux utilisateurs de sélectionner une image existante. La fonction camera.getPicture retourne un objet CameraPopoverHandle qui permet de repositionner le dialogue de sélection d'image, par exemple, lorsque l'orientation de l'appareil change.

La valeur de retour est envoyée à la fonction callback cameraSuccess, dans l'un des formats suivants, selon spécifié par cameraOptions :

Vous pouvez faire ce que vous voulez avec l'image encodée ou l'URI, par exemple :

REMARQUE :La résolution des photos sur les nouveaux appareils est assez bonne. Les photos sélectionnées de la Galerie de l'appareil ne sont pas réduites avec une baisse de la qualité, même si un paramètre de qualité est spécifié. Pour éviter les problèmes de mémoire, définissez Camera.destinationType à FILE_URI plutôt que DATA_URL.

Plates-formes prises en charge

Bizarreries Android

Android utilise des objets de type Intends pour lancer l'activité de l'appareil photo sur le périphérique pour capturer des images. Sur les téléphones avec peu de mémoire, l'activité de Cordova peut être tuée. Dans ce scénario, l'image peut ne pas apparaître lorsque l'activité de cordova est restaurée.

Bizarreries iOS

L'inclusion d'un alert() JavaScript dans une des fonctions callback peut causer des problèmes. Encapsuler l'alerte dans un setTimeout() pour permettre au sélecteur d'images iOS de se fermer entièrement avant que l'alerte s'affiche :

setTimeout(function() {/ / votre code ici!}, 0) ;

Bizarreries Windows Phone 7

L'invocation de l'application native "caméra" alors que votre appareil est connecté via Zune ne fonctionne pas et déclenche une erreur.

Bizarreries de Tizen

Tizen prend uniquement en charge un destinationType de Camera.DestinationType.FILE_URI et un sourceType de Camera.PictureSourceType.PHOTOLIBRARY.

Petit exemple

Prendre une photo, puis l'extraire comme une image codée en base64 :

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Prendre une photo et récupérer l'emplacement du fichier de l'image :

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Exemple complet

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

cameraSuccess

Fonction de callback onSuccess qui fournit les données de l'image.

function(imageData) {
    // Do something with the image
}

Paramètres

Exemple

// Show image
//
function cameraCallback(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

cameraError

Fonction callback onError qui fournit un message d'erreur.

function(message) {
    // Show a helpful message
}

Paramètres

cameraOptions

Paramètres optionnels de personnalisation des réglages de l'appareil photo.

{ quality : 75,
  destinationType : Camera.DestinationType.DATA_URL,
  sourceType : Camera.PictureSourceType.CAMERA,
  allowEdit : true,
  encodingType: Camera.EncodingType.JPEG,
  targetWidth: 100,
  targetHeight: 100,
  popoverOptions: CameraPopoverOptions,
  saveToPhotoAlbum: false };

Options

Spécificités Android

Spécificités de BlackBerry

Spécificités OS

Bizarreries de paciarelli

Windows Phone 7 et 8 Quirks

CameraPopoverOptions

Paramètres, uniquement supportés par iOS, spécifiant l'emplacement d'accroche et la direction de la flèche de la boite de dialogue liée à la sélection d'images dans la bibliothèque et les albums sur iPad.

{ x : 0, y :  32, width : 320, height : 480, arrowDir : Camera.PopoverArrowDirection.ARROW_ANY };

CameraPopoverOptions

Notez que la taille de la boite de dialogue peut varier afin de permettre l'ajustement de la direction de la flèche et de l'orientation de l'écran. Assurez-vous de tenir compte des changements d'orientation lors de la spécification de l'emplacement d'élément d'accroche.

Exemple court

 var popover = new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
 var options = {
     quality         : 50,
     destinationType : Camera.DestinationType.DATA_URL,
     sourceType      : Camera.PictureSource.SAVEDPHOTOALBUM,
     popoverOptions  : popover
 };

 navigator.camera.getPicture(onSuccess, onFail, options);

 function onSuccess(imageData) {
     var image = document.getElementById('myImage');
     image.src = "data:image/jpeg;base64," + imageData;
 }

 function onFail(message) {
     alert('Failed because: ' + message);
 }

CameraPopoverHandle

Agit sur la boîte de dialogue créée par camera.getPicture.

Méthodes

Plates-formes suportées

setPosition

Définit la position de la boite de dialogue.

Paramètres :

Exemple court

 var cameraPopoverOptions = new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
 cameraPopoverHandle.setPosition(cameraPopoverOptions);

Exemple complet

 function onSuccess(imageData) {
      // Do stuff with the image!
 }

 function onFail(message) {
     alert('Failed to get the picture: ' + message);
 }

 var cameraPopoverHandle = navigator.camera.getPicture(onSuccess, onFail,
     { destinationType: Camera.DestinationType.FILE_URI,
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY });

 // Reposition the popover if the orientation changes.
 window.onorientationchange = function() {
     var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0);
     cameraPopoverHandle.setPosition(cameraPopoverOptions);
 }