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

Sam Dutton

O método captureStream() permite capturar um MediaStream de 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 pelo WebRTC ou combinado com efeitos ou outros MediaStreams em um <canvas>. Em outras palavras, captureStream() permite que MediaStream transmita mídia de ida e volta entre elementos de tela, áudio ou vídeo, ou para um RTCPeerConnection ou MediaRecorder.

Na demonstração a seguir (disponível nos exemplos do WebRTC), um MediaStream capturado de um elemento de tela à esquerda é transmitido por uma conexão de peer do WebRTC para o elemento de vídeo à direita:

Confira abaixo links para mais exemplos de tela e vídeo.

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ê?

O método captureStream() permite gravar ou fazer uma transmissão ao vivo da tela e dos elementos de mídia:

  • Gravar e transmitir o jogo de um <canvas>
  • Gravar um vídeo com uma câmera e adicionar conteúdo ou efeitos
  • Criar efeitos picture-in-picture de vários vídeos usando um <canvas>
  • Combine vídeos e imagens (de arquivos, uma câmera ou ambos) em um <canvas>
  • Transmitir um vídeo de um arquivo
  • Usar uma mensagem de áudio ou vídeo gravada para um vídeo ou correio de voz

Essencialmente, captureStream() permite que o JavaScript construa e "injete coisas" em uma MediaStream.

As letras miúdas

  • A tentativa de usar captureStream() com um elemento de mídia que implementa a proteção de conteúdo usando Extensões de mídia criptografada gerará uma exceção.

  • Ao capturar de um <canvas>, a taxa de quadros máxima é definida quando captureStream() é chamado. Por exemplo, canvas.captureStream(10) significa que a tela exibe entre 0 e 10 fps. 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ão registrado na especificação captureStream.

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

Demonstrações

Tela

Vídeo

Suporte

  • Canvas captureStream(): Firefox 43 ou mais recente; Chrome 50 ou mais recente com chrome://flags/#enable-experimental-web-platform-features ativado ou Chrome 52 ou mais recente por padrão.
  • Vídeo e áudio captureStream(): Firefox 47; Chrome 52 e versões mais recentes com chrome://flags/#enable-experimental-web-platform-features ativado ou Chrome 53 e versões mais recentes por padrão.

Saiba mais