Rode seu aplicativo de videoconferência com chat de texto usando código aberto em ReacJs e Twilio Video

March 31, 2021
Escrito por

Rode seu aplicativo de videoconferência com chat de texto usando código aberto em ReacJs e Twilio Video

No ano passado, a Twilio lançou aplicativos de vídeo de implantação rápida para que os desenvolvedores se familiarizassem com o Programmable Video em até cinco minutos. Hoje, temos o prazer de anunciar a mais recente melhoria do aplicativo ReactJS de open source: suporte a bate-papo pronto para uso para mensagens em texto e em arquivos.

Não importa se você está usando o aplicativo como ponto de partida ou como referência canônica durante o desenvolvimento, ao adicionar esse recurso ao aplicativo ReactJS de open source, esperamos acelerar o desenvolvimento à medida que queira criar um bate-papo na sua experiência de vídeo.

Em primeiro lugar, esta publicação mostra por que o bate-papo é um canal valioso para a experiência de vídeo do usuário final, depois apresenta o novo recurso e analisa o que usamos para desenvolver (alerta de spoiler: utilizamos a própria Conversations API da Twilio).

Por que adicionar bate-papo à sua experiência de vídeo?

O bate-papo na experiência de vídeo oferece um canal útil para os usuários enviarem mensagens explicativas, perguntas da lista de pendências, compartilharem links relevantes e muito mais, sem interromper o palestrante.

Além disso, estamos vendo cada vez mais soluções de vídeo utilizarem o bate-papo para:

  • Promover a inclusão, o que oferece uma opção de comunicação mais confortável para os participantes
  • Incentivar a participação, o que facilita interações como dinâmicas, perguntas e respostas e muito mais
  • Aumentar a produtividade, o que cria uma experiência de mensagens exclusiva para as necessidades de seus usuários

Não importa o seu caso de uso ou setor, uma solução de bate-papo personalizada dentro da sua experiência de vídeo pode ser um canal de comunicação valioso para seus usuários.

Como iniciar o bate-papo para o aplicativo de implantação rápida ReactJS

O aplicativo de implantação rápida ReactJS da Twilio foca o caso de uso de colaboração e a nova experiência de bate-papo leva esta questão em consideração. Depois de instalar o aplicativo ReactJS atualizado, você verá um botão de bate-papo na barra de menu que permite que os usuários finais compartilhem mensagens de texto ou anexos de arquivo para todos os participantes.

GIF mostrando a interface do usuário do aplicativo de vídeo de implantação rápida, incluindo a funcionalidade de chat em tempo real baseado em texto

As interações de bate-papo têm a duração da chamada, o que significa que os usuários ainda terão acesso ao histórico de bate-papo se forem adicionados à chamada com atraso e precisarem se atualizar do conteúdo, serem desconectados ou precisarem sair por um momento e reingressar posteriormente.

Os componentes do aplicativo ReactJS, incluindo aqueles apresentados na janela de bate-papo, aproveitam a biblioteca MaterialUI, o que facilita o estilo, o tema e a personalização das IUs para seus usuários.

Desenvolvido com a API Conversations da Twilio

O novo recurso foi criado usando a API Conversations da Twilio, nossa API de última geração para bate-papo e mensagens entre canais. Na nossa implementação, o histórico de bate-papo é acessível a todos os usuários finais durante toda a chamada, mas a API Conversations oferece a você a flexibilidade de gerenciar participantes e buscar o histórico de mensagens da forma que achar adequada.

Este aplicativo de exemplo é apenas um ponto de partida para o que você pode fazer com a API Conversations. Veja alguns exemplos de como você pode ampliar o caso de uso além do aplicativo ReactJS:

  • Inicie a conversa a qualquer momento durante o ciclo de vida de seus clientes e leve essas interações para a experiência de vídeo
  • Acesse e analise o histórico de bate-papo a qualquer momento
  • Crie experiências de bate-papo multicanal com suporte para SMS, MMS e WhatsApp

OBSERVAÇÃO: o preço padrão se aplica ao uso da API Conversations. No entanto, o produto é gratuito para até 200 usuários ativos por mês. Clique aqui para obter mais informações sobre preços.

Experimente agora

Confira o novo recurso de bate-papo em execução e comece a compartilhar mensagens de texto, links ou arquivos relevantes para os colegas de equipe em poucos minutos. Os aplicativos de implantação rápida do Twilio Video utilizam o plugin do RTC da CLI da Twilio atualizado recentemente para incluir a lógica do lado do servidor necessária para que os participantes se conectem a uma conversa ao ingressar em uma sala. É possível começar a usar o aplicativo ReactJS depois de acessar o arquivo README ou instalar o aplicativo seguindo essas sete etapas:

# Clone the web application 
$ git clone https://github.com/twilio/twilio-video-app-react

# Change directories 
$ cd twilio-video-app-react

# Build the application 
$ npm install --production

# Install the Twilio CLI 
$ npm install twilio-cli -g 

# Login to your Twilio account using your Account SID and Auth Token 
$ twilio login 

# Install the RTC plugin 
$ twilio plugins:install @twilio-labs/plugin-rtc 

# Deploy! 
$ npm run deploy:twilio-cli 
deploying app... done Web App URL: https://video-app-1111-dev.twil.io?passcode=1111111111 Passcode: 1111111111

Pronto! Agora você já pode usar seu próprio aplicativo de colaboração por vídeo com suporte para bate-papo em texto e arquivo. Desenvolvemos este aplicativo para servir de referência ou ponto de partida conforme avança no crescimento de sua jornada com o Programmable Video da Twilio. Se tiver dúvidas ou ideias sobre como podemos melhorar essa experiência, seu feedback é muito bem-vindo!

Este artigo foi traduzido do original "Launch your own video app with text-based chat in minutes with the updated Twilio Video Open Source ReactJS application". Enquanto melhoramos nossos processos de tradução, adoraríamos receber seus comentários em help@twilio.com - contribuições valiosas podem render brindes da Twilio.