Acceso a la cámara con PhoneGap

0. Índice de
contenidos.

• 1. Entorno
• 2. Introducción
• 3. Creación y configuración del proyecto
• 4. Implementando la funcionalidad
• 5. Probando la funcionalidad
• 6. Ejecutar la aplicación en otra plataforma
• 7. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core i7, 8 GB DDR3)
• Sistema Operativo: Mac OS X Snow Leopard 10.6.4
• PhoneGap 3.3.0-0.18.0
• NodeJS 0.10.24

2. Introducción

Antes de seguir con este tutorial se aconseja haber completado este
otro
que
nos muestra como empezar a dar los primeros pasos.

Una de las historias típicas que se nos presentan a la hora de desarrollar aplicaciones móviles es tener que hacer
uso de la cámara. Por ejemplo, en este tutorial vamos a implementar con PhoneGap la historia de usuario «Como usuario
enviar una imagen desde mi móvil para que pueda ser analizada en el servidor.»

La elección de PhoneGap para desarrollar la historia es la adecuada dado que queremos que la aplicación se ejecute
en la mayoría de dispositivos móviles que tengan cámara independientemente de su sistema operativo y dado que queremos
acceder a la cámara será imprescindible que la aplicación se ejecute de forma nativa en cada uno de ellos.

En este tutorial vamos a abordar la parte de captura de la imagen; el cómo se envía este imagen al servidor queda
fuera del ámbito de este tutorial.

3. Creación y configuración del proyecto

Como vimos en el tutorial de introducción, para crear un proyecto en PhoneGap basta con ejecutar el comando:

cordova create camara-test com.autentia.camara-test camara-test

Dado que sabemos que nuestra aplicación va a necesitar el acceso a la cámara del dispositivo, lo siguiente será
instalar el correspondiente plugin de ejecutando este comando:

cordova plugin add org.apache.cordova.camera

Si queremos comprobar los plugins que tenemos habilitados en nuestro proyecto basta con ejecutar:

cordova plugin ls

Y cuando queramos eliminar alguno de ellos:

cordova plugin rm org.apache.cordova.camera

Vemos que ahora en la carpeta «plugins» de nuestro proyecto tenemos todos los fuentes que permiten el acceso
nativo a la cámara del dispositivo.

La descripción completa del plugin la podemos encontrar en la siguiente
url
de la documentación oficial de PhoneGap.

4. Implementando la funcionalidad

La historia la vamos a desarrollar mostrando un botón en pantalla que permita realizar una foto con el dispositivo, hecha la foto se mostrará en pantalla y se habilitará un botón para poder enviarla.

Lo primero que vamos a hacer es modificar nuestro fichero index.html para mostrar el botón «Tomar Foto», la imagen que se va a previsualizar y el botón de «Enviar» la imagen. El código podría ser el siguiente:

      
          
              
              
              <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
              
              
              
          
          
              

                  
Acceso a la cámara con PhoneGap
                  TOMAR FOTO
                  
                  ENVIAR FOTO
              
              <script type="text/javascript" src="cordova.js"></script>
              <script type="text/javascript" src="js/index.js"></script>
              <script type="text/javascript">app.initialize();</script>
          
      
    

Este HTML es muy simple, solo contiene los enlaces a los ficheros externos necesarios y la declaración de los botones y el elemento imagen donde se va a mostrar la imagen tomada.

Ahora vamos a implementar el Javascript necesario en el fichero js/index.js que podría quedar de la siguiente forma:

      var app = {

          initialize: function() {
              this.bindEvents();
          },
         
          bindEvents: function() {
              var takePhoto = document.getElementById('takePhoto');
              takePhoto.addEventListener('click', app.takePhoto, false);
              var sendPhoto = document.getElementById('sendPhoto');
              sendPhoto.addEventListener('click', app.sendPhoto, false);
          },

          sendPhoto: function() {
              alert('Imagen enviada al servidor');
          },

          takePhoto: function(){
              navigator.camera.getPicture(app.onPhotoDataSuccess, app.onFail, { quality: 20, 
                  allowEdit: true, destinationType: navigator.camera.DestinationType.DATA_URL });
          },

          onPhotoDataSuccess: function(imageData) {
         
            var photo = document.getElementById('photo');

            photo.style.display = 'block';

            photo.src = "data:image/jpeg;base64," + imageData;

            var sendPhoto = document.getElementById('sendPhoto');
            sendPhoto.style.display = 'block';
            
          },

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

      };
    

En este fichero es donde reside toda la funcionalidad. Primero establecemos los eventos para los dos botones. El de enviar la foto simplemente muestra un alert indicando la acción.

Para tomar la foto de la cámara hacemos uso del API de PhoneGap, creando las funciones de callback cuando la toma de la imagen tiene éxito (onPhotoDataSuccess) y cuando no (onFail)

Cuando tiene éxito mostramos la imagen tomada en el elemento «img» del HTMLy cuando ocurre algún problema mostramos un alert con el error.

Y vamos a modificar el fichero index.css para dejarlo de esta forma:

      
    body {      
        background-color:#E4E4E4;
        font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
        font-size:12px;
        height:100%;
        margin:0px;
        padding:0px;
        width:100%;
    }

    #photo{
        display:none;
        width:200px;
        height:200px;
    }

    #sendPhoto{
        display: none;
    }

    

Como se puede observar inicialmente no mostramos la imagen ni el botón de enviar; estos serán habilitados cuando la foto haya sido tomada correctamente.

5. Probando la funcionalidad

Para probar esta funcionalidad necesitamos hacerlo en un dispositivo físico dado que los simuladores no son capaces de tomar imágenes.

En mi caso voy a probar la funcionalidad en un Iphone para lo cual tengo que indicar en mi proyecto que una de las plataformas soportadas va a ser ios, esto se hace ejecutando el siguiente comando:

cordova platform add ios

Una vez ejecutado, el terminal nos informa que efectivamente se ha añadido la plataforma junto con la configuración necesaria para poder utilizar el plugin de la cámara.

Ahora vamos a construir el proyecto con el comando:

cordova build

Y para ejecutarlo en el dispositivo físico IOS que tengamos conectado al ordenador bastará con ejecutar en el terminal:

cordova run

Este comando nos instalará la aplicación en el dispositivo. Solo queda arrancarla y tomar una foto de prueba.

6. Ejecutar la aplicación en otra plataforma

Una vez que hemos probado que la aplicación funciona en IOS podemos ver como se ejecuta en cualquier otra plataforma, solo tenemos que añadir la plataforma deseada y ejecutar la aplicación.

Por ejemplo, si queremos ver como se ejecuta en Android bastará con conectar un dispositivo Android en modo de depuración y ejecutar los siguientes comandos:

      cordova platform add android
      cordova build android
      cordova run android
    

De este modo se instalará en nuestro dispositivo conectado la aplicación y podremos tomar una foto como se muestra en la siguiente imagen:

7. Conclusiones

En este tutorial hemos visto como podemos crear una aplicación multiplaforma que acceda a servicios nativos del dispositivo como puede ser la cámara, implementandola únicamente con HTML5, CSS3 y Javascript.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.