Streams inseríveis para MediaStreamTrack

Thomas Steiner

Publicado em: 4 de maio de 2021

No contexto da API Media Capture and Streams a interface MediaStreamTrack representa uma única faixa de mídia em um stream. Normalmente, são faixas de áudio ou vídeo, mas outros tipos podem existir.

Os objetos MediaStream consistem em zero ou mais objetos MediaStreamTrack, que representam várias faixas de áudio ou vídeo. Cada MediaStreamTrack pode ter um ou mais canais. O canal representa a menor unidade de um fluxo de mídia, como um sinal de áudio associado a um determinado alto-falante, como esquerdo ou direito em uma faixa de áudio estéreo.

O que são fluxos inseríveis para `MediaStreamTrack`?

A ideia principal por trás dos fluxos inseríveis para MediaStreamTrack é expor o conteúdo de um MediaStreamTrack como uma coleção de fluxos (conforme definido pela API Streams do WHATWG). Esses fluxos podem ser manipulados para introduzir novos componentes.

Ao conceder aos desenvolvedores acesso direto ao stream de vídeo (ou áudio), eles podem aplicar modificações diretamente a ele. Por outro lado, para realizar a mesma tarefa de manipulação de vídeo com métodos tradicionais, os desenvolvedores precisam usar intermediários, como elementos <canvas>. Para mais detalhes sobre esse tipo de processo, confira, por exemplo, vídeo + tela = mágica.

Suporte ao navegador

Os fluxos inseríveis para MediaStreamTrack são compatíveis com o Chrome 94 e versões mais recentes.

Casos de uso

Os casos de uso para fluxos inseríveis para MediaStreamTrack incluem, entre outros:

Gadgets de videoconferência, como "chapéus engraçados" ou planos de fundo virtuais.
Processamento de voz, como vocoders de software.

Como usar fluxos inseríveis para `MediaStreamTrack`

Detecte recursos de fluxos inseríveis para compatibilidade com MediaStreamTrack da seguinte forma.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Principais conceitos

Os fluxos inseríveis para MediaStreamTrack se baseiam em conceitos propostos anteriormente pelo WebCodecs e dividem conceitualmente o MediaStreamTrack em dois componentes:

O MediaStreamTrackProcessor, que consome a origem de um objeto MediaStreamTrack e gera um fluxo de frames de mídia, especificamente objetos VideoFrame ou AudioFrame. Pense nisso como um coletor de rastreamento capaz de expor os frames não codificados da faixa como um ReadableStream.
O MediaStreamTrackGenerator, que consome um stream de frames de mídia e expõe uma interface MediaStreamTrack. Ele pode ser fornecido a qualquer coletor, assim como uma faixa de getUserMedia(). Ele usa frames de mídia como entrada.

O `MediaStreamTrackProcessor`

Um objeto MediaStreamTrackProcessor expõe uma propriedade, readable. Ele permite a leitura dos frames do MediaStreamTrack. Se a faixa for de vídeo, os blocos lidos de readable serão objetos VideoFrame. Se a faixa for de áudio, os blocos lidos de readable serão objetos AudioFrame.

O `MediaStreamTrackGenerator`

Um objeto MediaStreamTrackGenerator também expõe uma propriedade, writable, que é um WritableStream que permite gravar frames de mídia no MediaStreamTrackGenerator, que é um MediaStreamTrack. Se o atributo kind for "audio", o fluxo vai aceitar objetos AudioFrame e falhar com qualquer outro tipo. Se o tipo for "video", o fluxo vai aceitar objetos VideoFrame e falhar com qualquer outro tipo. Quando um frame é gravado em writable, o método close() do frame é invocado automaticamente, para que os recursos de mídia não sejam mais acessíveis do JavaScript.

Um MediaStreamTrackGenerator é uma faixa para a qual uma fonte personalizada pode ser implementada gravando frames de mídia no campo writable.

Resumo geral

A ideia principal é criar uma cadeia de processamento da seguinte forma:

Rastreamento da plataforma → Processador → Transformação → Gerador → Gravadores da plataforma

O exemplo abaixo ilustra essa cadeia para um aplicativo de leitor de código de barras que destaca o código detectado em um fluxo de vídeo ao vivo.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Demonstração

Você pode conferir a demonstração do leitor de QR code da seção acima em ação em um navegador para computador ou dispositivos móveis. Aponte a câmera para um QR code. O app vai detectar e destacar o código. Confira o código-fonte do aplicativo no GitHub.

Leitor de QR code em uma guia do navegador para computador mostrando um QR code detectado e destacado no smartphone que o usuário segura na frente da câmera do laptop.

Considerações sobre segurança e privacidade

A segurança dessa API depende de mecanismos existentes na plataforma Web. À medida que os dados são expostos usando as interfaces VideoFrame e AudioFrame, as regras dessas interfaces para lidar com dados corrompidos pela origem são aplicadas. Por exemplo, não é possível acessar dados de recursos de origem cruzada devido a restrições existentes no acesso a esses recursos. Não é possível acessar os pixels de um elemento de imagem ou vídeo de origem cruzada. Além disso, o acesso a dados de mídia de câmeras, microfones ou telas está sujeito à autorização do usuário. Os dados de mídia expostos por essa API já estão disponíveis em outras APIs.

Feedback

A equipe do Chromium quer saber sobre suas experiências com fluxos inseríveis para MediaStreamTrack.

Fale sobre o design da API

Há algo na API que não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa implementar sua ideia? Você tem alguma dúvida ou comentário sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub correspondente ou adicione suas ideias a um problema existente.

Informar um problema com a implementação

Você encontrou um bug na implementação do Chromium? Ou a implementação é diferente da especificação? Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível, instruções para reprodução e insira Blink>MediaStream na caixa Componentes.

Suporte para a API

Você planeja usar streams inseríveis para MediaStreamTrack? Seu apoio público ajuda a equipe do Chromium a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles.

Envie um tweet para @ChromiumDev usando a hashtag #InsertableStreams e informe onde e como você está usando.

Links úteis

Agradecimentos

A especificação de fluxos inseríveis para MediaStreamTrack foi escrita por Harald Alvestrand e Guido Urdaneta. Este artigo foi revisado por Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout e François Beaufort.