Como adicionar Video ao seu aplicativo de bate-papo em React com o Nexmo

Na Nexmo, estamos muito entusiasmados com a possibilidade de criar jornadas do cliente por meio de conversas com nossa nova Conversation API. Ela permite que os usuários não apenas implementem uma experiência omnicanal, combinando voz, mensagens e vídeo em uma única experiência, mas também mantenha o contexto dessas conversas para oferecer uma experiência superior ao cliente.

As possibilidades que essa API vai revelar parecem infinitas e, por isso, me diverti muito explorando as diferentes maneiras de incorporá-la às minhas Applications nas últimas semanas.

Por que estamos animados com isso

• A comunicação omnicanal permite que você faça tudo — Voice, mensagens e eventos personalizados — ao mesmo tempo e em tempo real

• É um modelo robusto — tudo é construído com base nele, o que significa que você pode adicionar qualquer canal ou evento personalizado que desejar

• Nós mantemos o contexto para você, tornando o histórico das suas conversas acessível

Vamos criar um aplicativo com a Conversation API

Hoje, vamos desenvolver algo com base no aplicativo de bate-papo que foi criado no este tutorial introdutório. Esse aplicativo original usa o Client SDK da Nexmo e se conecta à Conversation API. E hoje, vamos adicionar o chat por vídeo a esse aplicativo React usando a API da TokBox.

demo of app

Caso de uso do nosso aplicativo

Imagine que você está conversando com um cliente no seu site. Talvez ele esteja entrando em contato porque está insatisfeito com um serviço e, para que se sinta ouvido e valorizado, é necessário oferecer um atendimento extra. Este tutorial vai orientá-lo passo a passo sobre como adicionar facilmente a possibilidade de resolver o problema com ele cara a cara, por meio de um chat por Video!

Pré-requisitos

Para resumir, vamos supor que você tenha seguido o tutorial do React e do Express. Para começar, você precisará novamente de um Account na Vonage e do Node instalado em seu ambiente de desenvolvimento. Se quiser pular direto para um projeto pronto, você pode remixar o código aqui no Glitch. Caso contrário, em apenas algumas etapas, você pode criar seu próprio aplicativo de videochamada do zero!

Criar um aplicativo

No seu terminal, execute:

O primeiro item na saída é o ID do aplicativo, que você deve salvar em um local seguro. Vamos nos referir a ele como YOUR_APP_ID mais tarde. O último valor na saída é a localização da chave privada. A chave privada é usada para gerar JWTs, que servem para autenticar suas interações com a Nexmo.

Criar uma conversa

Crie uma conversa dentro do aplicativo:

O resultado é o ID da conversa. Salve-o, pois esse é o identificador exclusivo da conversa que foi criada. Vamos nos referir a ele como YOUR_CONVERSATION_ID mais tarde.

Criar um usuário

Crie um usuário que participará da conversa:

O resultado é o ID do usuário. Mais uma vez, salve esse ID, pois ele é o identificador exclusivo do usuário que foi criado. Vamos nos referir a ele como YOUR_USER_ID mais tarde.

Criar uma aplicação TokBox

Depois de fazer login na sua conta do TokBox, no canto esquerdo da página, selecione Projects e, no menu suspenso, clique em Create New Project.

New project tok-box

A partir daí, selecione Create Custom Project e dê a ele o nome que quiser. Depois de criar o projeto, clique View Project e salve a chave de API na parte superior. Em seguida, role a página até a seção intitulada Project Tools e clique no botão azul para Create Session ID.

session ID

Copie e cole esse sessionID na seção abaixo Generate Token. Fique à vontade para prolongar o tempo de validade além do padrão de 1 hora, se desejar. Em seguida, clique no botão azul Generate Token e salve o token gerado.

Organizar o aplicativo

Retomando de onde o último tutorial parou, vamos mover todos os componentes do chat para uma ChatComponents pasta e criar uma nova VideoComponents pasta para nossos novos arquivos.

Directory structure

No NexmoApp.js arquivo, substitua um dos IDs de conversa por YOUR_CONVERSATION_ID que acabamos de gerar no terminal.

Adicionar o componente de vídeo

Instale a API do TokBox executando o seguinte comando no seu terminal:

Dentro da VideoComponents pasta, crie os arquivos: CheckBox.js ConnectionStatus.js Publisher.js Subscriber.js VideoComponent.js

No Chatroom.js, importe o VideoComponent na parte superior e chame <VideoComponent /> abaixo do botão “Chat”, dentro da instrução return.

Criar o componente VideoComponent

Você chamará o Publisher, Subscriber, e ConnectionStatus componentes de seu VideoComponent.js:

// VideoComponent.js

import React from 'react';
import { OTSession, OTStreams, preloadScript } from 'opentok-react';
import ConnectionStatus from './ConnectionStatus';
import Publisher from './Publisher';
import Subscriber from './Subscriber';

class VideoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      connected: false
    };
    this.sessionEvents = {
      sessionConnected: () => {
        this.setState({ connected: true });
      },
      sessionDisconnected: () => {
        this.setState({ connected: false });
      }
    };
  }
 onError = (err) => {
    this.setState({ error: `Failed to connect: ${err.message}` });
  }

  render() {
    return (
      <OTSession
        apiKey=YOUR_TOKBOX_API_KEY
        sessionId=YOUR_TOKBOX_SESSION_ID
        token=YOUR_TOKBOX_TOKEN
        eventHandlers={this.sessionEvents}
        onError={this.onError}
        >
        {this.state.error ? <div id="error">{this.state.error}</div> : null}

        <ConnectionStatus connected={this.state.connected} />

        <Publisher />
        <OTStreams>
          <Subscriber />
        </OTStreams>
      </OTSession>
    );
  }
}

export default preloadScript(VideoComponent);

Preencha os campos apikey, sessionId e token com as credenciais que criamos ao criar o aplicativo TokBox.

Compilar o componente Publisher

O Publisher será um componente baseado em classe e terá a seguinte aparência:

// Publisher.js

import React from "react";
import { OTPublisher } from "opentok-react";
import CheckBox from "./CheckBox";

class Publisher extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: null,
      audio: true,
      video: true,
      videoSource: "camera"
    };
  }

  setAudio = audio => {
    this.setState({ audio });
  };

  setVideo = video => {
    this.setState({ video });
  };

  changeVideoSource = videoSource => {
    this.state.videoSource !== "camera"
      ? this.setState({ videoSource: "camera" })
      : this.setState({ videoSource: "screen" });
  };

  onError = err => {
    this.setState({ error: `Failed to publish: ${err.message}` });
  };

  render() {
    return (
      <div className="publisher">
        Publisher
        {this.state.error ? <div id="error">{this.state.error}</div> : null}
        <OTPublisher
          properties={{
            publishAudio: this.state.audio,
            publishVideo: this.state.video,
            videoSource:
              this.state.videoSource === "screen" ? "screen" : undefined
          }}
          onError={this.onError}
        />
        <CheckBox label="Share Screen" onChange={this.changeVideoSource} />
        <CheckBox
          label="Publish Audio"
          initialChecked={this.state.audio}
          onChange={this.setAudio}
        />
        <CheckBox label="Publish Video" initialChecked={this.state.video} onChange={this.setVideo} />
      </div>
    );
  }
}
export default Publisher;

Observe que, dentro do <OTPublisher /> estamos passando publishAudio, publishVideo, e videoSource para o properties prop e à função onError() para o onError adereço.

Agora, o Publisher componente exibirá um avatar até que o usuário conceda permissão ao OpenTok para acessar a câmera do computador.

Criar o componente de assinante

O Subscriber também será um componente baseado em classe com subscribeToAudio e subscribeToVideo como propriedades:

// Subscriber.js

import React from "react";

import { OTSubscriber } from "opentok-react";
import CheckBox from "./CheckBox";

class Subscriber extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: null,
      audio: true,
      video: true
    };
  }

  setAudio = audio => {
    this.setState({ audio });
  };

  setVideo = video => {
    this.setState({ video });
  };

  onError = err => {
    this.setState({ error: `Failed to subscribe: ${err.message}` });
  };

  render() {
    return (
      <div className="subscriber">
        Subscriber
        {this.state.error ? <div id="error">{this.state.error}</div> : null}
        <OTSubscriber
          properties={{
            subscribeToAudio: this.state.audio,
            subscribeToVideo: this.state.video
          }}
          onError={this.onError}
        />
        <CheckBox
          label="Subscribe to Audio"
          initialChecked={this.state.audio}
          onChange={this.setAudio}
        />
        <CheckBox
          label="Subscribe to Video"
          initialChecked={this.state.video}
          onChange={this.setVideo}
        />
      </div>
    );
  }
}
export default Subscriber;

Crie o componente ConnectionStatus

Vamos usar o ConnectionStatus.js arquivo para exibir o status da conexão ao usuário:

// ConnectionStatus.js

import React from "react";

class ConnectionStatus extends React.Component {
  render() {
    let status = this.props.connected ? "Connected" : "Disconnected";
    return (
      <div className="connectionStatus">
        <strong>Status:</strong> {status}
      </div>
    );
  }
}
export default ConnectionStatus;

Isso ajuda o usuário a saber se o Video foi reproduzido com sucesso ou não:

Connection status

Criar o componente CheckBox

Vamos usar o <CheckBox /> componente tanto no <Publisher /> e <Subscriber /> :

// CheckBox.js

import React from "react";
import { uniqueId } from "lodash";

class CheckBox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      id: uniqueId("Checkbox"),
      isChecked: this.props.initialChecked
    };
  }

  onChange = event => {
    let isChecked = event.currentTarget.checked;
    this.setState({ isChecked });
  };

  componentDidUpdate(prevProps, prevState) {
    if (
      prevState.isChecked !== this.state.isChecked &&
      typeof this.props.onChange === "function"
    ) {
      this.props.onChange(this.state.isChecked);
    }
  }

  render() {
    return (
      <div>
        <label htmlFor={this.state.id}>{this.props.label}</label>

        <input
          type="checkbox"
          checked={this.state.isChecked}
          id={this.state.id}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
export default CheckBox;

A inclusão do CheckBox componente ajuda a fazer com que a interface do usuário do aplicativo funcione da maneira que os usuários esperam:

checkbox gif

Teste seu aplicativo de videochamada

Você já criou todos os 5 componentes do React:

• VideoComponent

• Editora

• Assinante

• Status da conexão

• Caixa de seleção

Executar npm start a partir da raiz do seu projeto deve fazer com que seu aplicativo seja iniciado e comece a funcionar. Ao selecionar o menu suspenso ao lado de User Name, você deverá ver o nome lauren já preenchido.

Tente adicionar seu nome na caixa de texto e clique no Create user botão. Selecione o chat sincronizado no menu suspenso.

Agora você pode verificar se o aplicativo está sincronizado corretamente com sua conversa executando esta solicitação no seu terminal:

Além disso, lauren, seu nome já deve estar visível nessa lista:

name                                     | user_id                                  | user_name | state  
---------------------------------------------------------------------------------------------------------
MEM-aaaaaaaa-bbbb-cccc-dddd-0123456789ab | USR-aaaaaaaa-bbbb-cccc-dddd-0123456789ab | lauren     | JOINED
MEM-vvvvvvvv-eeee-ffff-eeee-3456789ab012 | USR-bbbbbbbb-cccc-dddd-eeee-3456789ab012 | your-name  | JOINED

Conceda ao navegador permissão para acessar sua câmera e seu microfone, e agora você deverá ver o componente de Video na tela! Se você abrir outro navegador com o mesmo código e entrar no chat como um usuário diferente, verá que outro componente de Video também foi adicionado.

demo of app

Para ver o aplicativo em funcionamento, confira-o em 👉 Falha! Para personalizá-lo, modifique-o e insira suas próprias credenciais do Nexmo e do TokBox no .env arquivo.

🌟Vamos colaborar!🌟

Parabéns! Você conseguiu adicionar vídeo ao seu aplicativo de bate-papo. Não é demais?! Eu, pelo menos, estou bem empolgado e já comecei a procurar todas as oportunidades possíveis no meu dia a dia para incluir o bate-papo por vídeo nas minhas conversas!

Se você tiver interesse em experimentar nossa nova Conversation API, por favor, compartilhe 🤩

Estamos sempre tentando pensar em casos de uso criativos ou inovadores para isso e, por isso, ficaria MUITO animado em colaborar e criar novos aplicativos juntos.

É importante observar que a Conversation API está atualmente em fase beta e está em constante evolução com base nas suas sugestões e comentários. Como sempre, ficaremos felizes em ajudar com qualquer dúvida em nosso Slack da comunidade ou pelo e-mail support@nexmo.com.