10 dicas para construir extensões de contração muscular

Brice Culas Blocked Unblock Seguir Seguindo 20 de junho

Uma pequena introdução

Os Twitch Extensions criam novas maneiras de unir os streamers e os espectadores do Twitch, criar conteúdo incrível e conectar jogos a uma transmissão ao vivo. Mas, como qualquer nova tecnologia, pode ser difícil começar a usá-la.

Eu sou Breci, um membro da comunidade Twitch Developer, atualmente trabalho como desenvolvedor full-stack, e me especializei em experiências interativas.

Em 2018, comecei a experimentar e ver como eles poderiam ser desenvolvidos e quais são os limites. Desde então, publiquei duas extensões, solicitações em tempo real e missões; um clichê de código aberto para recém-chegados; e um pacote NPM de código aberto para desenvolvedores Vue / Vuex .

Neste artigo, compartilharei o que aprendi ao criar extensões do Twitch, como elas são feitas e como você pode usar as ferramentas do Twitch para reduzir custos de hospedagem, melhorar o dimensionamento e envolver streamers e espectadores em seu trabalho.

Se esta é a primeira vez que você trabalha com o Twitch Extensions, verifique primeiro os Primeiros passos e instale o Developer Rig .

Extensões são páginas da web

Se você olhar a página Introdução ao Twitch Extensions, verá estas informações: "As extensões são programáveis, painéis e sobreposições interativos, que ajudam as emissoras a interagir com os espectadores".

Pode-se dizer de forma diferente: "Extensões são páginas da Web estáticas exibidas na parte superior ou totalmente abaixo do vídeo".

Com isso em mente, você pode criar facilmente sua primeira extensão usando HTML / CSS / JS, como qualquer outro site. E, claro, você pode usar estruturas como React, Vue, Angular, etc. para criar suas extensões.

Por favor, note que as páginas precisam ser páginas da Web estáticas; você não pode usar a renderização do lado do servidor.

Você pode encontrar uma extensão mínima do Twitch aqui:

Breci / The-simplest-Twitch-Extension
O exemplo de extensão de contração menos complexa. Contribua para o desenvolvimento Breci / The-simple-twitch-Extension, criando um… github.com

Use os tipos de extensões corretos

Existem três tipos de extensões: painel, componente de vídeo e sobreposição de vídeo.

Cada tipo de extensão tem certas vantagens e limitações, portanto, considere-as ao pensar sobre o tipo de extensão que você deseja criar.

Painel

  • O painel Extensão vive sob o fluxo e pode ser exibido se o espectador quiser.
  • Para os ver, os visitantes têm de se deslocar para baixo.
  • Eles devem ser usados principalmente para conteúdo informativo que requer pouca interação ou conteúdo totalmente separado do fluxo.
  • Três podem estar ativos ao mesmo tempo.

Componente de vídeo

  • O componente de vídeo Extensão fica no topo do fluxo e dentro de uma barra lateral de extensões na página do canal.
  • Eles podem ocupar todo o espaço interativo no player de vídeo, mas você pode ocupar menos espaço se quiser e eles têm um fundo preto transparente.
  • Essas extensões serão minimizadas quando os espectadores ingressarem no fluxo.
  • Eles devem ser usados para casos de uso específicos que tragam conteúdo complementar ou interativo.
  • Dois podem estar ativos ao mesmo tempo.

Sobreposição de vídeo

  • A extensão de sobreposição de vídeo fica no topo do fluxo. Ele cobre todo o player de vídeo.
  • Essas extensões serão diretamente visíveis quando o espectador se juntar ao fluxo.
  • Eles devem ser usados para conteúdo que vai de mãos dadas com a transmissão como integrações de jogos.
  • Um pode estar ativo de cada vez.

A escolha do tipo certo impacta o engajamento. Mover minha solicitação de extensão ao vivo de um painel para um componente de vídeo dobrou o engajamento, porque era para ser interativo e complementar ao fluxo.

O ajudante de JavaScript é seu novo melhor amigo

Ao criar extensões do Twitch, você precisará usar o auxiliar de JavaScript .

É uma pequena biblioteca, fornecida pelo Twitch, que deve ser importada em sua extensão.

 <script src = "https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"> </ script> 

Com ele, você pode acessar todas as informações úteis do usuário atual e do seu ramal. Você também pode acionar funcionalidades como pedir ao usuário para compartilhar sua identidade, seguir um canal e acionar a transação Bits. Você pode até mesmo receber mensagens da extensão ou reagir a alterações no fluxo, permitindo que você adapte o conteúdo da extensão adequadamente.

Armazene dados com o Serviço de Configuração

Vamos falar sobre salvar os dados. Por exemplo, você deseja exibir algumas mensagens que podem ser personalizadas pelo streamer.

Você pode usar um banco de dados para isso, mas terá que configurar uma API e o banco de dados, além de gerenciar o dimensionamento e os custos associados a ele.

Usar o Serviço de Configuração do Twitch em minhas Missões de Extensão me permitiu remover todos os custos envolvidos no projeto e focar no conceito sem ter que me preocupar com os custos.

O Serviço de Configuração é um serviço gratuito que permite aos desenvolvedores armazenar dados hospedados pelo Twitch e acessá-los diretamente de sua extensão sem a necessidade de um back-end.

Este serviço oferece três segmentos onde você pode armazenar dados:

  • Emissora : os dados são compartilhados apenas no canal do transmissor e podem ser definidos a partir do auxiliar de JavaScript pelo transmissor ou de um endpoint da API. Cada canal tem seu próprio segmento.
  • desenvolvedor : os dados são compartilhados apenas no canal do transmissor e só podem ser definidos a partir de um endpoint da API. Cada canal tem seu próprio segmento.
  • global : os dados são compartilhados com todos os canais usando a extensão e só podem ser definidos a partir de um endpoint da API. Existe apenas um para todos os canais do seu ramal.

Você pode armazenar até 5 KB de dados por segmento.

Para dados globais, como status de manutenção ou certas configurações, você deve usar o segmento global .

Se você quiser manipular mais dados, precisará ter seu próprio armazenamento de dados com um backend na frente para protegê-lo.

Uma emissora com um pouco de experiência em programação poderia mudar facilmente o conteúdo do seu segmento de radiodifusão . Para configurar coisas como recursos exclusivos, você deve usar o segmento do desenvolvedor .

Armazene dados persistentes e reduza o tráfego com o Serviço de Configuração do Twitch
Construir extensões para o Twitch continua ficando mais rápido e fácil. Recentemente anunciamos o novo e melhorado desenvolvedor… blog.twitch.tv

Mensagens PubSub ajudam com o dimensionamento

Você pode estar se perguntando: como eu posso começar uma enquete quando a emissora aperta um botão? Eu tenho que adicionar uma conexão WebSocket para cada usuário?

Você poderia… Ou você pode simplesmente usar o PubSub da Extensão do Twitch. Ele permite que você envie mensagens para os usuários do seu ramal sem ter que gerenciar todo o escalonamento do WebSocket ou fazer pesquisas massivas de cada cliente. A Twitch já gerencia um sistema PubSub para você.

Com este sistema, você pode enviar mensagens PubSub para dois destinos:

  • broadcast : para todos os usuários de um canal.
  • global : para todos os usuários de sua extensão, mas só pode ser enviado de um serviço de extensão de back-end (EBS), que é simplesmente o back-end de seu aplicativo, e você é responsável por hospedá-lo e criá-lo se precisar de um.

Como um exemplo com este sistema, um transmissor pode pressionar um botão que acione uma mensagem PubSub para todos os espectadores e que o texto apareça no fluxo.

Nota: Você só pode enviar até 5 KB de dados e um PubSub por segundo, por canal.

Antecedentes Técnicos Requeridos
Se o controle de pop-out estiver ativado, o iframe de extensão tem um botão de ícone que os espectadores podem clicar para abrir a extensão… dev.twitch.tv

Envolva espectadores com bits

Bits são um bem virtual que os espectadores podem usar para celebrar e apoiar streamers no Twitch. Como desenvolvedor, você pode habilitar sua Extensão para que os espectadores possam usar os Bits para tudo, desde a obtenção de placares até a reprodução de sons ou mensagens diretamente no stream, e até mesmo influenciar a jogabilidade.

Cada vez que um espectador usa Bits em sua extensão, é possível interagir com um fluxo exibindo feedback visual e mostrando aos espectadores mais maneiras de interagir com o fluxo.

Você pode ouvir transações de Bits de duas maneiras:

Dentro da extensão

 twitch.ext.bits.onTransactionComplete (transaction => { 
if (transaction.initiator === 'CURRENT_USER') {
// faça um feedback personalizado
}
outro {
// faça um feedback genérico
}
}

Do seu EBS, usando Webhooks

Referência de Webhooks
Inscreva-se ou cancele a inscrição de eventos para um tópico especificado. Os payloads de resposta de gancho da Web imitam seus respectivos novos… dev.twitch.tv

Você pode enviar uma mensagem PubSub para o seu ramal ou para uma sobreposição de fonte de vídeo.

Alertas de som PubSub exemplo de alerta de Altoar

Nota: A transmissão da transação de bits não conta na taxa do PubSub da extensão do Twitch.

Referência – Ajudante: Bits
Essa referência abrange os terminais de Extensões, o auxiliar de JavaScript, os parâmetros de consulta do cliente e o esquema JWT. Crie… dev.twitch.tv

Deixe as Flâmulas escolherem o valor de Bits

Não existe um modo “pré-definido” de permitir que os transmissores definam seu próprio valor de Bits para um recurso na extensão.

Ao usar os bits em sua extensão, você precisa criar produtos Bits. Eles são usados para definir a possível transação Bits em sua extensão. Mas você pode criar vários deles e usá-los para permitir vários valores.

Por exemplo, você pode criar:

  • value100: 100 Bits
  • valor250: 250 bits
  • valor 500: 500 bits

E o streamer pode simplesmente escolher um deles. Você poderia ter 50 valores possíveis ou dois; É com você.

Live Requests Bits value options exemplo por Breci

Você pode chamar a API do Twitch da extensão

Alguns você pode precisar de mais informações do que o que o auxiliar de JavaScript fornece. Como sua extensão é uma página da web, você pode chamar a API do Twitch diretamente dela.

Deseja desativar seu painel de extensão quando o fluxo estiver off-line? Verifique diretamente a partir da API em seu ramal usando o endpoint do Streams com o channelId do canal atual.

 window.Twitch.ext.onAuthorized (auth => { 
const url = `https://api.twitch.tv/helix/streams/id=$ {auth.channelId}`;
const fetchData = {
método: "GET",
cabeçalhos: {
"Client-ID": "YourExtensionClientIdHere"
}
};
buscar (url, fetchData)
.then (resp => resp.json ()) // Transforma os dados em json
.then (dados => {
if (data.data && data.data.length) {
// Display extension
} outro {
// Mostrar mensagem offline
}
});
});

Se você tiver um EBS, certifique-se sempre de verificar no servidor a validade dos dados enviados por seus usuários.

Nova API do Twitch
A nova API do Twitch fornece ferramentas para o desenvolvimento de integrações com o Twitch. Aqui, como um exemplo rápido para você começar… dev.twitch.tv

Ajude os espectadores a perceberem sua extensão

Twitch Extensions são relativamente novos, então alguns espectadores ainda não sabem como interagir com eles.

Para as extensões de sobreposição de vídeo, convém envolver os espectadores mostrando que eles podem interagir com algo no fluxo. A melhor época para fazer isso é quando os espectadores movem o mouse sobre o player de vídeo, porque isso significa que o espectador pode não estar 100% focado no conteúdo do fluxo. Esta é uma ótima oportunidade para criar um bom apelo à ação e / ou animações para envolver e educar o espectador sobre a extensão.

Uma maneira de fazer isso é usar o isPlayerControlsVisible no retorno de chamada onContext

 twitch.ext.onContext (context => { 
if (context.arePlayerControlsVisible) {
// exibir informações
}
outro {
// esconde informação
}
}

Titatitutu jogando Trackmania, mostrando um exemplo de ajudar os espectadores a notar uma referência de extensão
Essa referência abrange os terminais de Extensões, o auxiliar de JavaScript, os parâmetros de consulta do cliente e o esquema JWT. Crie… dev.twitch.tv

Sua extensão pode – e deve – ser preguiçosa

Sua extensão não será o conteúdo principal do fluxo. isso irá complementá-lo. Os espectadores virão primeiro para o streamer e, em seguida, usarão seu trabalho.

Com isso em mente, você não precisa exibir sua extensão o mais rápido possível, como um site comum. Haverá um pouco de armazenamento em buffer antes que o feed ao vivo seja iniciado. Os espectadores se concentrarão primeiro no conteúdo do fluxo e, em seguida, no seu ramal. Isso dá a você muito tempo para reunir todos os dados necessários e exibi-los bem para os espectadores.

Eu recomendo que você confira esta palestra de Karl Patrick do TwitchCon 2018 Developer Day para aprender mais sobre como configurar padrões de projeto para a escala do Twitch.

Conclusão

Espero que minhas experiências e aprendizados construindo o Twitch Extensions ajudem você a começar. Extensões são um novo paradigma no conteúdo interativo ao vivo, e espero ver muitos de vocês se juntarem a esta divertida jornada!

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

Pronto para construir experiências interativas no Twitch? Comece agora!