Como adicionar streaming ao seu site Jamstack em minutos

Na semana passada, tive o prazer de estar na transmissão ao vivo do meu amigo Todd Sharp, Streaming on Streaming. Pode assistir à gravação dessa sessão aqui:

Todd é o principal desenvolvedor defensor do Amazon Interactive Video Service (IVS), ou, mais simplesmente, uma maneira de pegar o incrível poder da plataforma Twitch e colocá-lo em suas mãos. O IVS oferece:

• A capacidade de criar canais para o seu conteúdo.

• Várias maneiras de transmitir seu conteúdo, desde ferramentas baseadas na Web até ferramentas mais poderosas, como OBS.

• Várias maneiras de exibir seu conteúdo, incluindo um SDK da Web bastante simples.

• Relatórios super detalhados.

• E integrações profundas no stream que permitem coisas como transcrições, moderação de bate-papo baseada em Lambda e muito mais.

  
  

Este é um serviço comercial, mas como quase tudo na AWS, há um nível gratuito que permite testar as coisas e ver se faz sentido para você.

Na sessão que tive com Todd, ele queria colocar sua própria documentação e console por meio de uma "experiência de desenvolvedor iniciante". Então, primeiro, pensar e realmente se importar com a experiência inicial do desenvolvedor com seu produto é provavelmente uma das coisas mais importantes que você pode fazer.

Eu sei que em minha própria carreira na defesa do desenvolvedor, é quase impossível para mim tentar algo novo sem examinar e comentar constantemente sobre a integração do desenvolvedor. Todd merece um respeito louco por fazer isso ao vivo em sua transmissão.

Eu sou bem conhecido por quebrar coisas, fazer coisas erradas, e geralmente apenas ser seu pior pesadelo quando se trata de DX, então isso foi bastante corajoso da parte dele.

(E, para ser claro, não planejamos nada desse fluxo. Não recebi nada com antecedência e o único conhecimento real que tive foi ler as postagens do blog e o bate-papo geral.)

Como você pode imaginar, algo como "role seu próprio IVS" vai ser muito complexo, mas em nossa sessão de uma hora, configuramos meu canal, transmiti do OBS e de uma ferramenta da web e consegui construir um simples página da Web para exibir o fluxo.

Eu pensei em compartilhar alguns dos destaques disso aqui, já que a ideia de oferecer suporte ao streaming no Jamstack parece incrivelmente atraente. Isso será um pouco de alto nível, mas os documentos são bastante completos e fornecerão mais detalhes sobre os detalhes.

Você também vai querer começar com o guia de Introdução .

Com isso em mente, aqui está um esboço básico de como é simples começar.

Passo um - Obtenha a AWS

Eu só vou pular isso. Quero dizer, acho que não estou dizendo isso e você nunca deve presumir nada, mas como uma grande porcentagem de pessoas já usa a AWS, suponho que você já tenha uma conta.

Eu fiz e usei meu root, mas se você seguir o link de introdução que compartilhei acima, eles configurarão um usuário com acesso mais restrito, que é a coisa certa a fazer e sempre fazemos a coisa certa em tecnologia. Aham.

Etapa dois - Crie seu canal

A próxima coisa que você fará é definir um canal na parte IVS do console AWS:

Como lembrete, a caixa de pesquisa no tox do IVS faz um ótimo trabalho em encontrar coisas. A AWS pode ser um pouco complicada, mas a pesquisa deles tornou as coisas muito mais fáceis ultimamente.

Presumo que a maioria das pessoas saiba sobre streaming e tenha a ideia básica de um canal, mas se eu começasse a fazer streaming, provavelmente teria apenas um canal para mim.

Se eu quisesse adicionar streaming ao site da minha empresa, poderia imaginar ter um canal para coisas como treinamento, eventos externos e assim por diante.

No mínimo, um canal é necessário. Ao criar um novo canal, o mínimo é o nome:

Observe que uma das opções é armazenar automaticamente os fluxos no S3. Não habilitei isso no stream com Todd, mas é muito bom que seja tão simples de habilitar. Obviamente, haverá um custo para armazenar grandes arquivos de vídeo, mas eu aprecio a simplicidade de habilitá-lo.

Etapa três - descubra sua emissora

Os documentos de introdução sobre como configurar sua capa de streaming usando seus SDKs, OBS Studio ou FFmpeg. Eu usei o OBS Studio no passado, então durante a transmissão com Todd, eu usei isso. Vou avisar as pessoas que, se você nunca o usou antes, pode ser bastante opressor.

Definitivamente foi para mim (diabos, ainda mal sei o que estou fazendo).

Em vez disso, deixe-me compartilhar outra opção que Todd compartilhou comigo mais tarde no stream, stream.ivs.rocks . Esta é uma solução de streaming baseada na web que você pode usar para testar o IVS.

Abra a página no seu navegador (observe que diz que o Edge não é compatível, mas não tive problemas com isso) e clique no ícone de roda dentada para acessar suas configurações. Você desejará especificar seu "endpoint de ingestão" e "chave de fluxo", os quais podem ser encontrados no console da AWS nos detalhes do seu canal.

Não cometa o mesmo erro que eu - o "servidor de ingestão" NÃO é o mesmo que o "endpoint de ingestão", você deve abrir e expandir "Outras opções de ingestão" para ver isso.

Depois de fazer isso, você pode clicar no botão "Iniciar streaming" abaixo e, literalmente, é isso! Embora isso não seja algo que você faria para um fluxo "real", é muito mais simples e rápido de configurar.

Assim que estiver transmitindo, volte para o console AWS, clique em "Canais ao vivo" e você poderá ver sua transmissão em ação:

Se você acessar os detalhes do canal, também será exibido:

A propósito, enquanto estiver lá e no futuro, você poderá ver os fluxos anteriores e todos os tipos de métricas interessantes sobre o fluxo.

Não estou familiarizado com grande parte dessa terminologia usada, então é algo que você deve ter em mente se for novo em streaming (e é algo que compartilhei com Todd como feedback), mas se você gosta de estatísticas, a AWS o cobre.

Etapa quatro - o front-end

Na verdade, visualizar o fluxo requer descobrir onde você fará isso. Considerando que sou um cara da web, e este post é sobre como fazer isso no Jamstack, o guia da web em sua documentação é onde você gostaria de ir a seguir. Mais uma vez, a implementação inicial pode ser muito simples.

Aqui está uma implementação completa:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

Vamos decompô-lo. Você tem uma tag de script carregando o SDK deles. Em seguida, tenho meu HTML com as partes importantes sendo a tag <video> e meu CSS para dimensioná-lo corretamente.

O JavaScript cria uma instância do IVSPlayer e a anexa ao DOM. O valor pbURL vem da configuração do canal AVS:

E aqui está em ação!

Agora, antes de ficar muito animado, observe que este é o código mais simples que você pode usar, mas não é muito à prova de balas, na verdade, e você definitivamente se deparará com isso durante o teste, se não estiver transmitindo, receberá um erro ao tentar para carregar o fluxo. Isso absolutamente faz sentido, então um código melhor lidaria com isso.

Eu dei uma olhada rápida na referência da web e vejo o suporte a eventos, então você deve conseguir ouvir o início de um fluxo; carregue nesse ponto ou faça algo no DOM para permitir que a pessoa que está visualizando a página da Web saiba que um fluxo começou.

É isso!

Ok, claro, isso não é muito digno de produção, mas eu literalmente fiz uma solução de streaming em uma hora. Agora, isso não vai ser gratuito, então é algo para se ter em mente, mas estou realmente impressionado com a rapidez com que você pode começar, bem como quanta energia você tira da caixa.

E com a AWS lidando com tudo, é uma ótima opção para o Jamstack. Existem APIs baseadas em servidor que você também pode integrar, e é aí que eu usaria algo como o Netlify Functions.

Então, novamente, confira os documentos . Haverá muito para digerir, mas há muito mais lá do que mencionei aqui.

Em seguida, verifique as postagens de Todd no dev.to , onde ele compartilhou vários exemplos. Mais recentemente, ele demonstrou um bate-papo por vídeo multi-host em tempo real no navegador e, em seguida, seguiu com um exemplo de vários hosts e transmissão ao vivo, novamente o navegador .

Suas postagens envolvendo chat e o poder que você tem de moderar ali são as minhas favoritas, eu acho. Também recomendarei o que ele escreveu sobre a criação de sua própria estação de rádio "LoFi" como sendo especialmente legal.