Esta es la continuación del post en donde vimos cómo grabar un vídeo (con audio incluido) usando JavaScript accediendo a la cámara web y al micrófono.

En ese mismo post tenemos enlaces a tutoriales para:

Grabar vídeo de cámara con JavaScript y subirlo a PHP usando MediaRecorder, fetch, getUserMedia y FormData

Grabar vídeo de cámara con JavaScript y subirlo a PHP usando MediaRecorder, fetch, getUserMedia y FormData

Así que es momento de grabar un vídeo con JavaScript pero enviar el resultado a un servidor con PHP.

Código fuente

El código fuente está en mi GitHub. Recomiendo encarecidamente que mires el post anterior, pues esta será una modificación que enviará el vídeo grabado a PHP en lugar de descargarlo.

Si no tienes PHP mira en este post cómo se instala.

Subir vídeo a PHP

La parte que se modifica es en donde se descarga el vídeo. En lugar de descargarlo, se envía el BLOB con fetch y formdata.

En el evento stop del objeto de MediaRecorder se ejecuta el siguiente código:

Creamos un objeto de FormData y usamos fetch para su envío utilizando el método POST de HTTP.

La respuesta (que veremos con el código de PHP) es el nombre del vídeo que ha sido guardado en el disco duro; con el nombre del vídeo creamos un enlace para que el usuario pueda abrir el vídeo que acaba de grabar.

Recibir y guardar vídeo con PHP

En el lado del servidor recibimos el archivo en el arreglo superglobal de $_FILES, como vimos en un post pasado.

Calculamos un nombre único (es para ejemplificar, pero podríamos guardarlo en otro lugar, en otra ruta, mandarlo a otro servidor, etcétera) y lo escribimos en el disco.

Al final, imprimimos el nombre del vídeo grabado, que será la respuesta de la petición de JavaScript:

Si miramos los archivos, en el disco duro estarán los vídeos grabados con JavaScript:

Lista de vídeos grabados con JavaScript subidos a PHP

Lista de vídeos grabados con JavaScript subidos a PHP

Además, si hacemos click en el enlace que se crea del lado del cliente, se abrirá el vídeo:

Reproducir vídeo guardado con PHP

Reproducir vídeo guardado con PHP

Poniendo todo junto

Para pedir permisos, llenar las listas de micrófonos y cámaras se utiliza el código que vimos en el post anterior; lo único que cambiamos es el funcionamiento del evento stop del objeto de tipo MediaRecorder.

Del lado del servidor recibimos un archivo y lo guardamos.

Recuerda que el código completo y actualizado se encuentra en GitHub.


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 4,207 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/

4 Comentarios

Jermaine · noviembre 4, 2020 a las 11:20 am

Hola saludos, gran aporte amigo.

Una consulta: ¿Cómo se le puede poner un tiempo máximo a la duración y que se guarde automáticamente, una vez completado el tiempo?

tao · marzo 30, 2020 a las 7:25 am

Estoy probando con php 7 y parece no funcionar. Me puedes ayudar?

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

A %d blogueros les gusta esto: