O método captureStream()
possibilita
a captura de uma MediaStream
usando um elemento <canvas>
,
<audio>
ou <video>
.
Isso permite que um stream de vídeo ou áudio de qualquer um desses elementos seja gravado,
transmitido ao vivo por WebRTC ou combinado com efeitos ou outros MediaStream
s em um
<canvas>
. Em outras palavras, captureStream()
permite que o MediaStream
transmita
mídias entre elementos de tela, áudio ou vídeo, ou para um
RTCPeerConnection
ou MediaRecorder
.
Na demonstração a seguir (disponível nos
exemplos de WebRTC,
um MediaStream
capturado de um elemento de tela à esquerda é transmitido por uma
conexão de peering do WebRTC para o elemento de vídeo à direita:
Veja abaixo links para mais exemplos de telas e vídeos.
O código captureStream()
é simples.
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;
};
Mas por quê?
Com o método captureStream()
, é possível
gravar ou
transmitir ao vivo de elementos de tela
e de mídia:
- Grave e faça streaming de jogos no
<canvas>
- Grave um vídeo com uma câmera e adicione mais conteúdo ou efeitos
- Crie efeitos picture-in-picture de vários vídeos usando um
<canvas>
. - Combinar vídeos e imagens (de arquivos ou de uma câmera ou ambos) em um
<canvas>
- Transmissão ao vivo de vídeo reproduzido em um arquivo
- Usar uma mensagem de áudio ou vídeo gravada em uma mensagem no correio de voz
Basicamente, captureStream()
permite que o JavaScript construa e "injete
"conteúdo" em um
MediaStream.
As letras pequenas
A tentativa de usar
captureStream()
com um elemento de mídia que implementa a proteção de conteúdo por Extensões de mídia criptografada vai gerar uma exceção.Ao capturar de um
<canvas>
, o frame rate máximo é definido quandocaptureStream()
é chamado. Por exemplo,canvas.captureStream(10)
significa que a tela gera entre 0 e 10 QPS. Nada é capturado quando nada é pintado no<canvas>
, e 10 QPS são capturados, mesmo que o<canvas>
seja pintado a 30 QPS. Há um bug com mais discussões (em inglês) registrado na especificaçãocaptureStream
.as dimensões de um vídeo
captureStream()
correspondem ao<canvas>
em que ele foi chamado.
Demonstrações
Tela
- Fazer streaming de um elemento de tela para um elemento de vídeo
- Fazer streaming de um elemento de tela para uma conexão de peering
Video
- Fazer streaming de um elemento de vídeo para um elemento de vídeo
- Fazer streaming de um elemento de vídeo para uma conexão de peering
Suporte
- Canvas
captureStream()
: Firefox 43 ou mais recente, Chrome 50 e mais recentes com chrome://flags/#enable-experimental-web-platform-features ativado ou Chrome 52 e mais recente por padrão. - Vídeo e áudio
captureStream()
: Firefox 47, Chrome 52 ou mais recente com chrome://flags/#enable-experimental-web-platform-features ativado ou Chrome 53 e mais recente por padrão.