){kind=small}
Crie um Twitch personalizado com a Video API da Vonage e os Web Components
Tempo de leitura: 5 minutos
A publicação foi atualizada para incluir a versão de março de 2022 da Video API da Vonage, com um aumento no número de participantes simultâneos em transmissões interativas ao vivo, transmissões HLS de baixa latência e o novo Vonage Experience Composer.
Para começar, vamos definir alguns conceitos e estabelecer expectativas. O Twitch é uma plataforma gigantesca que permite que as pessoas façam transmissões e interajam com os espectadores. De Wikipedia: “Em fevereiro de 2020, a plataforma contava com 3 milhões de streamers por mês e 15 milhões de usuários ativos diários, com uma média de 1,4 milhão de usuários simultâneos.”
Construir algo dessa magnitude exige muito mais do que o que pode ser aprendido em um único post de blog. Em vez disso, o foco deste post será a criação de algo mais parecido com um “Twitch pessoal”. Menos um show de estrela pop em um estádio e mais um artista local/independente em uma cafeteria. Um lugar onde a pessoa que está transmitindo possa realmente ler as mensagens na sala de bate-papo.
Portanto, em essência, o aplicativo final permitirá que um apresentador transmita a si mesmo, juntamente com os convidados, para um público e interaja com ele por meio de um chat de texto. Além disso, é uma oportunidade de mostrar como é possível integrar Web Components a um aplicativo já existente para adicionar funcionalidades adicionais.
O aplicativo existente mencionado acima é o Aplicativo de Exemplo de Transmissão , criada para demonstrar os recursos de transmissão da Video API da Vonage. Para adicionar um chat de texto, o Componentes Web da Interface do Usuário do Client SDK serão utilizados.
A Video API da Vonage oferece duas maneiras de compartilhar sessões de vídeo com o público.
Transmissões de vídeo interativas ao vivo - Nessa opção, há apresentadores (apresentador e convidado), além de espectadores conectados à sessão de Video. Os apresentadores transmitem e assinam as transmissões de áudio e vídeo uns dos outros, enquanto os espectadores apenas assinam as transmissões individuais dos apresentadores. (Observação: os espectadores podem ter permissão para transmitir seus próprios fluxos, já que estão conectados à sessão.) Como todos estão recebendo os fluxos uns dos outros, a latência é menor, mas há um limite máximo para o número de participantes, baseado no número de fluxos em transmissão. Esse limite é de 15.000 participantes interativos ao vivo simultaneamente. Há uma tabela útil na documentação para ajudar a determinar o número possível de espectadores.
Transmissões ao vivo - Os apresentadores continuam publicando e se inscrevendo nas transmissões uns dos outros, mas há uma única transmissão combinada que os espectadores assistem. A fusão das transmissões adicionará alguma latência para o espectador. Tanto as transmissões HLS quanto as RTMP estão disponíveis para transmissão. A versão mais recente introduz uma opção de transmissão HLS de baixa latência que reduz significativamente a latência para cerca de 4 a 6 segundos. Essa opção se aproxima mais da forma como o Twitch, o YouTube, o Facebook e outras plataformas lidam com transmissões ao vivo. Há também a nova opção HLS DVR, que permite aos espectadores pausar e retomar transmissões ao vivo.
O exemplo de transmissão da Video API da Vonage permite fazer as duas coisas, mas, neste caso, vamos nos concentrar na opção de transmissões ao vivo para nosso aplicativo pessoal do Twitch.
O que seria de uma transmissão ao vivo no Twitch sem um chat? Para adicionar essa funcionalidade, o Componentes da Web da interface do usuário do Client SDK serão utilizados. Mais especificamente, o vc-messages, vc-text-input, e vc-typing-indicator serão integrados.
Adicionar Web Components a uma aplicação existente que você não criou pode exigir algumas considerações a mais do que se fosse um projeto novo ou um que você esteja desenvolvendo no momento. Aqui estão algumas coisas pelas quais passei ao adicionar um chat à aplicação de exemplo Broadcast.
Será que a aplicação existente tem espaço suficiente para a inclusão dos Web Components? Dependendo do layout, pode ser necessário fazer alguns ajustes. É bom planejar com antecedência como você quer que o resultado final fique e, depois, analisar o código para ver o que precisa ser reposicionado. Felizmente, o layout do aplicativo de exemplo Broadcast não era muito complexo. Bastou estreitar um pouco a seção de Video para criar espaço para a interface de bate-papo. Isso envolveu principalmente CSS.
Para integrar o chat ao aplicativo de forma mais harmoniosa, você pode definir o estilo dos Web Components para que combinem com os demais elementos da interface do usuário.
Acabamos de abordar a integração dos Web Components na interface do usuário do aplicativo, mas e quanto à integração com a experiência do usuário? O que os Web Components precisam para funcionar e esses recursos já estão disponíveis no aplicativo?
Por exemplo, o chat exige um nome de usuário para que todos saibam quem digitou cada mensagem. Não seria uma experiência muito boa se, depois de fazer login em uma aplicação com nome de usuário e senha, o usuário tivesse que digitar novamente seu nome de usuário para participar do chat. Como o escopo do aplicativo de exemplo Broadcast envolvia o login, eu simplesmente adicionei um campo de entrada para que o usuário insira o nome de usuário que gostaria de usar no chat.
Os componentes web da interface do usuário do Client SDK também precisam saber o ID da conversa para que possam enviar e exibir as mensagens no chat correto. O aplicativo de exemplo “Broadcast” usa parâmetros na URL para passar algumas informações sobre o fluxo; acabei de adicionar mais um para o ID da conversa, para que todos entrem no mesmo chat.
Mais uma coisa. Você já acessou uma página no Twitch em que havia uma transmissão ao vivo e o Video estava sendo reproduzido, mas o som estava desligado? Bem, isso se deve à política de reprodução automática de muitos navegadores. Para estar em conformidade com essa política, silenciei a transmissão de Video por padrão e adicionei um botão para ativá-la e desativá-la.
Se você quiser ver por si mesmo o aplicativo criado em ação, pode fazer um remix do projeto Glitch. Ao executar um script de configuração e inserir algumas chaves e segredos de API, você também poderá ter seu próprio Twitch pessoal.
Fique de olho em uma próxima postagem no blog, na qual apresentaremos o novo Vonage Experience Composer. Pense nisso como uma forma de capturar a tela de todo o seu aplicativo (streams de vídeo, interface do usuário, chat e tudo mais), que pode ser usada para gravações e/ou transmissões.
Como sempre, se você tiver alguma dúvida ou comentário, fique à vontade para entrar em contato conosco no nosso canal da comunidade no Slack.