Avenida de Castilla,1 - Edificio Best Point - Oficina 21B

28830 San Fernando de Henares (Madrid)

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

Qu ofrece Autentia Real

Business Solutions S.L?
Somos su empresa de Soporte a Desarrollo Informtico.
Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y
proyectos a medida
2. Auditora de cdigo y recomendaciones de mejora
3. Arranque de proyectos basados en nuevas
tecnologas
1. Definicin de frameworks corporativos.
2. Transferencia de conocimiento de nuevas arquitecturas.
3. Soporte al arranque de proyectos.
4. Auditora preventiva peridica de calidad.
5. Revisin previa a la certificacin de proyectos.
6. Extensin de capacidad de equipos de calidad.
7. Identificacin de problemas en produccin.
3a

RFP

Gran Empresa

Concurso

Verificacin
previa

Consultora 1
Tecnologa
Desarrollo
Sistemas

Produccin

Consultora 2
Piloto

3b

Certificacin
o Pruebas

Consultora 3

autentia

Equipo propio desarrollo

4. Cursos de formacin (impartidos por desarrolladores en activo)

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

Gestor portales (Liferay)

Gestor de contenidos (Alfresco)
Aplicaciones hbridas

Control de autenticacin y
acceso (Spring Security)
UDDI
Web Services
Rest Services
Social SSO
SSO (Cas)

Tareas programadas (Quartz)

Gestor documental (Alfresco)
Inversin de control (Spring)

Compartimos nuestro conociemiento en:

www.adictosaltrabajo.com

JPA-Hibernate, MyBatis
Motor de bsqueda empresarial (Solr)
ETL (Talend)
Direccin de Proyectos Informticos.
Metodologas giles
Patrones de diseo
TDD

BPM (jBPM o Bonita)

Generacin de informes (JasperReport)
ESB (Open ESB)

Para ms informacin vistenos en:

www.autentia.com

1/16/2014

Acceso a la cmara con PhoneGap

Entra en Adictos a travs de
E-mail
Contrasea

Deseo registrarme
Olvid mi contrasea

Entrar

Inicio

Quines somos

Formacin

Comparador de salarios

Nuestros libros

Ms

Ests en: Inicio Tutoriales Acceso a la cmara con PhoneGap

Rubn Aguilera Daz-Heredero

Consultor tecnolgico de desarrollo de proyectos informticos.

Catlogo de servicios
Autentia

Ingeniero en Informtica, especialidad en Ingeniera del Software

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo,
factora y formacin
Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicacin del tutorial: 2014-01-16

Tutorial visitado 1 veces Descargar en PDF

Acceso a la cmara con PhoneGap

0. ndice de contenidos.
1. Entorno
2. Introduccin
3. Creacin y configuracin del proyecto
4. Implementando la funcionalidad
5. Probando la funcionalidad
6. Ejecutar la aplicacin en otra plataforma
7. Conclusiones

1. Entorno

Sguenos a travs de:

Este tutorial est escrito usando el siguiente entorno:

Hardware: Porttil 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. Introduccin

ltimas Noticias
IX Autentia Cycling Day
(ACTUALIZADO)
La historia de la informtica

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 tpicas que se nos presentan a la hora de desarrollar aplicaciones mviles es tener que hacer uso
de la cmara. Por ejemplo, en este tutorial vamos a implementar con PhoneGap la historia de usuario "Como usuario
enviar una imagen desde mi mvil para que pueda ser analizada en el servidor."
La eleccin de PhoneGap para desarrollar la historia es la adecuada dado que queremos que la aplicacin se ejecute en
la mayora de dispositivos mviles que tengan cmara independientemente de su sistema operativo y dado que
queremos acceder a la cmara ser imprescindible que la aplicacin se ejecute de forma nativa en cada uno de ellos.

Autentia en la carrera de
las empresas
Spring 4.0 qu hay de
nuevo amigo?
Torneo de pdel solidario
AMEB
Histrico de noticias

En este tutorial vamos a abordar la parte de captura de la imagen; el cmo se enva este imagen al servidor queda fuera
del mbito de este tutorial.

3. Creacin y configuracin del proyecto

ltimos Tutoriales

Como vimos en el tutorial de introduccin, para crear un proyecto en PhoneGap basta con ejecutar el comando:
view plain

01.

print

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

Dado que sabemos que nuestra aplicacin va a necesitar el acceso a la cmara del dispositivo, lo siguiente ser instalar
el correspondiente plugin de ejecutando este comando:
view plain

01.

print

cordova plugin add org.apache.cordova.camera

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

01.

print

Mi primera vista en ZK
como desarrollador JSF (II).
Hola mundo con las
tecnologas de SpringMVC,
Hibernate, un ejemplo de
aspectos y test con JUnit
Empezando con PhoneGap
SOA vs. SOAP y REST
Mi primera vista en ZK
como desarrollador JSF (I).

cordova plugin ls

Y cuando queramos eliminar alguno de ellos:

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

ltimos Tutoriales del

Autor
1/5

1/16/2014

Acceso a la cmara con PhoneGap

view plain

01.

print

cordova plugin rm org.apache.cordova.camera

Empezando con PhoneGap

Vemos que ahora en la carpeta "plugins" de nuestro proyecto tenemos todos los fuentes que permiten el acceso nativo a
la cmara del dispositivo.

Hello World en IOS sin

StoryBoard

La descripcin completa del plugin la podemos encontrar en la siguiente url de la documentacin oficial de PhoneGap.

Ejecutando MyBatis contra

distintas bases de datos

4. Implementando la funcionalidad
La historia la vamos a desarrollar mostrando un botn en pantalla que permita realizar una foto con el dispositivo, hecha
la foto se mostrar en pantalla y se habilitar un botn para poder enviarla.
Lo primero que vamos a hacer es modificar nuestro fichero index.html para mostrar el botn "Tomar Foto", la imagen
que se va a previsualizar y el botn de "Enviar" la imagen. El cdigo podra ser el siguiente:
view plain

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.

print

Gestionando relaciones en
MyBatis
Introduccin a XQuery con
ejemplos

<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-
height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Acceso a la cmara con PhoneGap</title>


<div id="content" style="margin-top: 100px;">
<h1>Acceso a la cmara con PhoneGap</h1>
<button id="takePhoto">TOMAR FOTO</button>
<img id="photo" src="">
<button id="sendPhoto">ENVIAR FOTO</button>
</div>
<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 simplemente, solo contiene los enlaces a los ficheros externos necesarios y la declaracin de los
botones y el elemento imagen donde se va a mostrar la imagen tomada.

ltimas ofertas de
empleo
2011-09-08

Comercial - Ventas -
MADRID.
2011-09-03

Comercial - Ventas -
VALENCIA.
2011-08-19

Comercial - Compras -
ALICANTE.
2011-07-12

Otras Sin catalogar -

MADRID.
2011-07-06

Otras Sin catalogar -

LUGO.

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

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

print

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 accin.
Para tomar la foto de la cmara 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 algn problema
mostramos un alert con el error.
Y vamos a modificar el fichero index.css para dejarlo de esta forma:
view plain

01.
02.
03.
04.
05.

print

body {
background-color:#E4E4E4;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;

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

2/5

1/16/2014
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

Acceso a la cmara con PhoneGap

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 botn de enviar; estos sern habilitados cuando la
foto haya sido tomada correctamente.

5. Probando la funcionalidad
Para probar esta funcionalidad necesitamos hacerlo en un dispositivo fsico dado que los simuladores no son capaces de
tomar imgenes.
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:
view plain

01.

print

cordova platform add ios

Una vez ejecutado, el terminal nos informa que efectivamente se ha aadido la plataforma junto con la configuracin
necesaria para poder utilizar el plugin de la cmara.
Ahora vamos a construir el proyecto con el comando:
view plain

01.

print

cordova build

Y para ejecutarlo en el dispositivo fsico IOS que tengamos conectado al ordenador bastar con ejecutar en el terminal:
view plain

01.

print

cordova run

Este comando nos instalar la aplicacin en el dispositivo. Solo queda arrancarla y tomar una foto de prueba.

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

3/5

1/16/2014

Acceso a la cmara con PhoneGap

6. Ejecutar la aplicacin en otra plataforma

Una vez que hemos probado que la aplicacin funciona en IOS podemos ver como se ejecuta en cualquier otra
plataforma, solo tenemos que aadir la plataforma deseada y ejecutar la aplicacin.
Por ejemplo, si queremos ver como se ejecuta en Android bastar con conectar un dispositivo Android en modo de
depuracin y ejecutar los siguientes comandos:
view plain

01.
02.
03.

print

cordova platform add android

cordova build android
cordova run android

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

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

4/5

1/16/2014

Acceso a la cmara con PhoneGap

7. Conclusiones
En este tutorial hemos visto como podemos crear una aplicacin multiplaforma que acceda a servicios nativos del
dispositivo como puede ser la cmara, implementandola nicamente con HTML5, CSS3 y Javascript.
Cualquier duda o sugerencia en la zona de comentarios.
Saludos.

A continuacin puedes evaluarlo:

Regstrate para evaluarlo

Por favor, vota +1 o comprtelo si te pareci interesante

Share |

Anmate y comntanos lo que pienses sobre este TUTORIAL:

Registrate y accede a esta y otras ventajas

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

PUSH THIS

---no clicks

Page Pushers

Community

Help?

0 people brought clicks to this page

powered by karmacracy

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

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

5/5