Cámara

Cámara

El objeto de la cámara proporciona acceso a la aplicación de cámara del dispositivo por defecto.

Nota de privacidad importante: Recopilación y uso de imágenes desde cámara de un dispositivo plantea cuestiones de privacidad importante. Política de privacidad de su aplicación debe discutir cómo la aplicación utiliza la cámara y si se comparten las imágenes grabadas con cualquiera de las partes. Además, si el uso de la aplicación de la cámara no es aparente en la interfaz de usuario, debe proporcionar un aviso de just-in-time antes de su aplicación accediendo a la cámara (si el sistema operativo del dispositivo ya no hacerlo). Que el aviso debe proporcionar la misma información mencionada, además de obtener un permiso del usuario (por ejemplo, presentando opciones para Aceptar y No gracias). Para obtener más información, por favor consulte a la guía de privacidad.

Métodos

Acceso a la función

A partir de la versión 3.0, Cordova implementa nivel de dispositivo APIs como plugins. Uso de la CLI plugin comando, que se describe en la interfaz de línea de comandos, para añadir o eliminar esta característica para un proyecto:

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

Estos comandos se aplican a todas las plataformas específicas, sino modificar las opciones de configuración específicas de la plataforma que se describen a continuación:

Algunas plataformas que soportan esta característica sin necesidad de ninguna configuración especial. Ver soporte de plataforma para tener una visión general.

camera.getPicture

Toma una foto con la cámara, u obtiene una foto de la galería de imágenes del dispositivo. La imagen es retornada como un objeto String codificada en base64 o como la URI de esta. El método devuelve un objeto CameraPopoverHandle que puede usarse para reposicionar el diálogo de selección de archivo.

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

Descripción

La función camera.getPicture abre la aplicación predeterminada de cámara del dispositivo que permite a los usuarios tomar fotografías. Este comportamiento es el predeterminado, cuando Camera.sourceType es igual a Camera.PictureSourceType.CAMERA. Una vez que el usuario toma la foto, la aplicación de la cámara se cierra y se restablece la aplicación.

Si Camera.sourceType es Camera.PictureSourceType.PHOTOLIBRARY o Camera.PictureSourceType.SAVEDPHOTOALBUM, entonces aperece un cuadro de diálogo que permite a los usuarios seleccionar una imagen existente. La función camera.getPicture devuelve un objeto CameraPopoverHandle, que puede utilizarse para reposicionar el diálogo de selección de imagen, por ejemplo, cuando cambia la orientación del dispositivo.

El valor devuelto es enviado a la función cameraSuccess, en uno de los formatos siguientes, dependiendo de cameraOptions especificadas:

Puedes hacer lo que quieras con la imagen codificada o URI, por ejemplo:

NOTA: La resolución de la foto en dispositivos nuevos es bastante buena. Fotos seleccionadas de la Galería del dispositivo no son degradadas a una calidad más baja, incluso si se especifica un parámetro de quality. Para evitar problemas comunes de memoria, establezca Camera.destinationType como FILE_URI en lugar de DATA_URL.

Plataformas soportadas

Peculiaridades de Android

Android utiliza los intents para iniciar la actividad de la cámara del dispositivo para capturar imágenes y en teléfonos con poca memoria, la actividad de Cordova puede ser terminada. En este escenario, la imagen puede que no aparezca cuando se restaura la actividad de cordova.

Peculiaridades de iOS

Incluyendo un JavaScript alert() en cualquiera de las funciones de devolución de llamada puede causar problemas. Envolver la alerta dentro un setTimeout() para permitir el iOS image picker o popover cerrar completamente antes de Mostrar la alerta:

setTimeout(function() {
    // do your thing here!
}, 0);

Peculiaridades de Windows Phone 7

Invocando la aplicación de cámara nativa mientras el dispositivo está conectado via Zune no funciona y desencadena un callback de error.

Peculiaridades de Tizen

Tizen sólo admite un destinationType de Camera.DestinationType.FILE_URI y un sourceType de Camera.PictureSourceType.PHOTOLIBRARY.

Ejemplo rápido

Tomar una foto y recuperarlo como una imagen codificada 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);
}

Tomar una foto y recuperar la ubicación del archivo de la imagen:

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);
}

Ejemplo completo

<!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

onSuccess función callback que proporciona los datos de imagen.

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

Parámetros

Ejemplo

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

cameraError

onError función callback que proporciona un mensaje de error.

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

Parámetros

cameraOptions

Parámetros opcionales para personalizar la configuración de la cámara.

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

Opciones

Rarezas Android

Rarezas de blackBerry

iOS rarezas

Rarezas Tizen

Windows Phone 7 y 8 rarezas

CameraPopoverOptions

Sólo iOS parámetros que especifican la dirección ancla elemento ubicación y la flecha de la popover al seleccionar imágenes de biblioteca o álbum de un iPad.

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

CameraPopoverOptions

Tenga en cuenta que puede cambiar el tamaño de la popover para ajustar la dirección de la flecha y orientación de la pantalla. Asegúrese de que para tener en cuenta los cambios de orientación cuando se especifica la ubicación del elemento de anclaje.

Ejemplo rápido

 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

Un identificador para el cuadro de diálogo popover creado porcamera.getPicture.

Métodos

Plataformas soportadas

setPosition

Establecer la posición de la popover.

Parámetros:

Ejemplo rápido

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

Ejemplo completo

 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);
 }