A 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 servidor).
En este post vamos a ver la “unión” de esas operaciones para grabar un vídeo con JavaScript.
El vídeo que vamos a grabar será tomado de la cámara web en caso de que sea una portátil, o de la cámara de un teléfono o tableta.
También podremos capturar vídeo de cualquier otra cámara, al igual que el audio. Por ejemplo, en los móviles vamos a elegir entre la cámara trasera o la frontal.
Lo que haremos será ver cómo acceder a la cámara y al micrófono, grabar el audio y el vídeo para descargar finalmente el vídeo que grabamos.
En el post voy a explicar los puntos más importantes del código, pero una demostración que puedes probar dentro del navegador se encuentra en este enlace. Por otro lado, el código fuente completo está en mi perfil de GitHub.
Ah, dentro del código utilizo funciones flecha y plantillas de cadena. No es la gran cosa pero te recomiendo leer sobre las mismas, harán que aprendas JavaScript moderno y no te llevará mucho tiempo entenderlas.
Para acceder a la cámara y al micrófono para grabar el vídeo se necesita servir la app web en localhost o en un servidor con https.
No todos los navegadores son compatibles con MediaRecorder o getUserMedia, por eso es que existe esta función para comprobar si tiene permiso:
Necesitamos llenar dos elementos select
: el de la lista de micrófonos y el de la lista de vídeos. Para eso llamamos a enumerateDevices
que traerá la lista.
Recorremos el arreglo y filtramos: si es un elemento de tipo audioinput lo ponemos en el select de micrófonos y en caso de que sea videoinput en el select de cámaras.
Cuando la lista está llena y el botón sea presionado, comenzamos la grabación. Llamamos a getUserMedia
(que va a pedir permiso de acceso al micrófono y a la cámara web) pasándole un objeto con el id del dispositivo de audio y el id del dispositivo de vídeo.
En caso que todo salga bien (el usuario cuente con una cámara y un micrófono, y se conceda el permiso) entonces la promesa que devuelve getUserMedia
se resuelve y trae consigo un stream.
Ese stream lo ponemos como fuente de un vídeo, pero además de ello, creamos un objeto de tipo MediaRecorder
con el mismo stream y comenzamos un conteo de tiempo.
Un paso muy importante es llamar a la función start
del objeto MediaRecorder
que hemos creado, pues eso comienza la grabación del audio y vídeo.
El objeto de MediaRecorder
va a emitir el evento “dataavailable
” que, cuando se desencadene, traerá datos de la grabación que colocamos en un arreglo.
Mostramos el stream en un elemento de tipo video
pero no es necesario, solo lo hacemos para que el usuario vea una “previsualización”, pero bien podríamos quitarlo, ya que la grabación se hace con MediaRecorder.
Para detener la grabación llamamos al método stop
. Eso desencadenará el evento stop
del objeto de MediaRecorder, al que debemos suscribirnos.
Dentro del mismo pausamos el vídeo, convertimos los fragmentos de la grabación en un blob y descargamos el vídeo grabado en formato webm.
El vídeo debe tener el formato webm por eso de los códecs libres y los formatos; además de que no todos los formatos son compatibles con todos los navegadores.
Tenemos algunas utilidades. Por ejemplo, una de ellas limpia un select, otra convierte el tiempo transcurrido a una cadena legible y finalmente otra se encarga de la cuenta de la duración del vídeo:
El script de JavaScript y la vista HTML actualizados se encuentran en mi GitHub. Para probar la app visita este enlace.
La grabación de vídeo con JavaScript y getUserMedia es compatible con los navegadores más populares: Chrome y Firefox; lo he probado en Android y Windows 10.
Gracias a estas APIs podemos agregar más funcionalidades a nuestras webapps accediendo al hardware que tiene el dispositivo.
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
Esta web usa cookies.
Ver comentarios
Excelente, me fue de muchisima utilidad tu explicación y código.
Muchas Gracias.
Recuerda compartir y seguirme, así me motivas a escribir más tutoriales.
Saludos
Que excelente post!! te felicito por el aporte, tengo una duda, si quisiera que el video no despliegue la ventana para guardar sino que automáticamente se aloje en el servidor para guardar su enlace en una Bd se podría hacer?
Gracias por tus comentarios. Aquí tienes:
https://parzibyte.me/blog/2019/06/04/grabar-video-javascript-enviarlo-php/
No olvides seguirme y compartir