Cámara, Phonegap y HTML5

Usar la cámara con Phonegap es muy sencillo, pero hoy vamos a explicar como usarla y manejar la información desde HTML5 y javascript. Esto que vamos a explicar es válido para todas las plataformas móviles como IOS, Android y Windows Phone.

Empezamos con la parte sencilla de todos esto, ¿cómo damos permiso para usar la cámara? Esto viene muy bien explicado en la documentación de Phonegap.

Android: Añadimos al fichero config.xml lo siguiente:

<plugin name="Camera"
  value="org.apache.cordova.CameraLauncher" />

En AndroidManifest.xml

<uses-permission
  android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

IOS: Añadimos al fichero config.xml lo siguiente:

<plugin name="Camera" value="CDVCamera" />

Windows Phone: Añadimos al fichero WPAppManifest.xml lo siguiente:

<Capabilities>
  <Capability Name="ID_CAP_ISV_CAMERA" />
  <Capability Name="ID_HW_FRONTCAMERA" />
</Capabilities>

Una vez configurada la aplicación para usar la cámara, vamos a ver un trozo de código que nos mostrará como se hace para que la aplicación abra la cámara.

var imgDataNewUser = '';

function getPicture(){
	imgDataNewUser = '';
	_gaq.push(['_trackEvent', 'Camera', 'Cámara levantada']);
	navigator.camera.getPicture(onSuccess, onFail,
          { quality: 14, correctOrientation: true,
            destinationType: Camera.DestinationType.DATA_URL,
            allowEdit: true });
}

function onSuccess(imageData) {

	valueRotate = 0;
	imgDataNewUser = imageData;
	var img = $('<img src=""/>');

	img.attr('src', "data:image/jpeg;base64," + imageData);

	var fotoPerfilClass = $('.fotoPerfil');
	fotoPerfilClass.empty();
	fotoPerfilClass.append(img);
    $('.imagenPerfil').trigger('create');
}

function onFail(message) {

	imgDataNewUser = '';
	if(message != null && (message.indexOf('cancelled') < 0
            && message.indexOf('selected') < 0)){
		navigator.notification.alert('Ha ocurrido un error'+
                  ' con la camara: ' + message,
                   function() {},"Información" );
	}
}

El método de Phonegapnavigator.camera.getPicture” recibe, método a ejecutar al realizar la operación correctamente, método a ejecutar cuando la operación ha fallado, y un array con varias propiedades. Destacar de estas propiedades quality para el tamaño y calidad de la imagen y allowEdit, que permite editar la foto, solo para IOS, además de la forma de devolver la imagen:

  • Camera.DestinationType.DATA_URL
  • Camera.DestinationType.FILE_URI

Otro bonus extra para la cámara es que si le das a cancelar en la aplicación de la cámara del sistema se ejecuta el método “onFail“, para ello controlamos el mensaje para saber si ha sido producido por el botón cancelar o por un error de verdad.

El string que representa la imagen que ha sido capturada (Camera.DestinationType.DATA_URL) la guardamos en una variable global ya que vimos que el paso por parámetro hacía que parte de la foto desapareciera lo que nos llevó a la conclusión que el paso por parámetro en javascript está limitado a cierto tamaño (no lo calculamos). Otra funcionalidad que le hemos añadido del método onSuccess es hacer que la imagen capturada sea mostrada al usuario en el HTML5.

En esta aplicación, en lugar de usar SQLite y así evitar tener que trabajar en todas las plataformas optamos por WEBSQL y LocalStorage nuevamente.


db.executeSql('INSERT INTO users (dni, img) VALUES (?,?)',
   [dni.toUpperCase(), imgDataNewUser], dbSuccess, dbError);

Anuncios

Una respuesta

  1. Esto es una garcha

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: