Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

1/16/2014 Acceso a la cámara con PhoneGap

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=AccesoCamaraPhoneGap 1/5

Entra en Adictos a través de

Entrar

E-­mail

Contraseña

Deseo registrarmeOlvidé mi contraseña

Inicio Quiénes somos Formación Comparador de salarios Nuestros libros Más

» Estás en: Inicio Tutoriales Acceso a la cámara con PhoneGap

Síguenos a través de:

Catálogo de servicios

Autentia

Últimas Noticias

» IX Autentia Cycling Day(ACTUALIZADO)

» La historia de la informática

» Autentia en la carrera delas empresas

» Spring 4.0 ¿qué hay denuevo amigo?

» Torneo de pádel solidarioAMEB

Histórico de noticias

Últimos Tutoriales

» Mi primera vista en ZKcomo desarrollador JSF (II).

» Hola mundo con lastecnologías de SpringMVC,Hibernate, un ejemplo deaspectos y test con JUnit

» Empezando con PhoneGap

» SOA vs. SOAP y REST

» Mi primera vista en ZKcomo desarrollador JSF (I).

Últimos Tutoriales del

Autor

Ver todos los tutoriales del autor

Rubén Aguilera Díaz-­Heredero

Consultor tecnológico de desarrollo de proyectos informáticos.

Ingeniero en Informática, especialidad en Ingeniería del Software

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo,factoría y formación

Somos expertos en Java/J2EE

Fecha de publicación del tutorial: 2014-­01-­16 Tutorial visitado 1 veces Descargar en PDF

Acceso a la cámara con PhoneGap

0. Índice de contenidos.

1. Entorno2. Introducción3. Creación y configuración del proyecto4. Implementando la funcionalidad5. Probando la funcionalidad6. Ejecutar la aplicación en otra plataforma7. 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.4PhoneGap 3.3.0-­0.18.0NodeJS 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 losprimeros pasos.

Una de las historias típicas que se nos presentan a la hora de desarrollar aplicaciones móviles es tener que hacer usode la cámara. Por ejemplo, en este tutorial vamos a implementar con PhoneGap la historia de usuario "Como usuarioenviar 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 enla mayoría de dispositivos móviles que tengan cámara independientemente de su sistema operativo y dado quequeremos 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 fueradel á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:

view plain print ?

01. 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á instalarel correspondiente plugin de ejecutando este comando:

view plain print ?

01. cordova plugin add org.apache.cordova.camera

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

view plain print ?

01. cordova plugin ls

Y cuando queramos eliminar alguno de ellos:

1/16/2014 Acceso a la cámara con PhoneGap

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=AccesoCamaraPhoneGap 2/5

» Empezando con PhoneGap

» Hello World en IOS sinStoryBoard

» Ejecutando MyBatis contradistintas bases de datos

» Gestionando relaciones enMyBatis

» Introducción a XQuery conejemplos

Últimas ofertas de

empleo

2011-­09-­08Comercial -­ Ventas -­MADRID.

2011-­09-­03

Comercial -­ Ventas -­VALENCIA.

2011-­08-­19Comercial -­ Compras -­ALICANTE.

2011-­07-­12Otras Sin catalogar -­MADRID.

2011-­07-­06Otras Sin catalogar -­LUGO.

view plain print ?

01. 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 ala 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, hechala 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 imagenque se va a previsualizar y el botón de "Enviar" la imagen. El código podría ser el siguiente:

view plain print ?

01. <meta charset="utf-­8"> 02. <meta name="format-­detection" content="telephone=no"> 03. <!-­-­ WARNING: for iOS 7, remove the width=device-­width and height=device-­

height attributes. See https://issues.apache.org/jira/browse/CB-­4323 -­-­> 04. <meta name="viewport" content="user-­scalable=no, initial-­scale=1, maximum-­scale=1, minimum-­

scale=1, width=device-­width, height=device-­height, target-­densitydpi=device-­dpi"> 05. <link rel="stylesheet" type="text/css" href="css/index.css"> 06. <title>Acceso a la cámara con PhoneGap</title> 07. 08. 09. <div id="content" style="margin-­top: 100px;;"> 10. <h1>Acceso a la cámara con PhoneGap</h1> 11. <button id="takePhoto">TOMAR FOTO</button> 12. <img id="photo" src=""> 13. <button id="sendPhoto">ENVIAR FOTO</button> 14. </div> 15. <script type="text/javascript" src="cordova.js"></script> 16. <script type="text/javascript" src="js/index.js"></script> 17. <script type="text/javascript">app.initialize();;</script>

Este HTML es muy simplemente, solo contiene los enlaces a los ficheros externos necesarios y la declaración de losbotones 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:

view plain print ?

01. var app = 02. 03. initialize: function() 04. this.bindEvents();; 05. , 06. 07. bindEvents: function() 08. var takePhoto = document.getElementById('takePhoto');; 09. takePhoto.addEventListener('click', app.takePhoto, false);; 10. var sendPhoto = document.getElementById('sendPhoto');; 11. sendPhoto.addEventListener('click', app.sendPhoto, false);; 12. , 13. 14. sendPhoto: function() 15. alert('Imagen enviada al servidor');; 16. , 17. 18. takePhoto: function() 19. navigator.camera.getPicture(app.onPhotoDataSuccess, app.onFail, quality: 20, 20. allowEdit: true, destinationType: navigator.camera.DestinationType.DATA_URL );; 21. , 22. 23. onPhotoDataSuccess: function(imageData) 24. 25. var photo = document.getElementById('photo');; 26. 27. photo.style.display = 'block';; 28. 29. photo.src = "data:image/jpeg;;base64," + imageData;; 30. 31. var sendPhoto = document.getElementById('sendPhoto');; 32. sendPhoto.style.display = 'block';; 33. 34. , 35. 36. onFail: function(message) 37. alert('Failed because: ' + message);; 38. 39. 40. ;;

En este fichero es donde reside toda la funcionalidad. Primero establecemos los eventos para los dos botones. El deenviar 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 tomade 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 problemamostramos un alert con el error.

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

view plain print ?

01. 02. body 03. background-­color:#E4E4E4;; 04. font-­family:'HelveticaNeue-­Light', 'HelveticaNeue', Helvetica, Arial, sans-­serif;; 05. font-­size:12px;;

1/16/2014 Acceso a la cámara con PhoneGap

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=AccesoCamaraPhoneGap 3/5

06. height:100%;; 07. margin:0px;; 08. padding:0px;; 09. width:100%;; 10. 11. 12. #photo 13. display:none;; 14. width:200px;; 15. height:200px;; 16. 17. 18. #sendPhoto 19. display: none;; 20.

Como se puede observar inicialmente no mostramos la imagen ni el botón de enviar;; estos serán habilitados cuando lafoto 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 detomar 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 lasplataformas soportadas va a ser ios, esto se hace ejecutando el siguiente comando:

view plain print ?

01. cordova platform add ios

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

Ahora vamos a construir el proyecto con el comando:

view plain print ?

01. cordova build

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

view plain print ?

01. cordova run

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

1/16/2014 Acceso a la cámara con PhoneGap

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=AccesoCamaraPhoneGap 4/5

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 otraplataforma, 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 dedepuración y ejecutar los siguientes comandos:

view plain print ?

01. cordova platform add android 02. cordova build android 03. cordova run android

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

1/16/2014 Acceso a la cámara con PhoneGap

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=AccesoCamaraPhoneGap 5/5

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-­No comercial-­Sin obras derivadas 2.5

PUSH THIS Page Pushers Community Help?

----no clicks + + + + + + + +

0 people brought clicks to this page

powered by karmacracy

» Registrate y accede a esta y otras ventajas «

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

7. Conclusiones

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

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |

Copyright 2003-­2014 © All Rights Reserved | Texto legal y condiciones de uso | Banners | Powered by Autentia | Contacto