Plugin Camera

org.apache.cordova.camera

El plugin camera nos dara acceso a la camara de fotos del dispositivo. Esto sera posible gracias a una API que nos permita llamar funciones de la camara para luego capturar el resultado (foto, error, opciones).

Event Handler vs Callback

Ya vimos como manejar eventos (addEventListener y jQuery.on) y como se utiliza una funcion (Event Handler) para interactuar con el evento especificado. Otro concepto muy similar es el de callback.

Un callback es una funcion que atiende la respuesta de un comando. Es decir, ejecutamos el comando, pero este no nos devuelve un valor, este comando espera que nosotros le digamos que hacer con el resultado. Este resultado debe estar especificado en la documentacion del comando.

Este tipo de funcionalidad es implicita en las APIs que ejecutan llamadas entre dos interfaces/plataformas o bien cuando se trata de una llamada remota. La ventaja de usar un callback radica en no tener que frenar el codigo de la aplicacion que lo implementa, similar al manejo de eventos.

En este caso en particular, utilizando la camara del dispositivo, al comando que accederemos sera getPicture y veremos que los parametros que debemos utilizar son, en lugar de valores comunes, funciones para manejar la respuesta de la camara (foto, error, cancel).

Instalacion

Para probar el plugin crearemos un proyecto basado en jQuery Mobile:

phonegap create prueba10 --id com.coderhouse.prueba10 --name "00 Prueba 10" -src templates\jqm

Recuerdan como instalar un plugin? Este se encuentra en templates\org.apache.cordova.camera:

cd prueba10
phonegap plugin add ..\templates\org.apache.cordova.camera

Descripcion

La funcion camera.getPicture permite abrir la aplicacion de camara del dispositivo, tomar o elegir una foto, y luego hacer algo con esa foto. Los parametros que recibe son siempre los mismos:

• success callback: funcion que se ejecuta cuando la seleccion fue completada
• error callback: funcion que se ejecuta cuando hubo un error o se cancelo la seleccion
• options: objeto con opciones de camara

Si bien los callbacks son siempre los mismos, como se comporten dependera de las opciones que pasemos a getPicture. Las opciones mas comunes son:

• Camera.PictureSourceType: Define de donde provendra la foto
  • CAMERA: abrira la aplicacion de camara para tomar una foto
  • PHOTOLIBRARY o `SAVEDPHOTOALBUM': ambas abriran la camara para seleccionar una foto de la galeria del dispositivo
• Camera.DestinationType: Define que tipo de valor recibira la funcion successCallback
  • DATA_URL: el callback recibira la imagen encodeada en Base64
  • FILE_URI: el callback recibira el URI de la imagen en el sistema de archivos del dispositivo

Nota: si bien en Javascript no existen constantes se respeta la convencion de usar variables en mayusculas para denotar variables que han sido provistas por la API y no deberian cambiar su valor. En si, representas valores simples:

Camera.DestinationType.DATA_URL = 0;
Camera.DestinationType.FILE_URI = 1;
Camera.DestinationType.NATIVE_URI = 2;

Opciones

El resto de las opciones son legibles, la informacion completa se encuentra en la pagina del plugin: org.apache.cordova.camera. Estos son los valores por defecto de las opciones:

{
  quality : 75,
  destinationType : Camera.DestinationType.DATA_URL,
  sourceType : Camera.PictureSourceType.CAMERA,
  allowEdit : true,
  encodingType: Camera.EncodingType.JPEG,
  mediaType: Camera.MediaType.PICTURE,
  correctOrientation: 
  popoverOptions: CameraPopoverOptions, //iOS only
  saveToPhotoAlbum: false
};

Uso

En la aplicacion que creamos en el directorio prueba10 tendremos un esqueleto basico con jQuery Mobile.

Por probar la funcionalidad usaremos una pagina con un boton Sacar foto. Para esto, editaremos el archivo www/index.html:

    <div data-role="page" id="home">
      <div data-role="header">
        <h1>Galeria de fotos</h1>
      </div>
      <div data-role="content" class="galeria">
        <!-- imagen -->
        <img src="icon.png">
      </div>
      <div data-role="footer" data-position="fixed">
        <!-- botones en el footer -->
        <a href="#" id="sacarfoto" class="ui-btn ui-icon-camera ui-btn-icon-left">Sacar foto</a>
      </div>
    </div>

Luego editaremos el archivo www/js/index.js, donde incluiremos un objeto para contener la funcionalidad. Agregamos una variable al principio del archivo:

var camara = {
  initialize: function() {
    camara.defaults = {
      quality : 50,
      destinationType : Camera.DestinationType.DATA_URL,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: Camera.EncodingType.JPEG,
      // targetWidth: 100,
      // targetHeight: 100,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };
    $('#sacarfoto').on('click', camara.sacarFoto);
  },
  sacarFoto: function() {
    navigator.camera.getPicture(camara.onDataUrlSuccess, camara.onError, camara.defaults);
  },
  onDataUrlSuccess: function(imageData) {
    // cuando la camara se cierre se ejecutara esta funcion
    // y usaremos "imageData" como src del tag <img>
    $('img').attr('src', "data:image/jpeg;base64," + imageData);
  },
  onError: function(message){
    alert('Error: ' + message);
  }
};

Correr el proyecto y verificar que el boton abra la camara y luego la foto se vea en nuestra aplicacion.

phonegap run android

Si todo salio bien, cuando saquemos una foto deberia verse una imagen inmensa en la aplicacion. Continuar