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

Sam Dutton

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

Esto permite que se grabe una transmisión de audio o video de cualquiera de estos elementos, se transmita en vivo a través de WebRTC o se combine con efectos o con otros MediaStream en un <canvas>. 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 muestras de WebRTC), un MediaStream capturado de un elemento de lienzo a la izquierda se transmite a través de una conexión de pares de WebRTC al elemento de video a la derecha:

(Más abajo, 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 el lienzo y los elementos multimedia:

  • Graba y transmite partidas de juegos desde un <canvas>
  • Captura un video desde una cámara y, luego, agrega contenido o efectos adicionales
  • Crea efectos de pantalla en pantalla a partir de varios videos con un <canvas>
  • Combina imágenes y videos (de archivos, una cámara o ambos) en un <canvas>
  • Transmisión en vivo de videos reproducidos desde un archivo
  • Usa un mensaje de audio o video grabado para un video o un buzón de voz

En esencia, captureStream() permite que JavaScript construya y “inyecte contenido” en una MediaStream.

La letra pequeña

  • Si intentas usar captureStream() con un elemento multimedia que implementa la protección de contenido a través de las Extensiones de medios encriptados, 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 <canvas>, y se capturan 10 fps, incluso si <canvas> se pinta a 30 fps. Hay un error con más información registrado en la especificación de captureStream.

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

Demostraciones

Lienzo

Video

Asistencia

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

Más información