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

Fecha de publicación:
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

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Comentarios (30) -

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

Jorge Lime
Jorge Lime

Hola anexe el html a un formulario en wordpress y me abre bien la camara y todo pero cuando se envía el formulario no me llega la foto. Me podrías ayudar?


Saludos !

Responder

muchas gracias por compartir, ya lo habia echo pero no he podido mandar fotos directamente de la camara del telefono, lo que tengo que hacer es sacare la foto y despues subirla, no se que hice mal , tendras un ejemplo de como subirlo.
ami me sale cuando cargo el arreglo de file en vacio, y si lo subo por archivo, me sale correcto
dentro de mi archivo html con php
  echo var_dump($_FILES['acuse']);
  echo "<br>";
  echo var_dump($_FILES['servidor']);
  echo $_FILES['acuse']['tmp_name'] . "<br>";
  echo $_FILES['servidor']['tmp_name'] . "<br>";
  echo $_FILES['acuse']['type'] . "<br>";
  echo $_FILES['servidor']['type'] . "<br>";
y si lo saco directamente de la campara me da el archivo $_FILES vacio
gracias por tu apoyo

Responder

excelente recurso!

Responder

Hola. acabo de hacer una prueba en Android  y funciona excelente, pero cuando trato de abrir la cámara en un dispositivo IOS abre la cámara en negro. será un problemas de permisos de Iphone? me puede ayudar con eso por favor?

saludos

Responder

campusMVP
campusMVP

Hola Alex:

Debe de ser una cuestión de permisos. Vete a Ajustes>Privacidad>Cámara y habilita el acceso para Safari ahí.

Saludos.

Responder

Esto tambien sirve para safari y para el browser safaro del movil? ...

Puedo acceder a la camara de mi dispositivo movil desde el browser de safari?

Responder

campusMVP
campusMVP

Hola Ricardo:

Sí, funciona en todos los navegadores y sistemas operativos desde hace años.

Saludos.

Responder

Hola Eduard, muchas gracias por el artículo.

Lo acabamos de implementar ahora en 2020 en un sitio web con Laravel y PHP y se ve que "algo" ha cambiado en Android porque si dejamos el "capture" nos abre en el celu (un Note 8 y un Moto) directamente la cámara sin mostrar las opciones para elegir cámara de fotos, de video o galería. Va directo a la cámara de fotos.

Al sacar el capture nos muestra las opciones de  cámara de fotos o galería (no de video), pero aparecen mezcladas con las fotos de la galería y queda feo.

Alguna idea?

Saludos! Sergio

Responder

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

Hola Sergio:

¿Le has quitado el accept="image/*" al input del ejemplo?

Si no se lo quitas le estás indicando que quieres imágenes y entonces sólo te saca la cámara de fotos. Si se lo quitas y le dejas el capture a secas, entonces es cuando te da las opciones, como explica el artículo.

Esto es hoy, con el ejemplo descargable del post, quitándole el atributo accept en un Samsung Galaxy S10+ actualizado a lo último:

p157.p1.n0.cdn.getcloudapp.com/.../...s10-plus.mp4

Como ves muestra las opciones y funciona perfectamente.

Saludos.

Responder

Sergio Vartolo
Sergio Vartolo

Funcionó perfecto.

Muchas gracias!!!

Responder

Muy interesante todo. Gracias por compartir... Tengo 2 consultas por si me pueden ayudar...

a) Qué pasa o como se comporta esta funcionalidad de acceder a la cámara (que opera según comentarion, bien para el Móvil), si la uso desde el browser en el desktop?, y

b) Qué tan complejo podría resultar intentar usar la cámara con esta técnica, para capturar un código de barra o código QR y usarlo en el flujo de mi aplicación web?

Gracias de antemano.

Slds.

Responder

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

Hola Marcelo:

Lo que explica este post es para lograr acceder a la cámara o al sistema de archivos de manera simple y enviar un archivo al servidor, no para hacer procesamiento avanzado. Pones una etiqueta y listo, sólo eso.

Si lo usas en el escritorio lo que ocurre es que sale un diálogo normal de selección de archivos para enviar.

Si quieres hacer procesamiento avanzando de imagen en el cliente necesitarás usar la API de MediaCapture que se menciona al final del post, que es relativamente compleja, y combinándola con el uso de la API de Canvas podrías generar y procesar la imagen que quisieras, incluyendo códgos QR o incluso manejando vídeo en tiempo real entre otras muchas cosas.

Aquí puedes ver la grabación de una charla  que impartí sobre el tema hace un par de años: https://www.youtube.com/watch?v=b0a_aWEBrWA y aquí tienes el código fuente de todos los ejemplos: github.com/jmalarcon/Adv-ImgVideo-With-CSS-JS

Si tienes interés en aprender a fondo JavaScript te recomiendo nuestro curso al respecto: www.campusmvp.es/.../...ript-y-ECMAScript_206.aspx

Saludos!

Responder

Gracias José Manuel, revisaré los links enviados.

Slds.

Marcelo

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.