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

Derek Herman

Jaroslav Polakovič

Neste artigo, você aprenderá sobre o conceito mais avançado de mídia de streaming e, no final, deverá ter um bom entendimento das várias em streaming casos de uso, protocolos e extensões. Vamos começar sobre o que é o streaming de verdade.

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

Para oferecer streaming no seu site, o servidor precisa oferecer suporte ao cabeçalho de solicitação HTTP Range. Saiba mais sobre o Accept-Ranges cabeçalho na seção O <vídeo> e <target> tags.

Casos de uso de streaming

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

• O streaming adaptável é onde os blocos de mídia são codificados em vários taxas de bits e o bloco de mídia de maior qualidade que se encaixa no do cliente a largura de banda disponível no momento é retornada 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 uma transmissão 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 HTTP Live Streaming (HLS). Os players com suporte a esses protocolos buscarão o arquivo de manifesto gerado. descobrir quais blocos de mídia solicitar e combiná-los nas experiência de mídia.

Usando <video> para reproduzir uma transmissão

Muitos navegadores não reproduzem sua transmissão nativamente. Embora existam algumas suporte nativo para reprodução de HLS, os navegadores geralmente não são compatíveis com DASH nativo por streaming. 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>

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

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

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

Extensões de fonte de mídia

Felizmente, o W3C definiu algo chamado extensões de fonte de mídia (MSE, na sigla em inglês). que permite que o JavaScript gere nossos streams de mídia. Em poucas palavras, o EQM permite que os desenvolvedores anexem um objeto MediaSource a um elemento <video> e tenham ele reproduz todos os dados de mídia que são bombeados para os buffers conectados ao 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.
• Depois, basta anexar dados binários de mídia 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 um das soluções maduras de código aberto que já existem, como o Shaka Player, JW Player ou Video.js, por exemplo.

No entanto, criamos um PWA de mídia de demonstração chamado Kino, que demonstra como você pode seria desenvolver seu próprio site básico de streaming de mídia que oferece a reprodução de mídia off-line usando apenas o elemento <video> simples. Há planos em nosso roteiro para apoiar as estruturas e o gerenciamento de direitos digitais, entre outros atributos de machine learning. 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 diferentes formatos. No entanto, em 2016, o suporte a arquivos MP4 fragmentados (fMP4) padrão foi alterado. foi adicionado ao HLS, um formato que também é compatível com o DASH.

Há suporte para blocos de vídeo que usam o contêiner fMP4 e o codec H.264. por ambos os protocolos e pode ser jogado pela maioria dos jogadores. Isso permite os produtores de conteúdo codifiquem os vídeos apenas uma vez, o que economiza tempo e espaço em disco.

Para melhorar a qualidade e reduzir o tamanho dos arquivos, você pode optar codificar vários conjuntos de blocos de mídia usando formatos mais eficientes, como VP9, Mas, antes de avançar, você precisa aprender Preparar arquivos de mídia para a Web e a seguir.