Aprende a crear tu propia grabadora de video en línea accediendo fácilmente a la cámara y al micrófono de tu usuario.


Hace un par de años, Flash era necesario en su navegador si deseaba interactuar con los dispositivos multimedia del usuario (cámara y micrófono). Hoy, con el constante desarrollo e innovación en las API de JavaScript, WebRTC ha venido a reemplazar el flash obsoleto, por lo que también podrá grabar videos usando la API getUserMedia. En este artículo, le mostraremos 2 formas de grabar un video (y audio) desde la cámara web del usuario usando JavaScript. Para grabar un video usando JavaScript y WebRTC, ambas opciones mencionadas en este artículo usan la biblioteca de código abierto RecordRTC, escrita y mantenida por @ muaz-khan . Para saber más sobre esta biblioteca, visite el repositorio oficial en Github aquí o consulte la demostración oficial de RecordRTC aquí .

Ambos enfoques terminarán generando un Blob en el navegador que contiene el video y el audio de la grabadora, cubriremos básicamente cómo grabar el video en el lado del cliente y un pequeño ejemplo de cómo podría cargar el blob en su servidor usando PHP, sin embargo, no escribiremos mucho sobre la lógica del lado del servidor en este artículo.

Nota

Ambos métodos crearán un video en el formato Webm, por lo que si necesita este video en otro formato, es posible que desee utilizar la lógica del lado del servidor para convertirlos en lo que desee, como ffmpeg.

Habiendo dicho eso, ¡comencemos!

A. Uso de VideoJS Record

Nota

Si no quiere meterse con mucho código configurando filtros de audio, tasas de bits y probablemente muchas cosas que no son de su interés, esta puede ser la mejor solución para implementar una grabadora de video con JavaScript fácilmente. .

La primera opción que tiene para grabar un video en el navegador fácilmente es usar la biblioteca VideoJS Record . Esta biblioteca mantenida por @ collab-project utiliza 3 bibliotecas adicionales para lograr una grabadora de video increíble y muy robusta, cuidando la experiencia del usuario al mismo tiempo. Si está dispuesto a implementar la función de grabar un video con la cámara web, este complemento es exactamente lo que necesita.

Comience por incluir Video.js en su página , VideoJS se ejecuta en la parte superior de esta biblioteca en lugar de una etiqueta de video simple. Luego incluya el registro VideoJS que necesita también una copia de la biblioteca RecordRTC mencionada y proceda con la inicialización. El siguiente fragmento muestra un ejemplo básico de VideoJS que graba video y audio simultáneamente:

Nota

Video.js y VideoJS Record son 2 bibliotecas diferentes. Video.js es un reproductor de video web creado desde cero para un mundo HTML5. VideoJS es un complemento para Video.js que le permite grabar la cámara del usuario con la ayuda de RecordRTC.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Audio/Video Example - Record Plugin for Video.js</title>
        
        <!-- Incluir hoja de estilo (https://videojs.com/) -->
        <link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">

        <!-- Estilo de VideoJS -->
        <link href="../dist/css/videojs.record.css" rel="stylesheet">

        <style>
        /* cambiar el color de fondo del jugador */
        #myVideo {
            background-color: #9ab87a;
        }
        </style>
    </head>
    <body>
        <!-- Crear el elemento de video de vista previa -->
        <video id="myVideo" class="video-js vjs-default-skin"></video>
        
        <!-- Cargar video.js -->
        <script src="../node_modules/video.js/dist/video.min.js"></script>

        <!-- Cargar el núcleo y el adaptador RecordRTC -->
        <script src="../node_modules/recordrtc/RecordRTC.js"></script>
        <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
        
        <!-- Cargar extensión de grabación VideoJS -->
        <script src="../dist/videojs.record.js"></script>
        <script>
        var videoMaxLengthInSeconds = 120;

        // Inicializar el reproductor de video
        var player = videojs("myVideo", {
            controls: true,
            width: 720,
            height: 480,
            fluid: false,
            plugins: {
                record: {
                    audio: true,
                    video: true,
                    maxLength: videoMaxLengthInSeconds,
                    debug: true,
                    videoMimeType: "video/webm;codecs=H264"
                }
            }
        }, function(){
            // imprimir la información de la versión al inicio
            videojs.log(
                'Using video.js', videojs.VERSION,
                'with videojs-record', videojs.getPluginVersion('record'),
                'and recordrtc', RecordRTC.version
            );
        });

        // manejo de errores para getUserMedia
        player.on('deviceError', function() {
            console.log('device error:', player.deviceErrorCode);
        });

        // Manejar eventos de error del reproductor de video
        player.on('error', function(error) {
            console.log('error:', error);
        });

        // El usuario hizo clic en el botón de grabación y comenzó a grabar.
        player.on('startRecord', function() {
            console.log('started recording! Do whatever you need to');
        });

        // la grabación completada por el usuario y la transmisión están disponibles
        // ¡Sube el Blob a tu servidor o descárgalo localmente!
        player.on('finishRecord', function() {

            // el objeto blob contiene los datos registrados que
            // puede ser descargado por el usuario, almacenado en el servidor, etc.
            var videoBlob = player.recordedData.video;

            console.log('finished recording: ', videoBlob);
        });
        </script>
    </body>
</html>

La función de grabador es bastante simple, con la ayuda de Video.js se inicializará un reproductor de video dinámico, luego el plugin mencionado VideoJS crea una extensión para el reproductor de video que le permite grabar con la ayuda de RecordRTC el flujo generado por la cámara del usuario y micrófono.

Nota

Si su usuario no puede pagar una cámara decente, no espere videos 4K :).

VideoJS JavaScript video recorder

Puede ver una demostración en vivo de cómo grabar un video con audio usando VideoJS Record aquí . Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí .

B. Uso de RecordRTC

Si no desea utilizar la primera biblioteca porque la encuentra un poco pesada, incluidas 3 bibliotecas también, puede implementarla en la versión "sin procesar" de RecordRTC. La lógica en sí misma es la misma en este proceso que con la biblioteca anterior. El usuario deberá otorgar acceso a la cámara y al micrófono mediante la API getUserMedia. Con esta transmisión, RecordRTC podrá iniciar la grabación de video. Como se mencionó anteriormente, necesitará los scripts del adaptador RecordRTC y RecordRTC del repositorio oficial de Github , que proporciona compatibilidad entre navegadores para getUserMedia y otras API de navegador utilizadas en el complemento.

Ejemplo final

El siguiente ejemplo muestra cómo implementar una grabadora de inicio / parada básica usando RecordRTC (la versión basada en promesas):

<!-- 1. Incluye botones de acción reproducir / detener -->
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled="disabled">Stop Recording</button>

<!--
    2. Incluir un elemento de video que mostrará la transmisión de video actual
    y también para mostrar el video grabado al final.
 -->
<hr>
<video id="my-preview" controls autoplay></video>

<!-- 
3. Incluya la biblioteca RecordRTC y el último adaptador.
Tenga en cuenta que es posible que desee alojar estos scripts en su propio servidor
-->
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<!-- 4. Inicializar y preparar la lógica de la grabadora de video-->
<script>
    // Almacene una referencia del elemento de video de vista previa y una referencia global a la instancia de la grabadora
    var video = document.getElementById('my-preview');
    var recorder;

    // Cuando el usuario hace clic en iniciar la grabación de video
    document.getElementById('btn-start-recording').addEventListener("click", function(){
        // Desactivar el botón de inicio de grabación
        this.disabled = true;

        // Solicitar acceso a los dispositivos multimedia
        navigator.mediaDevices.getUserMedia({
            audio: true, 
            video: true
        }).then(function(stream) {
            // Mostrar una vista previa en vivo en el elemento de video de la página
            setSrcObject(stream, video);

            // Comience a mostrar la vista previa en el elemento de video
            // y silencia el video para desactivar el problema del eco.
            video.play();
            video.muted = true;

            // Inicializar la grabadora
            recorder = new RecordRTCPromisesHandler(stream, {
                mimeType: 'video/webm',
                bitsPerSecond: 128000
            });

            // Empiece a grabar el video
            recorder.startRecording().then(function() {
                console.info('Recording video ...');
            }).catch(function(error) {
                console.error('Cannot start video recording: ', error);
            });

            // liberar stream al detener la grabación
            recorder.stream = stream;

            // Habilitar el botón para detener la grabación
            document.getElementById('btn-stop-recording').disabled = false;
        }).catch(function(error) {
            console.error("Cannot access media devices: ", error);
        });
    }, false);

    // Cuando el usuario hace clic en Detener grabación de video
    document.getElementById('btn-stop-recording').addEventListener("click", function(){
        this.disabled = true;

        recorder.stopRecording().then(function() {
            console.info('stopRecording success');

            // Recuperar video grabado como blob y mostrarlo en el elemento de vista previa
            var videoBlob = recorder.getBlob();
            video.src = URL.createObjectURL(videoBlob);
            video.play();

            // Dejar de silenciar el video en la vista previa
            video.muted = false;

            // Detener la transmisión del dispositivo
            recorder.stream.stop();

            // ¡Habilite el botón de grabación de nuevo!
            document.getElementById('btn-start-recording').disabled = false;
        }).catch(function(error) {
            console.error('stopRecording failure', error);
        });
    }, false);
</script>

Puedes ver este código en acción en el siguiente fiddle:

RecordRTC es el Santo Grial cuando hablamos de grabar videos en el navegador con JavaScript, sin embargo, aunque algunas cosas son fáciles de configurar, otras pueden ser un poco complicadas de entender e implementar. Esta biblioteca es utilizada por muchos otros, que son básicamente contenedores con configuraciones predefinidas que generalmente funcionan en todos los navegadores (como VideoJS Record). Para obtener más información sobre Record RTC, visite el repositorio oficial en Github .

Guardar el video blob en su servidor

Ambas soluciones mencionadas producirán un Blob manipulable que contiene nuestro video, en nuestro código este blob se denomina como videoBloby deberá enviarlo a su servidor para guardarlo como un video. Puede cargar fácilmente un blob a través de JavaScript usando la API FormData, por ejemplo, con nuestro ejemplo usando la biblioteca VideoJS, podría cargar el blob con el siguiente enfoque:

// la grabación completada por el usuario y la transmisión están disponibles
player.on('finishRecord', function() {
    // el objeto blob contiene los datos registrados que
    // puede ser descargado por el usuario, almacenado en el servidor, etc.
    console.log('finished recording: ', player.recordedData);

    // Cree una instancia de FormData y agregue el parámetro de video que
    // será interpretado en el servidor como un archivo
    var formData = new FormData();
    formData.append('video', player.recordedData.video);
    
    // Ejecuta la solicitud ajax, en este caso tenemos un script PHP muy simple
    // que acepta y guarda el archivo "video" subido
    xhr('./upload-video.php', formData, function (fName) {
        console.log("Video succesfully uploaded !");
    });

    // Función auxiliar para enviar
    function xhr(url, data, callback) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                callback(location.href + request.responseText);
            }
        };
        request.open('POST', url);
        request.send(data);
    }
});

La lógica en el servidor depende totalmente de usted, solo necesita aceptar archivos y recuperar el identificado con el mismo nombre que el parámetro cargado, por ejemplo en nuestro script enviamos el Blob con el nombre "video", entonces usando PHP ( upload-video.php) nuestra lógica de servidor sería tan simple como:

<?php
 
if(isset($_FILES["video"])){
    // Defina un nombre para el archivo
    $fileName = "myvideo.webm";

    // En este caso, el directorio actual del script PHP
    $uploadDirectory = './'. $fileName;
    
    // Mueva el archivo a su servidor
    if (!move_uploaded_file($_FILES["video"]["tmp_name"], $uploadDirectory)) {
        echo("Couldn't upload video !");
    }
}else{
    echo "No file uploaded";
}
 
?>

Esto verificará si hay un archivo cargado en el parámetro "video" y lo escribirá en su servidor, en este caso en el directorio actual del script PHP, creando un archivo llamado myvideo.webm con el contenido grabado en el lado del cliente.

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores