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

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

Esto permite que una transmisión de video o audio de cualquiera de estos elementos se grabe, transmita en vivo a través de WebRTC o combine con efectos u otros MediaStream en una <canvas>. En otras palabras, captureStream() permite que MediaStream transfiera contenido multimedia de un lado a otro entre elementos de lienzo, audio o video, o a RTCPeerConnection o MediaRecorder.

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

(A continuación, encontrarás vínculos para ver 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 el juego desde un <canvas>
  • Captura video de una cámara y, luego, agrega contenido o efectos adicionales
  • Crea efectos de pantalla en pantalla a partir de varios videos mediante un <canvas>.
  • Combina videos e imágenes (de archivos, de una cámara o de ambos) en un <canvas>.
  • Video de una transmisión en vivo reproducido desde un archivo
  • Usa un mensaje de audio o video grabado para un mensaje de video o de voz

En esencia, captureStream() permite que JavaScript construya e "inyecte elementos" en un MediaStream.

La letra pequeña

  • Si intentas usar captureStream() con un elemento multimedia que implemente protección de contenido mediante extensiones de medios encriptados, se arrojará una excepción.

  • Cuando se realiza una captura desde un <canvas>, la velocidad máxima de fotogramas 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 la <canvas>, y se capturan 10 FPS, incluso si la <canvas> se pinta a 30 FPS. Se presentó un error con más análisis en la especificación de captureStream.

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

Demostraciones

Lienzo

Video

Asistencia

  • Canvas captureStream(): Firefox 43 o versiones posteriores; Chrome 50 y versiones posteriores con chrome://flags/#enable-experimental-web-platform-features habilitado o Chrome 52 y 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