Cómo capturar un MediaStream de un lienzo, un elemento de video o audio

Sam Dutton

El método captureStream() permite capturar un MediaStream desde un elemento <canvas>, <audio> o <video>.

Esto permite grabar, transmitir en vivo a través de WebRTC o combinar con efectos o con otros MediaStream en un <canvas> un flujo de audio o video de cualquiera de estos elementos. En otras palabras, captureStream() permite que MediaStream pase contenido multimedia entre elementos de lienzo, audio o video, o a un RTCPeerConnection o MediaRecorder.

En la siguiente demostración (disponible en los ejemplos de WebRTC), se transmite un MediaStream capturado desde un elemento de lienzo a la izquierda a través de una conexión de pares de WebRTC al elemento de video a la derecha:

(A continuación, encontrarás vínculos a más ejemplos de lienzos y videos).

El código captureStream() es simple.

Para <canvas>:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

Para <video>:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

Pero ¿por qué?

El método captureStream() permite grabar o transmitir en vivo desde elementos de lienzo y multimedia:

  • Graba y transmite la acción en los juegos desde un <canvas>
  • Capturar video desde una cámara y, luego, agregar contenido o efectos adicionales
  • Crear efectos de pantalla en pantalla a partir de varios videos a través de un <canvas>
  • Combina videos e imágenes (de archivos, de una cámara o de ambos) en un <canvas>
  • Video transmitido en vivo que se reproduce desde un archivo
  • Cómo usar un mensaje de audio o video grabado para un video o un mensaje de voz

Básicamente, captureStream() permite que JavaScript construya y "transfiera elementos" a un objeto MediaStream.

La letra chica

  • Si intentas usar captureStream() con un elemento multimedia que implementa la protección de contenido a través de las Encrypted Media Extensions, se arrojará una excepción.

  • Cuando se captura desde un <canvas>, la velocidad de fotogramas máxima se establece cuando se llama a captureStream(). Por ejemplo, canvas.captureStream(10) significa que el lienzo genera entre 0 y 10 FPS. No se captura nada cuando no se pinta nada en el <canvas>, y se capturan 10 FPS incluso si el <canvas> se pinta a 30 FPS. Se registró un error con más debate en la especificación de captureStream.

  • Las dimensiones de un video captureStream() coinciden con el <canvas> en el que se llamó.

Demostraciones

Canvas

Video

Asistencia

  • Canvas captureStream(): Firefox 43 o versiones posteriores; Chrome 50 o versiones posteriores con chrome://flags/#enable-experimental-web-platform-features habilitado, o Chrome 52 o versiones posteriores de forma predeterminada
  • Video y audio captureStream(): Firefox 47; Chrome 52 y versiones posteriores con chrome://flags/#enable-experimental-web-platform-features habilitado, o Chrome 53 y versiones posteriores de forma predeterminada.

Más información