Esta página foi traduzida pela API Cloud Translation.

Streams inseríveis para MediaStreamTrack

O conteúdo de um MediaStreamTrack é exposto como um stream que pode ser manipulado ou usado para gerar conteúdo novo.

Thomas Steiner

Contexto

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 transmissões 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. Em contraste, 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`

Detecção de recursos

É possível detectar recursos de fluxos inseríveis para compatibilidade com MediaStreamTrack da seguinte maneira.

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. Isso 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 em que 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:

Platform Track → Processor → Transform → Generator → Platform Sinks

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 execução na 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. Como 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 origens diferentes devido a restrições atuais no acesso a esses recursos. Não é possível acessar os pixels de um elemento de imagem ou vídeo de origem diferente. 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 esperado? 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 simples para reprodução e insira Blink>MediaStream na caixa Componentes.

Mostrar 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

As transmissões inseríveis para a especificação MediaStreamTrack foram escritas por Harald Alvestrand e Guido Urdaneta. Este artigo foi revisado por Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout e François Beaufort. Imagem principal de Chris Montgomery no Unsplash.