Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=1103df03-3931-4e8c-a12b-32854568451a

Cómo acceder a la cámara de un móvil con HTML

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.

Acceder-Camara-Movil-03

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...

Eduard Tomás Eduard es ingeniero informático y atesora muchos años de experiencia como desarrollador. Está especializado en el desarrollo de aplicaciones web y móviles. Mantiene un conocido blog sobre desarrollo en .NET en general y ASP.NET MVC en particular. Colabora con la comunidad impartiendo charlas en formato webcast y en eventos de distintos grupos de usuarios. Puedes seguirlo en Twitter en @eiximenis. Ver todos los posts de Eduard Tomás

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.


Comentarios (17) -

muchas gracias por el dato!!!

Responder

Xavier Bonany
Xavier Bonany

Genial!! Gràcias!

Responder

hola y como podría mostrar la imagen en la misma pagina, gracias saludos

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Tendrías que usar la API de FileReader (https://w3c.github.io/FileAPI/#dfn-filereader) para leer el archivo y mostrarlo antes de enviarlo al servidor.

Saludos.

Responder

Edgar Parra
Edgar Parra

Excelente funciona perfectamente! Muy sencillo! Gracias por la ayuda!

Responder

Mario Mijes
Mario Mijes

Quisiera utilizar Media capture para grabar vídeo, pero mientras se esta grabando el video, capturarlo en un archivo y enviarlo a servidor, tienen alguna idea de como podría desarrollarlo?

Responder

Martín Martínez
Martín Martínez

Necesitaba algo asi pero no entiendo como se envia al servidor, al hacer la foto me dice guardar o descartar pero luego no queda en ningun lado...

Responder

Martín Martínez
Martín Martínez

Por favor indicame como lo envia al servidor, no veo donde guarda las fotos.

Responder

Hola Martín:

Esos datos se envían al servidor como con cualquier elemento de tipo <file> de un formulario, codificados en Base64, y debes recibirlos en el servidor y procesarlos allí. No te lo guarda en local en ningún lado.

El procesamiento en el lado servidor dependerá de la tecnología de servidor que uses: PHP, ASP.NET, Node.js, Python. Cada una tiene su manera de hacerlo y tendrás que verlo en el que te interese. Normalmente es algo sencillo de todos modos y Google es tu amigo.

Saludos.

Responder

Martín Martínez
Martín Martínez

Estoy intentando hacerlo con asp net pero por mas que busco no doy con ello tpc tengo demasiados conocimientos si podeis postearme un enlace o una pista de como hacerlo..

Responder

campusMVP
campusMVP

Hola:

Si buscas en Google algo estilo "ASP.NET MVC File Upload" tienes multitud de archivos, por ejemplo:

support.microsoft.com/.../how-to-upload-a-file-to-a-web-server-in-asp-net-by-using-visual-c--net  (en ASP.NET Web Forms)

En ASP.NET MVC 5: www.c-sharpcorner.com/.../

Saludos

Responder

Hola:

Estoy probando tu ejemplo y hacer la foto me va bien. El problema es que cuando ejecuto el php y no me encuentra la imagen. Uso html y php . Podrias ayudarme?

Gracias

Responder

Hola.

Es posible que al pulsar te cargue la camara frontal?

Responder

Hola Lucas:

Con este sistema sencillo no es posible: debe ser el usuario el que elija cuál quiere utilizar.

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 conferencia en tiempo real:

https://w3c.github.io/mediacapture-main/

Saludos.

Responder

Waooo!, muchas gracias por el dato.

Responder

Hola, y en el caso de varias fotos?

Responder

campusMVP
campusMVP

Hola Pilar:

Esta es una manera rápida y sencilla de poder recoger y enviar fotografías o vídeos al servidor, pero tiene sus limitaciones, precisamente por su sencillez.

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:

https://w3c.github.io/mediacapture-main/

Saludos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.