Noções básicas de streaming de mídia

Derek Herman

Jaroslav Polakovič

Neste artigo, você aprenderá sobre o conceito mais avançado de streaming de mídia e, no final, terá uma boa compreensão dos vários casos de uso, protocolos e extensões de streaming. Vamos começar com uma explicação do que realmente é streaming.

O streaming de mídia é uma maneira de entregar e reproduzir o conteúdo de mídia por parte. Em vez de carregar um único arquivo, que pode ser lento se não estiver otimizado para a rede, o player lê um arquivo de manifesto descrevendo como a mídia de destino é dividida em blocos de dados individuais. Os blocos de mídia são posteriormente agrupados dinamicamente durante a execução, provavelmente em taxas de bits diferentes, que você aprenderá mais tarde.

Lembre-se de que, para oferecer streaming no site, o servidor precisa ser compatível com o cabeçalho de solicitação HTTP Range. Saiba mais sobre o cabeçalho Accept-Ranges no artigo Tags <video> e <source>.

Casos de uso de streaming

A produção de blocos de mídia e os manifestos necessários que descrevem o stream não é exatamente simples, mas o streaming desbloqueia alguns casos de uso interessantes que não podem ser alcançados apenas apontando um elemento <video> para um conjunto de arquivos de origem estáticos. Você aprenderá mais sobre como adicionar mídia a uma página da Web em uma seção posterior. Primeiro, você precisa conhecer alguns casos de uso de streaming multimídia se quiser ir além do carregamento de vários arquivos no elemento <video>.

• O streaming adaptável é onde os blocos de mídia são codificados em várias taxas de bits, e o bloco de mídia de mais alta qualidade que se encaixa na largura de banda atualmente disponível do cliente é retornado ao player de mídia.
• A transmissão ao vivo é onde os blocos de mídia são codificados e disponibilizados em tempo real.
• A injeção de mídia é quando outras mídias, como anúncios, são injetadas em um stream sem que o player precise mudar a fonte de mídia.

Protocolos de streaming

Os dois protocolos de streaming mais usados na Web são o Dynamic Adaptive Streaming over HTTP (DASH) e o HTTP Live Streaming (HLS). Os players com suporte a esses protocolos vão buscar o arquivo de manifesto gerado, descobrir quais blocos de mídia serão solicitados e combiná-los na experiência de mídia final.

Como usar o <video> para abrir uma transmissão

Muitos navegadores não reproduzem sua transmissão de forma nativa. Embora haja algum suporte nativo para a reprodução com HLS, os navegadores geralmente não oferecem suporte à reprodução de streaming de DASH nativo. Muitas vezes, isso significa que não é suficiente simplesmente apontar o <source> no elemento <video> para um arquivo de manifesto.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

O que pode parecer um déficit é, na verdade, uma força disfarçada. Os streams são potentes, e os aplicativos que consomem streams têm necessidades diferentes.

Os arquivos de manifesto geralmente descrevem muitas variantes de uma única mídia. Pense em diferentes taxas de bits, várias faixas de áudio e até mesmo a mesma mídia codificada em formatos diferentes.

Alguns aplicativos podem querer manter uma quantidade maior de vídeo no buffer, outros, fazer a pré-busca dos primeiros segundos de vídeo de um próximo episódio e alguns querem implementar a própria lógica para streaming adaptável. É importante ter algum tipo de recurso de navegador integrado para gerar streams de mídia para reprodução. Acontece que existe um.

Extensões de origem de mídia

Felizmente, o W3C definiu algo chamado Media Source Extensions (EQM) que permite que o JavaScript gere nossos streams de mídia. Em resumo, o MSE permite que os desenvolvedores anexem um objeto MediaSource a um elemento <video> e o reproduzam quaisquer dados de mídia que sejam bombeados para os buffers anexados à instância MediaSource.

Exemplo básico

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

O exemplo simplificado acima ilustra algumas coisas:

• No que diz respeito a <video>, ele está recebendo dados de mídia de um URL.
• O URL gerado é apenas um ponteiro para uma instância MediaSource.
• A instância MediaSource cria uma ou mais instâncias de SourceBuffer.
• Em seguida, apenas anexamos dados de mídia binária ao buffer, por exemplo, usando fetch.

Embora esses conceitos básicos sejam simples e certamente seja possível criar um player de vídeo compatível com DASH e HLS do zero, a maioria das pessoas geralmente escolhe uma das soluções de código aberto maduras que já existem, como Shaka Player, JW Player ou Video.js, para citar algumas.

No entanto, criamos um PWA de mídia de demonstração chamado Kino, que demonstra como você desenvolveria seu próprio site básico de mídia de streaming que fornece reprodução de mídia off-line usando apenas o simples elemento <video>. Temos planos em nosso roteiro para oferecer suporte a estruturas e o gerenciamento de direitos digitais, entre outros recursos. Por isso, volte de vez em quando ou solicite um recurso. Leia mais sobre isso no artigo PWA com streaming off-line.

Formato dos blocos de mídia

Por muito tempo, o DASH e o HLS exigiam que os blocos de mídia fossem codificados em formatos diferentes. No entanto, em 2016, o suporte a arquivos MP4 fragmentados (fMP4, na sigla em inglês) padrão foi adicionado ao HLS, um formato compatível com o DASH.

Os blocos de vídeo que usam o contêiner fMP4 e o codec H.264 são compatíveis com os dois protocolos e podem ser reproduzidos pela grande maioria dos players. Isso permite que os produtores de conteúdo codifiquem os vídeos apenas uma vez, o que, por sua vez, economiza tempo e espaço em disco.

Para ter melhor qualidade e tamanhos de arquivo menores, codifique vários conjuntos de blocos de mídia usando formatos mais eficientes, como VP9. No entanto, antes de avançarmos, você precisará aprender a preparar arquivos de mídia para a Web, e isso é o próximo passo.