Criando um feed de transmissão ao vivo para extensões de contração

Notifique sua discórdia e o site quando as transmissões entrarem em vigor com sua extensão!

Matt Condon em Twitch Blog Seguir Jul 1 · 6 min ler

Este é um post de convidado de Matt Condon (Obrigado, Matt! ?), metade da equipe de duas pessoas no ponto que constrói a Extensão de Adesivos.

A extensão de adesivos transforma qualquer fluxo em uma tela para espectadores, onde os espectadores recebem adesivos digitais raros que eles colocam em funcionamento para que todos possam ver em tempo real. Cada vez que um espectador coloca um adesivo em exibição, todo espectador o vê por alguns segundos e a extensão informa o usuário no bate-papo. Os assinantes podem reivindicar um ingresso grátis de adesivos toda semana, e como cada adesivo é um item único e escasso, os adesivos colocados em um fluxo agora pertencem ao streamer, que pode espalhar o amor para outros canais.

Recentemente, como parte do site da Stickers e da Discord , adicionamos um feed ao vivo de canais que estão sendo transmitidos com a extensão Stickers ativada. Com os canais ao vivo no website do Stickers, os streamers em potencial podem ver facilmente os adesivos ao vivo no canal de um streamer ativo , ajudando-os a entender como ele ficará no canal deles e afetará os espectadores. Além disso, com o feed ao vivo no Discord, os tagarelas veem quando um novo streamer entra em operação, como uma prova social de que o aplicativo Stickers Extension está sendo usado em todo o Twitch.

Temos tantas notificações de streamer ao vivo que sou tentada a silenciar o canal, mas adoro saber quando um novo streamer se junta ao Sticker fam.

O site de adesivos com uma lista de canais ao vivo no rodapé. O Stickers Bot postando uma notificação ao vivo para o FluxFer no canal # live-with-stickers no Stickers Discord.

Mostraremos como criar um feed de canais ao vivo para seu próprio ramal e como integrá-lo em seu próprio canal e site da Discord. Assumiremos conhecimento básico do Lambda e compreensão básica de como usar bancos de dados como o DynamoDB, mas você pode usar a técnica aqui com qualquer pilha de tecnologia que você escolher.

Como funciona o feed do canal ao vivo

O feed do canal ao vivo consiste em duas saídas separadas:

  1. Uma lista de todos os canais atualmente ativos para exibi-los no site.
  2. Um feed de novos canais ao vivo para postar mensagens na Discórdia.

A API de extensão do Twitch fornece o ponto de extremidade útil live_activated_channels que retorna uma lista paginada de canais que estão live_activated_channels com sua extensão ativada. Nós periodicamente pedimos ao Twitch uma lista de canais ativados ao vivo e depois fazemos nosso próprio processamento para criar uma lista de canais e um feed de novos canais ativos. Observe que os streamers levarão alguns minutos para aparecer na lista fornecida por esse endpoint, portanto, se você estiver procurando atualizações atualizadas sobre quando os streamers são ativados , leia a documentação do Twitch, especificamente o suporte do Webhook via stream_changed .

Arquitetura Backend

No ponto, dependemos fortemente da AWS, entre outros, para nossa infra-estrutura de back-end – o Stickers é um aplicativo sem servidor em tempo real que foi executado com 100% de tempo de atividade nos últimos dois meses.

Aproveitamos os produtos sem servidor da AWS, como o Lambda, o DynamoDB, o AppSync e o CloudWatch, em particular, para direcionar o feed ao vivo.

A arquitetura de backend do nosso canal ao vivo, descrita em detalhes abaixo.

  1. A cada 10 minutos, uma regra do CloudWatch chama uma função do Lambda sync_live_channels que consulta a API de extensão do Twitch para canais ativados ao vivo – paginando pelas páginas retornadas – e armazena os resultados em uma tabela do DynamoDB chamada live-channels .
  2. A tabela de live-channels ativos tem um item TTL de 15 minutos, portanto, os itens obsoletos são removidos 15 minutos após a inserção. Isso mantém a lista de canais ao vivo atualizados. Os fluxos que ficam off-line serão removidos em 15 minutos.
  3. Para obter uma lista de canais, a função do Lambda get_live_channels executa uma consulta do DynamoDB no índice by_view_count da tabela de live-channels ao by_view_count – classificada por view_count um streamer – e retorna essa lista ao chamador.
  4. Para produzir uma lista de novos canais ao vivo, o DynamoDB Stream de live-channels é encaminhado para um consumidor do Lambda chamado notify_live_channels que então envia uma mensagem para a Discord usando sua API de webhooks.

Vamos quebrar alguns desses passos com alguns exemplos de código! Esses exemplos estão no TypeScript, um superconjunto digitado de JavaScript que os desenvolvedores de JS devem se sentir em casa lendo.

A função Lambda sync_live_channels

A função Lambda sync_live_channels é responsável por extrair a lista de canais ao vivo do Twitch e armazená-los em nossa tabela do DynamoDB.

Aqui podemos ver alguns pseudocódigo para consultar a API do Twitch e armazenar os resultados em nossa tabela DynamoDB de live-channels . No momento, há um erro na resposta da API: ocasionalmente, você recebe uma resposta com uma lista vazia de canais, mas ainda recebe um cursor para a próxima página. Quando você consultar o cursor novamente , o Twitch retornará a próxima página de canais ativados ao vivo para você, portanto, seu código deve ser capaz de lidar com o caso em que nenhum canal é retornado na resposta, mas um cursor ainda fornece outra página. A equipe TwitchAPI está ciente desta questão menor, embora seja sempre aconselhável verificar seus dados!

A função Lambda notify_live_channels

Essa função do Lambda é inscrita nos eventos do DynamoDB Stream a partir de nossa tabela de live-channel , de modo que é chamada quando os itens são adicionados. O trabalho deste Lambda é pegar o novo stream, combiná-lo com outras informações que sabemos sobre o streamer – usando a API do Twitch – e publicar essas informações em nosso canal Discord.

Observe como usamos a marca roxa da Twitch – codificada em decimal – como a cor da nossa discórdia; é isso que nos dá a linda borda roxa à esquerda das mensagens da Discórdia! Observe também que restringimos as notificações do Discord aos streamers com pelo menos 5.000 visualizações no canal deles. Isso nos ajuda a evitar spam de contas com baixa contagem de visualizações que podem instalar a extensão.

Para obter um Webhook Discord, configure um webhook no canal que você gostaria que as mensagens aparecessem.

Configurando um webhook Discord para o canal # live-with-stickers na discórdia de adesivos.

E depois aproveite o resultado!

Uma notificação para o CrazeG4 ir ao vivo com Stickers.

A função lambda get_live_channels

Esta função do Lambda é responsável por consultar os canais atuais e retorná-los ao chamador. Em um aplicativo de produção, você poderia expor isso com uma rota do Gateway da API ou um resolvedor do AppSync e armazenar em cache o resultado.

Essa função do Lambda consulta o índice do DynamoDB dos 20 principais canais ao vivo ordenados pelo view_count , mescla esses dados com informações extras sobre o streamer que conhecemos, como o profile_image_url e o login , e retorna o pacote de dados ao chamador.

No frontend, podemos construir nossa interface com os seguintes elementos:

  • do streamer profile_image_url
  • um quadro recente de seu stream, que é fornecido por thumbnail_url no endpoint /helix/streams e adicionando nossas dimensões de 256x144
  • um link para o canal do Twitch como https://twitch.tv/{login}

Isso é tudo, pessoal

Para verificar este feed em ação, visite stickersbydot.com ou junte-se à discórdia de adesivos .

Para mais informações sobre extensões, visite dev.twitch.tv/build ou junte-se à Discórdia da Comunidade do TwitchDev .