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, ao final, deverá ter uma boa compreensão dos vários casos de uso, protocolos e extensões de streaming. Vamos começar explicando o que realmente é o streaming.

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

Lembre-se de que, para fornecer streaming no seu site, o servidor precisa oferecer suporte ao 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ê vai aprender mais sobre como adicionar mídia a uma página da Web em uma seção posterior. Primeiro, conheça alguns casos de uso para streaming de multimídia se quiser ir além do carregamento de vários arquivos no elemento <video>.

• 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 maior qualidade que se encaixa na largura de banda disponível atualmente do cliente é retornado ao player de mídia.
• 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 solicitar e, em seguida, combiná-los na experiência de mídia final.

Usando <video> para reproduzir uma transmissão

Muitos navegadores não reproduzem sua transmissão nativamente. Embora exista algum suporte nativo para a reprodução HLS, os navegadores geralmente não são compatíveis com a reprodução de stream nativa do DASH. Isso significa que, muitas vezes, não basta apontar o <source> no elemento <video> para um arquivo de manifesto.

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

Atenção : esse código HTML é válido, mas não funciona. Os navegadores não oferecem suporte nativo à reprodução do manifesto DASH adicionada à propriedade src.

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.

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

Alguns apps podem querer manter uma quantidade maior de vídeo no buffer, outros podem querer pré-buscar os primeiros segundos do vídeo de um próximo episódio e outros querem implementar uma lógica própria para streaming adaptável. É aqui que você gostaria de ter algum tipo de recurso integrado do navegador para gerar streams de mídia para reprodução, e só acontece aqui.

Extensões de origem de mídia

Felizmente, o W3C definiu algo chamado Media Source Extensions (MSE) que vai permitir 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 reproduzam os dados de mídia que são 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 de MediaSource.
• A instância MediaSource cria uma ou mais instâncias SourceBuffer.
• Em seguida, basta anexar dados de mídia binários ao buffer, por exemplo, usando fetch.

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

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 oferece reprodução de mídia off-line usando apenas o simples elemento <video>. Nosso roteiro inclui planos para apoiar frameworks e gestão de direitos digitais, entre outros recursos. Portanto, confira periodicamente se há atualizações ou solicite um recurso. Saiba mais no artigo PWA com streaming off-line.

Formato de blocos de mídia

Por muito tempo, o DASH e o HLS exigiam que blocos de mídia fossem codificados em formatos diferentes. No entanto, em 2016, o suporte a arquivos MP4 fragmentados (fMP4) padrão foi adicionado ao HLS, um formato que também é 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 ambos os protocolos e podem ser reproduzidos pela grande maioria dos jogadores. Isso permite que os produtores de conteúdo codifiquem os vídeos apenas uma vez, o que economiza tempo e espaço em disco.

Para conseguir melhor qualidade e tamanhos de arquivo menores, você pode optar por codificar vários conjuntos de blocos de mídia usando formatos mais eficientes, como VP9. No entanto, antes de avançar, você precisa aprender a Preparar arquivos de mídia para a Web, e esse é o próximo passo.