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 acaptureStream()
. 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 decaptureStream
.Las dimensiones de un video
captureStream()
coinciden con el<canvas>
en el que se llamó.
Demostraciones
Lienzo
- Cómo transmitir desde un elemento de lienzo a un elemento de video
- Transmisión desde un elemento de lienzo a una conexión de pares
Video
- Transmite desde un elemento de video a uno de video
- Transmisión desde un elemento de video a una conexión de pares
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.