Acceso a la cámara con PhoneGap

13
22472

Acceso a la cámara con PhoneGap

0. Índice de
contenidos.

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:

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:

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

Y cuando queramos eliminar alguno de ellos:

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:

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:

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:

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:

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:

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

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:

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.

13 Comentarios

  1. esta de lujo el tutorial de la cam, pero tengo una duda como hago para que la foto se guarde en la galeria del movil, tengo que configurar algun otro parametro o no?
    Saludos y felicidades por el trabajo.

  2. Excelente tutorial! En este momento estoy pasando ebooks de ios a app de android con phonegap y el unico problema que tengo es la reporduccion de videos ya que los estuve haciendo originalmente con el tag video. ¿Sabrías cual es la forma de solucionar este inconveniente? He probado plugins para android de phonegap pero nada me esta funcionando.
    Gracias!

  3. Muy mal tutorial

    No se pone en el código HTML, el código correspondiente a los botones «Tomar Foto» y «Enviar Foto». Tampoco se indica que los directorios correlacionados de:

    Son propios del que diseñó el tutorial.

    Pésimo tutorial. Asume muchas cosas que mucha gente desconoce.

    Por cierto, la app no sirve. No se ejecuta bien. Seguramente habrña algún código oculto que simplemente no se muestra en este tutorial.

  4. Alguien probo este tutorial y le funciono ?

    me surgio la misma duda que comenta Alcides, no veo donde estan los botones, se agregara solo el de la camara del SO?

    saludos!

    • Amigo buenas noches soy nuevo en esto, esta muy bueno tu tutorial, como le hago para subir la foto a mi servidor y que me guarde la url en mi base de datos, de antemano muchas gracias

  5. Amigo buenas noches soy nuevo en esto, esta muy bueno tu tutorial, como le hago para subir la foto a mi servidor y que me guarde la url en mi base de datos, de antemano muchas gracias

  6. Hola me da este mensaje
    cordova plugin add org.apache.cordova.camera
    Error: Unpublished by stevegill on 2015-01-30T00:59:15.025Z

Dejar respuesta

Please enter your comment!
Please enter your name here