Hoy en día ya no se concibe un dispositivo móvil que no tenga una cámara fotográfica. Lamentablemente HTML5 no da por el momento ningún mecanismo estandarizado para que una página web pueda interaccionar con la cámara de fotos integrada. Así, deberás usar distintas técnicas en función del sistema operativo y/o navegador que se use.
En este artículo vamos a ver la forma más sencilla de permitir que los usuarios móviles de nuestra web nos envíen fotografías. De hecho es tan simple que no tendrás que hacer prácticamente nada especial para conseguirlo ;-)
El atributo capture
En iOS 6 o superior y en Android 4.0 "Ice Cream Sandwich" o superior se puede utilizar un input type="file" con un atributo capture que tenga el valor "camera". Esto lanzará la aplicación de cámara de fotos y la foto realizada por el usuario será enviada cuando se envíe el formulario que contiene el input type="file".
<input type="file" capture="camera">
Hemos creado un pequeño ejemplo para que te descargues, que genera un botón más atractivo que el control por defecto y que te permitirá probarlo. Puedes descargarlo de aquí.
El siguiente vídeo breve muestra el comportamiento de esta página de ejemplo en el navegador Chrome (incluido por defecto en Android) cuando el usuario pulsa un input type="file" con el atributo capture:
Podemos especificar el tipo de archivo que queremos con el atributo accepts y podríamos lanzar la cámara directamente, algo así:
<input type="file" accept="image/*" capture="camera">
En este caso lanzará la cámara para tomar fotografías. Si usásemos el atributo accept="video/*" entonces lanzaría la cámara para grabar vídeo y enviarlo. Si no ponemos nada, ocurre lo del vídeo anterior: que te da a escoger. Es sencillo pero muy práctico.
Existen técnicas más avanzadas para permitir el envío de imágenes y archivos desde un dispositivo móvil al servidor usando solamente HTML y JavaScript, como por ejemplo el uso de la API de archivos, la API de Media o WebRTC. Y si nuestra aplicación web móvil se va a incluir dentro de una aplicación Apache Cordova tenemos diversos plugins para facilitar esta tarea. Sin embargo, con este simple truco podemos conseguir que nos envíen fotografías sin complicarnos la vida lo más mínimo.
El atributo capture es sencillo de utilizar, no tiene apenas dificultad y no debe hacerse nada especial en un navegador que no lo soporte (se comportará como un input type="file" estándar).
Si tu aplicación web, lo único que requiere es que el usuario pueda subir fotos que haga en este mismo momento, no te compliques más la vida y usa este mecanismo.
Para poder tener más control sobre este y otros muchos aspectos es necesario utilizar la API avanzada de MediaCapture, perteneciente al estándar WebRTC pensado para conferencias en tiempo real. Pero esto ya es otra historia...