Capturar um MediaStream de um elemento de tela, vídeo ou áudio

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 MediaStreams 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 quando captureStream() é 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ção captureStream.

  • as dimensões de um vídeo captureStream() correspondem ao <canvas> em que ele foi chamado.

Demonstrações

Tela

Video

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.

Saiba mais