Tomar foto de cámara web con JavaScript y descargarla como imagen

Publicado por parzibyte en

Tomar foto con JavaScript y descargarla como imagen PNG

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

Es por ello que hoy voy a explicar cómo tomar una foto de la cámara web (igualmente de la cámara trasera o delantera en los dispositivos compatibles) y guardarla o descargarla directamente como archivo, sin usar código del servidor.

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto con JavaScript y descargarla como imagen PNG

El código para tomar la foto funciona en varios dispositivos con un navegador actualizado, desde teléfonos y tabletas Android, iPads y más.

Aplicación demostrativa y código fuente

Para probar la app accede a este enlace, y para ver el código fuente completo (ya que a través del post explicaré los detalles más importantes únicamente) mira el repositorio en Github.

Recuerda que para alojarla debes usar un servidor con https o localhost.

Código HTML

Me he esforzado en hacer el código HTML lo más corto posible. En resumen solamente necesitamos un elemento <video> para mostrar el stream y un canvas (que mantenemos oculto, y que podría ser creado dinámicamente).

Eso es todo el código de la vista, es momento de ver el código JavaScript.

Pedir permiso para acceder a la cámara y obtener stream

Para tomar la foto usamos la API de JavaScript llamada getUserMedia, la cual está disponible desde hace bastante tiempo y si bien no está estandarizada, varios navegadores ofrecen soporte para la misma.

Para pedir permisos llamamos a getUserMedia pasándole 3 argumentos:

  1. Un objeto con las propiedades de lo que queremos, por ejemplo, audio o vídeo
  2. Una función en caso de éxito, es decir, en caso de que se otorgue el permiso y haya cámaras
  3. Una función en caso de error en caso de que no se produzca un error técnico o el permiso se haya denegado

Dentro de la función de éxito será pasado un argumento que es el stream obtenido, el cual ponemos sobre un vídeo (sí, un elemento <video>) y reproducimos; de esta manera el usuario estará viendo un vídeo que tiene como fuente su cámara.

La lista de dispositivos para permitir el cambio de cámaras

Esta API también ofrece una manera de obtener la lista de dispositivos existentes, de esta manera podemos intercambiar entre la cámara frontal y trasera (o más cámaras en caso de que existan).

La lista tiene, entre otras cosas, un deviceId. Ese deviceId se pasa a getUserMedia y se devolverá el stream adecuado.

Casi lo olvido: para obtener la lista se llama a la función navigator.mediaDevices.enumerateDevices.

Después de obtener la lista, los dispositivos se ponen en un elemento de tipo select. En el cambio del mismo se vuelve a obtener el stream (después de detener los demás) y se monta sobre el vídeo.

Tomar foto

Con lo que llevamos hasta ahora tenemos un select que permite intercambiar entre distintas cámaras, además de mostrar el vídeo en un elemento <video>; lo que sigue es usar un elemento <canvas> o lienzo para tomar la foto.

El proceso es sencillo. Se pausa el vídeo y se dibuja la imagen que tiene sobre el canvas; una vez hecho eso podemos obtener la imagen como base 64, y cuando la tenemos en ese formato solo resta descargarla creando un enlace.

Conclusión

En este ejemplo tomamos una foto con la cámara web y descargamos la imagen; si quieres ver cómo enviarla a PHP mira este ejemplo.

Los usos que puedes darle al consumo de estas APIs son muchísimos, una vez que ya tienes la foto puedes mostrarla en un elemento <img>, procesarla o cualquier cosa que tu app requiera.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: