Guia de codificação de vídeos para streaming com a Transloadit
Assim como nós, da Transloadit, você provavelmente gosta de serviços de streaming 🎥 Mas já pensou em
criar o seu próprio? Nosso /video/adaptive Robot
pode ajudar se você tiver uma ideia ousada como essa! Você pode usar este
Robot para codificar vídeos
mp4 ou webm em HLS (HTTP Live Streaming) ou MPEG-DASH.
Neste artigo, vamos mostrar como criar uma prova de conceito básica de um player adaptativo em React que permite reproduzir vídeos em streaming HLS ou MPEG-DASH, dependendo da compatibilidade do navegador, de forma semelhante a uma de nossas demonstrações em JavaScript (English).
O que são HLS e MPEG-DASH?
Antes de começar, vamos esclarecer o que exatamente são HLS e MPEG-Dash. Ambos são protocolos de streaming que dividem os dados de vídeo em pequenos blocos que podem ser baixados para um dispositivo via HTTP. Os dois protocolos permitem a reprodução adaptativa, alternando entre versões codificadas conforme as condições da rede mudam. O HLS tem suporte nativo à reprodução em dispositivos Apple, enquanto o MPEG-DASH é um padrão aberto geralmente reproduzido por um player JavaScript. A reprodução e a entrega criptografada dependem do navegador, do player, dos codecs e da implementação de DRM, não apenas do formato da playlist.
Neste passo a passo, vamos codificar nos dois formatos e usá-los com um player de vídeo adaptativo.
Armazenamento dos nossos arquivos por meio de uma Assembly
Podemos ir direto à Assembly abaixo para ter uma visão geral de como usar o Robot.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"hls-encode": {
"use": ":original",
"robot": "/video/encode",
"ffmpeg_stack": "v7",
"preset": "hls-720p"
},
"dash-encode": {
"use": ":original",
"robot": "/video/encode",
"ffmpeg_stack": "v7",
"preset": "dash-720p-video"
},
"thumbnailed": {
"use": "hls-encode",
"robot": "/video/thumbs",
"result": true,
"ffmpeg_stack": "v7"
},
"hls-adaptive": {
"use": {
"steps": ["hls-encode"],
"bundle_steps": true
},
"robot": "/video/adaptive",
"ffmpeg_stack": "v7",
"playlist_name": "my_playlist.m3u8",
"segment_duration": 6,
"closed_captions": false,
"technique": "hls"
},
"dash-adaptive": {
"use": {
"steps": ["dash-encode"],
"bundle_steps": true
},
"robot": "/video/adaptive",
"ffmpeg_stack": "v7",
"playlist_name": "my_playlist.mpd",
"segment_duration": 6,
"technique": "dash"
},
"export-plain": {
"use": "thumbnailed",
"robot": "/google/store",
"credentials": "stream-test",
"acl": "public-read",
"path": "stream-videos/${file.name}"
},
"export-hls": {
"use": "hls-adaptive",
"robot": "/google/store",
"credentials": "stream-test",
"acl": "public-read",
"path": "stream-videos/hls-video/${file.name}"
},
"export-dash": {
"use": "dash-adaptive",
"robot": "/google/store",
"credentials": "stream-test",
"acl": "public-read",
"path": "stream-videos/dash-video/${file.name}"
}
}
}
Não se preocupe com o tamanho destas Assembly Instructions. Vamos analisá-las por partes.
No primeiro Step, o uso do /upload/handle Robot é claro. Nós o usamos para receber um vídeo de um usuário final.
Em seguida, o /video/encode Robot
codifica o vídeo enviado em HLS e MPEG-DASH por meio de hls-encode e
dash-encode, os Steps correspondentes,
respectivamente. Estes são Steps necessários para o
/video/adaptive Robot.
Em terceiro lugar, como vamos trabalhar com um player de vídeo, seria útil poder extrair uma
miniatura do nosso vídeo com facilidade. Felizmente, é exatamente isso que o
/video/thumbs Robot faz em
thumbnailed, o Step correspondente ✨
Agora chegamos à estrela do artigo: o /video/adaptive
Robot. Na Assembly,
dividimos suas tarefas em dois Steps separados:
hls-adaptive e dash-adaptive. Vamos analisar os parâmetros fornecidos
a este Robot. Esses Steps usam os respectivos vídeos codificados
para gerar uma playlist .m3u8 e uma playlist
.mpd. Os arquivos dos protocolos MPEG-DASH e HLS são compostos por uma
playlist (.m3u8 ou .mpd) e uma sequência de segmentos. O arquivo de playlist simplesmente
localiza os segmentos associados necessários para o streaming do vídeo e os reproduz em sequência.
Com segment_duration, podemos definir a duração máxima de cada segmento do vídeo em
streaming. Isso pode ser importante ao considerar a franquia de dados e a capacidade de download do
seu usuário. Outra particularidade desses protocolos é que precisamos garantir que seus segmentos
estejam sempre no mesmo diretório que a playlist. Caso contrário, as playlists procurarão segmentos
que não conseguirão encontrar. Felizmente, no último Step,
o /google/store Robot define o
caminho dos arquivos MPEG-DASH e HLS como um caminho específico, por exemplo,
stream-videos/dash-video/${file.name}. Isso significa que todos os arquivos devem ficar juntos. Só não se
esqueça de configurar storage.objects.create nas
permissões do seu bucket. Também armazenamos a miniatura usando o mesmo
Robot.
A ramificação DASH mínima acima codifica apenas vídeo. Para um fluxo DASH com som, adicione uma rendição de áudio e combine-a com o vídeo, como mostramos em nossa demonstração de MPEG-DASH (English).
Uma prova de conceito com React
Griffith é um player de vídeo para React com o qual é muito fácil
começar. Ele recebe props com as propriedades do player e um objeto sources
que contém a URL do vídeo e seu formato.
var sources = {
hd: {
bitrate: 905,
size: 10105235,
duration: 0,
width: 1280,
height: 720,
play_url: 'https://storage.googleapis.com/yourbucket/stream-videos/hls-video/my_playlist.m3u8',
},
}
Esta prova de conceito histórica verifica o suporte nativo a mídia com o código a seguir. Ela não detecta o suporte à reprodução fornecido por bibliotecas JavaScript por meio de Media Source Extensions; use as verificações de capacidade do seu player ao integrar uma biblioteca desse tipo.
function checkCompatibility() {
var compatibility = document.createElement('video')
if (compatibility.canPlayType('application/x-mpegURL')) {
return build_sources('m3u8', 'my_playlist')
}
if (compatibility.canPlayType('application/dash+xml')) {
return build_sources('mpd', 'my_playlist')
}
console.log('No native streaming support found')
}
Você encontra minha implementação básica aqui. O /video/adaptive Robot realmente simplifica a geração de mídia para streaming. À medida que as pessoas consomem mais vídeos pela internet, temos confiança de que este Robot pode se mostrar um recurso útil para quem procura uma solução simples e elegante.
Como leitura complementar, nossa demonstração Tornar o vídeo compatível com todos os dispositivos (English) pode ser do seu interesse, pois mostra como combinar essa solução com outros formatos, dependendo do que o dispositivo de reprodução suporta, e fornece código de exemplo para um player que não usa React: Plyr.