JavaScript: tomar foto con cualquier cámara (frontal y trasera)

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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

65 comentarios en “JavaScript: tomar foto con cualquier cámara (frontal y trasera)”

  1. Muy bueno, ya me funciona bien para capturar cámara y guardar, pero al usarlo en celular, a pesar que selecciona ambas cámaras, frontal y facing. No me funciona tomar foto con cámara frontal, solo funciona con cámara de selfies. Hay alguna linea de codigo para que funcionen ambas cámaras con celular?

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

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

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

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

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

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

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

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

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

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

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

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

  8. Pingback: Grabar vídeo de cámara con JavaScript - Parzibyte's blog

  9. Pingback: Tomar foto de cámara web con JavaScript y descargarla como imagen - Parzibyte's blog

  10. emmanuel ramirez

    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

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

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

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

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

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

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

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

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

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

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

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

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

  14. Pingback: Tomar foto con Javascript y cámara para guardarla en servidor PHP - Parzibyte's blog

  15. Pingback: Tomar foto de cámara web con Javascript, actualizado - Parzibyte's blog

Dejar un comentario