Introducción

Ya estamos aquí con un tercer post sobre tomar fotos con JavaScript. Este tutorial ofrece una nueva característica y es la de dar al usuario elegir cuál cámara usar para tomar la foto. En los posts anteriores únicamente tomaba de la cámara por defecto, y en algunos navegadores (Chrome, cof cof) no permite cambiar la cámara con la que se toma.

Afortunadamente eso no importa, porque podemos obtener la lista de dispositivos y cambiarlos como se nos dé la gana.

Por cierto, este post está más actualizado; usa constantes, querySelector y otras cosas que los anteriores no. Si bien esto no afecta el funcionamiento, nos da un código más bonito y entendible.

Pero basta de hablar, que hablar es de mal gusto; vamos a ver el código.

Versiones anteriores

En caso de que se me haya pasado explicar algo, puedes revisar las versiones anteriores de este post.

Tomar foto con cámara y JavaScript

Tomar foto con cámara y JavaScript v2

Compatibilidad

Compatible y probado con Edge, Firefox y Chrome en la fecha 22 de octubre del 2018. Puedes probarlo tú mismo y dejar en los comentarios si sigue funcionando (debería hacerlo por mucho tiempo).

En las siguientes imágenes he probado este código en el navegador, cubriendo obviamente mi cámara. Pruébalo tú si quieres y verás que funciona como un encanto.

 

Tomar foto con cámara trasera en Android usando Chrome

Tomar foto con cámara trasera en Android usando Chrome

Tomar foto con JavaScript en Firefox

Tomar foto con JavaScript en Firefox

 

Tomar foto con JavaScript en Edge

Tomar foto con JavaScript en Edge

 

Tomar foto con JavaScript en Chrome

Tomar foto con JavaScript en Chrome

Versión en línea

Como siempre, aquí dejo un link en donde puedes probar el proyecto. Si no confías simplemente cubre tu cámara.

Por cierto, puedes descargar el código y probarlo en localhost o en un servidor con https.

Código fuente

Si lo deseas, puedes explorar el código de ejemplo en GitHub. Si más tarde hago actualizaciones podrás verlas directamente ahí. El repositorio está aquí.

Aquí está el código del script:

Es casi igual que el anterior, la lógica no cambia mucho.

Listar dispositivos y poder elegir cámara

Para poder listar los dispositivos llamamos a navigator.mediaDevices.enumerateDevices, lo que devuelve una lista de los mismos, que pueden ser micrófonos y otras cosas.

Si te fijas, estamos llamando dos veces a ese método, ¿por qué? bueno, primero lo llamamos para ver si hay algún dispositivo para comenzar el stream, pero para ese tiempo el usuario no ha dado permisos, por lo que este método únicamente devuelve el id de los dispositivos, más no el nombre. Si no nos da el nombre, no podremos llenar el select de una buena manera.

Una vez que el usuario da permisos, volvemos a llamar a ese método para que nos  dé los dispositivos. Como en este caso ya tenemos permisos, también devolverá el nombre de los mismos. Esto es más que nada por la seguridad.

Cuando hay más de un dispositivo, el select los muestra y al cambiarlos se usa esa cámara.

Seleccionar cámara para tomar foto

Seleccionar cámara para tomar foto

Fetch en lugar de XMLHttpRequest

XMLHttpRequest es una API que ya tiene años. Claro, es el estándar y los frameworks que usamos para hacer peticiones AJAX simplemente son una capa que nos permite interactuar con esta API.

Sin embargo, nosotros no estamos usando ningún framework, así que teníamos que usar XMLHttpRequest, pero ya no más, ahora usamos fetch (pronto escribiré sobre ello), ya que estamos explotando las nuevas características de JS.

Silenciar vídeo

En el código HTML también se hicieron cambios. Se movieron algunos elementos pero lo más importante es que se agregó el atributo muted al elemento <video> por las políticas del navegador Chrome (y tal vez todos lo hagan así). Esto no afecta en nada porque nosotros únicamente mostramos vídeo y no audio, pero igual se tiene que especificar.

El código queda así:

Por cierto, puse unos estilos para que en móviles el vídeo ocupe el ancho de la pantalla pero no se pase más allá.

Código PHP

El código se queda intacto, pero aquí lo pego igualmente.

Conclusión

El código se encuentra comentado para explicarse por sí mismo. Si tienes una duda, comentario o sugerencia puedes usar los comentarios.

Te invito a explorar el código en GitHub, recuerda que dejé el link arriba.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,198 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

59 Comentarios

benjamin rivas · enero 26, 2021 a las 12:55 pm

hola tengo una consulta el escrp funciona muy bien pero cuando lo trabajo de forma local pero cuando lo subo y lo pruebo ya en linea me da un error que es el siguiente:

Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined
at tieneSoporteUserMedia (script.js:8)
at script.js:58
at script.js:163

pense que solo era en un navegador pero es en todos y en los dispositivos que puede ser me puedes ayudar.

Walter · enero 19, 2021 a las 10:28 am

que buen trabajo! y bien explicado, gracuas

Jaime Cifuentes · enero 15, 2021 a las 5:58 pm

Como puedo hacer para que me muestre o se recorte la imagen de la camara, para que se vea apaisado, como si fuera una foto para un id, la version 3 funciona a la perfeccion, pero me gustaria modificarlo para hacer fotos para id

    Zeusjef · enero 26, 2021 a las 6:49 pm

    por el canvas el tamaño del canvas seria el tamaño de la foto

Juan · enero 5, 2021 a las 1:09 pm

Hola buen día, super bueno tu aporte, pero no me funciona al momento de ver la imagen tomada y al revisar en consola me sale un error 405 (Method Not Allowed), te pasó alguna vez? Saludos

    parzibyte · enero 5, 2021 a las 3:02 pm

    Hola. Yo acabo de probar y funciona perfectamente

    Zeusjef · enero 5, 2021 a las 3:12 pm

    Acuérdate que debe estar https

Javier torres · noviembre 25, 2020 a las 8:56 am

Buenas tardes, esta muy bueno el codigo. lo descargue y lo estoy probando intacto como lo tienes en mi servidor. abre la pagina y apatece el boton tomar foto, pero el resto de cosas no aparece. me pide el permiso de usar la camara y se lo doy y no pasa nada. no sale el cuadro donde se ve la camara ni nada. que falto por hacer ?

    parzibyte · noviembre 25, 2020 a las 11:50 am

    Hola. El proyecto está completo, en la demostración funciona bien. Puede ser que sea problema de su servidor

Angel Maldonado · noviembre 20, 2020 a las 11:53 am

Los mensajes son de éxito en la subida de la imagen pero no se guarda la imagen el server y me gustaría saber como guardar la imagen con un texto que provenga de una caja de texto.

Gracias por tu ayuda

Saludos

    Angel Maldonado · noviembre 20, 2020 a las 12:00 pm

    Ya lo pude subir al server, pero la otra pregunta es posible que me puedas ayudar por favor

    Gracias

    parzibyte · noviembre 20, 2020 a las 12:04 pm

    Hola. Con gusto lo ayudo en https://parzibyte.me#contacto
    Saludos 🙂

Eloi · octubre 22, 2020 a las 2:49 am

Hola, seria posible que en lugar de escuchar el click del botón “Tomar foto” se guardara la foto si se hace click en la camara? (en caso de utilizar una camara conectada que disponga de boton para tomar la foto)

    parzibyte · octubre 22, 2020 a las 11:09 am

    Hola. Por el momento no cuento con una cámara para probar, puede probar usted mismo y comentar su resultado
    Saludos 🙂

Daniel Gómez · agosto 4, 2020 a las 8:36 pm

Hola me gustaría saber como guardar la imagen con un texto que provenga de una caja de texto.
Agradezco de antemano tu ayuda.

Ray · julio 31, 2020 a las 6:27 pm

Hola buena tarde, tú código está perfecto y me ayudo muchisimo pero tengo un problemilla con los navegadores en dispositivos iOS, hice mi propia pagina con tu código pero no funciona, pense que algo estaba haciendo mal pero después abrí tu página e igualmente no funciono la camara. Tú has tenido algún inconveniente con dispositivos iOS?
Gracias y Saludos

    parzibyte · julio 31, 2020 a las 9:20 pm

    Así es, algo le pasa a ese sistema operativo que siempre presenta problemas. Intente instalando Google Chrome en esos dispositivos, tal vez así funcione
    Saludos 🙂

Diego · junio 12, 2020 a las 1:25 pm

en celulares iphone o sistema operativo iOS, no reconoce la camara, que se puede cambiar o configurar para que en iOS reconozca la camara?

jorge · abril 19, 2020 a las 6:37 pm

Excelente, muchas gracias por compartir el conocimiento. Felicidades.

Juan Carlos · abril 9, 2020 a las 12:21 pm

Muy buen aporte ya lo probe, pero tengo una duda por favor quisiera que me ayuden.
Logre que la imagen se inserte en la Base de Datos pero de una forma muy rara como muestra el siguiente codigo :

fetch_array();
$id_mesa=$fila[‘Maxid’];

$imagenCodificada = file_get_contents(“php://input”);

if(strlen($imagenCodificada) query($query);
exit($nombreImagenGuardada);

?>

Pero ahora la duda es la siguiente, cuando elimino una imagen y quiero volver a insertar otra imagen este codigo ya no me sirve para nada por que solo inserta imagen en el ultimo “ID”.
Por favor quisiera saber como enviar el “ID” y la imagen al mismo tiempo a este código o tal vez podrian realizar un ejemplo completo de como insertar la imagen (sacada con la cámara) en la base de datos.

    parzibyte · abril 9, 2020 a las 3:42 pm

    Hola. Puedes crear un FormData y enviarlo en lugar de la foto; después sería cosa de obtener los campos separados en PHP y listo.
    Un saludo.

guillrtmo · febrero 19, 2020 a las 1:34 pm

Hola, lo probe y me funciono, el problema que tengo es que en mi celular no me abre el select de la camara, pero si lo abre si ejecuto la pagina en modo incognito, le he dado vueltas pero no encuentro la razon de la falla.

Grovher · diciembre 3, 2019 a las 9:19 am

Me sale este error,
script.js:8 Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined
at tieneSoporteUserMedia (script.js:8)
at script.js:57
at script.js:161

favor de ayudarme

    parzibyte · diciembre 3, 2019 a las 11:59 am

    Si no especificas el navegador y el código que estás usando no puedo ayudarte. Lo que puedo inferir con lo que dices es que de alguna forma navigator no está definido; probablemente estás intentando en un navegador no soportado

    Grovher · diciembre 3, 2019 a las 12:27 pm

    mas detalles del error, en localhost funciona bien (chrome, mozilla) pero subi el codigo a mi servidor web con dominio y me sale esos errores:
    Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined
    at tieneSoporteUserMedia (control.js:1)
    at control.js:39
    at control.js:124

    parzibyte · diciembre 3, 2019 a las 12:52 pm

    Tu dominio tiene https? recuerda que sin https no se puede acceder a la cámara / micrófono. Por otro lado, podrías colocar tu código en gist.github.com o pastebin para analizarlo de mejor manera?
    Saludos

    Grovher · diciembre 3, 2019 a las 2:19 pm

    no tiene https

    parzibyte · diciembre 3, 2019 a las 4:26 pm

    Podrías colocar el código que estás usando en un gist.github.com y poner el enlace aquí, para analizarlo?

    Grovher · diciembre 4, 2019 a las 10:17 am

    era eso! tuve q poner mi servidor web con certificado!, ya funciona y muchas gracias….

    parzibyte · diciembre 4, 2019 a las 10:25 am

    Me agrada escuchar que ya funciona. No olvides compartir y suscribirte. Saludos

Christian Garcia · septiembre 11, 2019 a las 3:39 pm

Heché a andar el código tal cual esta en el post y todo genial solo que en android no me pide permiso de camara

    parzibyte · septiembre 11, 2019 a las 4:01 pm

    Hola, yo lo acabo de probar en Chrome y Firefox y va de maravilla. Intenta actualizar tu navegador, o darle permisos al navegador de igual forma, pues tal vez en una ocasión el navegador (Como app de Android) pidió permiso para acceder a la cámara y lo denegaste, por lo que ahora lo deniega en este código de JavaScript

emmanuel ramirez · abril 30, 2019 a las 9:13 pm

tengo conectada una cámara FUL HD, pero aun así las fotos salen con poca calidad, como podemos agrandar el tamaño de la imagen para ver si se puede mejorar la calidad.
por cierto, batalle demasiado para que me guardara la imagen una ves tomada, el error me salia en los headers, y esto provocaba un error 403 en el js, la solución es la siguiente:

headers: {
“Content-Type”: ‘text/plain; charset=”utf-8″‘,
“Content-type”: “application/x-www-form-urlencoded”,
}

Saludos un fuerte abrazo

Sisco · abril 30, 2019 a las 4:31 am

Hola de nuevo, no veo el comentario que he hecho esta mañana…
Que debo hacer para que salga por defecto la cámara posterior ?

Un saludo y gracias por la información que nos facilitas.

    parzibyte · abril 30, 2019 a las 12:36 pm

    Hola, siento la espera, pero como todo ser humano necesito dormir y como usted se ha de imaginar nadie me paga para mantener el blog, todo lo hago cuando tengo tiempo libre. Saludos 🙂

    Pd: ya respondí la cuestión técnica en su anterior pregunta

Sisco · abril 30, 2019 a las 3:33 am

Hola, el blog perfecto.
La versión 3 funcionar perfectamente.
Puedes indicarme que debo hacer para que por defecto utilizemos la cámara posterior del móvil.

Gracias

    parzibyte · abril 30, 2019 a las 12:35 pm

    Hola. Los dispositivos están en un arreglo, normalmente el primero es el de la cámara frontal (arreglo[0]) y por lo tanto, en caso de existir, el segundo está en arreglo[1]; basta con tomar el segundo elemento del arreglo en lugar del primero al llamar por primera vez a getUserMedia

    Sisco · abril 30, 2019 a las 1:26 pm

    perfecto, he modificado la línea:
    mostrarStream(dispositivosDeVideo[0].deviceId);
    Al poner un [1] me ha mostrado la cámara trasera.
    Muchas gracias
    Un saludo

Daniel · abril 23, 2019 a las 4:54 pm

Hola, he probado el código y en versión PC no hay problema, en Android tampoco pero en IOS no va, usando Safari o el Chrome no deja seleccionar. Me he dado cuenta que es la detención de las cámaras, que no lo hace. Si se quita la opción de las cámaras si funciona. Es IOS 12, ¿ Alguna idea ?

    parzibyte · abril 23, 2019 a las 5:01 pm

    Tendríamos que analizar el mensaje de error que aparece. Me parece raro que no funcione incluso con Chrome, pero como te digo, la única pista que podemos obtener es a través del mensaje de error que lance el navegador. ¿Has dado acceso a los navegadores para acceder a la cámara? (no sé cómo maneja la privacidad iOs por eso pregunto), por otro lado, tal vez sea el propio navegador con eso de los prefijos

    Daniel · abril 23, 2019 a las 5:09 pm

    La cuestión es que no da error, simplemente el cuadro de selección de la cámara aparece vacío y deja sin efecto el botón de “tomar foto”. En Safari y en chrome está habilitado el uso de la cámara y funciona con otros ejemplos pero sólo sin seleccionar cámara, coge la frontal. Además, he quitado navigator.webkitGetUserMedia y detecta y muestra que el navegador no es compatible. He probado con ipod, ipad y iphone y da lo mismo el navegador por lo que interpreto que es del sistema pero no se me ocurre el qué. Gracias

    Jair · septiembre 23, 2020 a las 11:55 am

    Amigo como le quitaste la opcion de las camaraS?

Zeusjef · febrero 8, 2019 a las 12:58 pm

hombre, tengo un problema, en pc esta funcionando perfectamente, pero si lo pasamos al móvil no carga y no puedo darle permisos al dispositivo para acceder a la cámara local mente por tu link de ejemplo se puede pero no en mi localhost, no se si tengo que poner certificado o algo quiero que me aclares que es lo que falta para que funciona

sino otro particular de agradecerte tu atención.

    parzibyte · febrero 8, 2019 a las 1:26 pm

    Hola, la página a la que accedes debe ser localhost o una página con HTTPS. Cuando accedes a localhost desde tu PC (la cual actúa como servidor), es localhost; pero cuando accedes desde tu móvil (incluso si es una LAN) accedes a otra IP (la de tu máquina) que no tiene HTTPS ni es localhost así que no tiene acceso. Por otro lado, si accedes al link que yo pongo, sí te lo permite porque tiene HTTPS.
    En resumen, no puedes conectar a otro lugar que no tenga https o no sea “localhost”, puedes instalar un certificado SSL en localhost (cosa que a mi parecer es un poco compleja), rentar un dominio en internet con https o montar directamente la app en el móvil (suponiendo que es Android) como se ve aquí: https://parzibyte.me/blog/2018/11/14/aplicacion-web-php-mysql-sobre-android/
    Saludos 🙂

    Zeusjef · febrero 14, 2019 a las 9:31 am

    pues sep hombre con un poco de esfuerzo pude lograr hacerlo andar en un servidor local con ssl autofirmados y funciona perfectamente

    parzibyte · febrero 14, 2019 a las 9:33 am

    Me da gusto que haya funcionado 🙂

Alexis · diciembre 11, 2018 a las 8:42 am

Hola tengo una duda si le incluyo dos input tipo text y quiero que el archivo se guarde con lo que ingresé en los cuadro de texto que método debo emplear?

    parzibyte · diciembre 11, 2018 a las 9:23 am

    Hola, crea tu formulario normalmente y añade en él un input de tipo hidden. En los eventos de la cámara, toma el base64 del canvas y ponlo como cadena en el input que mencioné anteriormente; en el lado del servidor simplemente decodifica esa cadena y listo.

Luis · noviembre 24, 2018 a las 1:57 pm

Gracias por el aporte, consulta como puedo aumentar la resolución de la foto, por defecto lo deja en 640×480, me gustaria fueran unos 800×600 además de hacer un zoom y porque la camara es un “escanner con brazo”, que es realizada es un dispositivo de imagen modificado.

Gracias

    parzibyte · noviembre 25, 2018 a las 9:34 pm

    Hola, no lo sé, pero la resolución depende de la cámara. Lo que podrías hacer sería acercar la imagen o agrandar el vídeo

Luis Fernando · octubre 25, 2018 a las 9:23 pm

Como seria para pasar la imagen tomada a un input de tipo file?

    parzibyte · octubre 26, 2018 a las 12:05 pm

    Hola, no lo sé, sería de investigar aunque no le encuentro utilidad. Si deseas que se envíe como si fuera un formulario usa la API de FormData en donde puedes añadir muchos valores y enviarlos por AJAX

    Dawud · enero 10, 2019 a las 7:10 pm

    Hola, no se puede asignar una imagen a un elemento input file…

    parzibyte · enero 10, 2019 a las 8:06 pm

    No lo sé, pero si se desea que se envíe en el formulario, se podría codificar como base64 y luego asignarlo a un elemento de tipo hidden para más tarde decodificarlo del otro lado

Grabar vídeo de cámara con JavaScript - Parzibyte's blog · junio 3, 2019 a las 5:57 pm

[…] través del tiempo hemos visto cómo tomar fotos con JavaScript (así como enviarlas a un servidor con PHP) y cómo grabar el audio del micrófono (o guardarlo en un […]

Tomar foto de cámara web con JavaScript y descargarla como imagen - Parzibyte's blog · mayo 6, 2019 a las 10:52 am

[…] mi blog he hecho varios posts sobre tomar fotos con la cámara web desde JavaScript, para enviarlas a PHP; pero nunca he hecho un ejemplo sin usar […]

Tomar foto con Javascript y cámara para guardarla en servidor PHP - Parzibyte's blog · octubre 22, 2018 a las 10:21 am

[…] Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí. […]

Tomar foto de cámara web con Javascript, actualizado - Parzibyte's blog · octubre 22, 2018 a las 10:21 am

[…] Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí. […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: