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

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

Confira mais exemplos de telas e vídeos abaixo.

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 transmitir ao vivo de elementos de tela e mídia:

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

Basicamente, o captureStream() permite que o JavaScript crie e "insira coisas" em um MediaStream.

As letras miúdas

  • A tentativa de usar captureStream() com um elemento de mídia que implementa proteção de conteúdo via Encrypted Media Extensions vai gerar uma exceção.

  • Ao capturar de um <canvas>, a taxa de frames máxima é definida quando captureStream() é chamado. Por exemplo, canvas.captureStream(10) significa que a tela gera entre 0 e 10 fps. Nada é capturado quando nada é renderizado no <canvas>, e 10 fps são capturados mesmo que o <canvas> seja renderizado a 30 fps. 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

Canvas

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