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:   https://www.twitch.tv/videos/1811192764?embedable=true  Todd é o principal desenvolvedor defensor do Amazon Interactive Video Service (IVS), ou, mais simplesmente, uma maneira de pegar o   poder da plataforma Twitch e colocá-lo em suas mãos.   oferece: incrível O IVS  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   por fazer isso ao vivo em sua transmissão. louco  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   são bastante completos e fornecerão mais detalhes sobre os detalhes. documentos  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   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. de introdução  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   trabalho em encontrar coisas. A AWS pode ser um pouco complicada, mas a pesquisa deles tornou as coisas muito mais fáceis ultimamente. ótimo  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   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. configurar sua capa de streaming  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,   . Esta é uma solução de streaming baseada na web que você pode usar para testar o IVS. stream.ivs.rocks  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", é   mais simples e rápido de configurar.  muito  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   você fará isso. Considerando que sou um cara da web, e este post é sobre como fazer isso no Jamstack, o   em sua documentação é onde você gostaria de ir a seguir. Mais uma vez, a implementação inicial pode ser muito simples. onde guia da web  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   e meu CSS para dimensioná-lo corretamente. <video>  O JavaScript cria uma instância do   e a anexa ao DOM. O valor   vem da configuração do canal AVS:  IVSPlayer pbURL  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   faz sentido, então um código melhor lidaria com isso. absolutamente  Eu dei uma olhada rápida na   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. referência da web  É 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   . Haverá muito para digerir, mas há muito mais lá do que mencionei aqui. documentos  Em seguida, verifique   , onde ele compartilhou vários exemplos. Mais recentemente, ele demonstrou um   e, em seguida, seguiu com um exemplo de   . as postagens de Todd no dev.to bate-papo por vídeo multi-host em tempo real no navegador 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   como sendo especialmente legal. a criação de sua própria estação de rádio "LoFi"

My Blog

Buy Me a Coffee

Read My Stories

Este áudio é produzido no idioma original da história!

Como adicionar streaming ao seu site Jamstack em minutos

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps