Cómo añadir Video a tu React Chat App con Nexmo

En Nexmo, estamos muy entusiasmados con la capacidad de crear viajes de clientes a través de conversaciones con nuestra nueva Conversation API. Permite a los usuarios no solo desplegar una experiencia omnicanal aprovechando la voz, la mensajería y el vídeo en una sola experiencia, sino también mantener el contexto de esas conversaciones para ofrecer una experiencia superior al cliente.

Las posibilidades que ofrece esta API son infinitas y me lo he pasado en grande explorando las distintas formas de incorporarla a mis aplicaciones en las últimas semanas.

Por qué nos entusiasma

• La comunicación omnicanal le permite hacer todo -voz, mensajes y eventos personalizados- a la vez y en tiempo real.

• Es un modelo robusto: todo se construye sobre él, lo que significa que puede añadirle cualquier canal o evento personalizado que desee.

• Conservamos el contexto para usted, haciendo accesible el historial de sus conversaciones

Creemos una aplicación con la Conversation API

Hoy, vamos a construir algo a partir de la aplicación de chat que se construyó en este tutorial introductorio. Esa aplicación original utiliza Client SDK de Nexmo y se conecta a la Conversation API. Y hoy, vamos a añadir chat de vídeo a esa aplicación React utilizando la API TokBox.

demo of app

Caso práctico de nuestra aplicación

Imagine que está conversando con un cliente en su sitio web. Tal vez están llegando porque están frustrados con un servicio y para que se sientan escuchados y vistos, se necesita apoyo adicional. ¡Este tutorial le guiará a través de los pasos de cómo añadir fácilmente la capacidad de resolver el problema con ellos cara a cara con el chat de vídeo!

Requisitos

Para abreviar, vamos a suponer que has seguido el tutorial tutorial de React y Express. Para empezar, necesitarás de nuevo una Account de Vonage y Node instalado en tu entorno de desarrollo. Si quieres saltar a un proyecto de trabajo, puedes remezclar el código aquí en Glitch. De lo contrario, ¡en sólo unos pasos podrás crear tu propia aplicación de videochat desde cero!

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Crear una aplicación

En tu terminal, ejecuta:

El primer elemento de la salida es el ID de la Aplicación, que debe guardar en algún lugar seguro. Nos referiremos a esto como YOUR_APP_ID más adelante. El último valor en la salida es una ubicación de clave privada. La clave privada se utiliza para generar JWTs que se utilizan para autenticar sus interacciones con Nexmo.

Crear una conversación

Crear una conversación dentro de la aplicación:

El resultado es el ID de la conversación. Guárdelo ya que es el identificador único de la conversación que se ha creado. Nos referiremos a esto como YOUR_CONVERSATION_ID más adelante.

Crear un usuario

Crea un usuario que participará en la conversación:

El resultado es el ID de usuario. De nuevo, guarde este id ya que es el identificador único para el usuario que ha sido creado. Nos referiremos a esto como YOUR_USER_ID más adelante.

Crear una aplicación TokBox

Una vez conectado a tu cuenta TokBox, en la esquina izquierda de tu página, selecciona Projects y, en el menú desplegable, haga clic en Create New Project.

New project tok-box

A partir de ahí, seleccione Create Custom Project y ponle el nombre que quieras. Una vez creado el proyecto, haz clic en View Project y guarda la clave API en la parte superior. A continuación, desplázate hasta la sección titulada Project Tools y haz clic en el botón azul Create Session ID.

session ID

Copie y pegue el identificador de sesión en la siguiente sección Generate Token. Si lo desea, puede prolongar el tiempo de caducidad más allá de la hora predeterminada. A continuación, haga clic en el botón azul Generate Token azul y guarde el token generado.

Organizar la aplicación

Retomando el tutorial anterior, vamos a mover todos los componentes del chat a una carpeta ChatComponents y creemos una nueva carpeta VideoComponents para nuestros nuevos archivos.

Directory structure

En el archivo NexmoApp.js intercambia uno de los identificadores de conversación por el YOUR_CONVERSATION_ID que acabamos de generar en el terminal.

Añadir el componente Video

Instala la API de TokBox ejecutándola en tu terminal:

Dentro de la carpeta VideoComponents crear los archivos: CheckBox.js ConnectionStatus.js Publisher.js Subscriber.js VideoComponent.js

En el Chatroom.jsimporte el VideoComponent en la parte superior y llame a <VideoComponent /> debajo del botón Chat dentro de la sentencia return.

Construir el componente VideoComponent

Llamarás al Publisher, Subscribery ConnectionStatus componentes su 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);

Rellena los campos apikey, sessionId y token con las credenciales que creamos al crear la aplicación TokBox.

Crear el componente editor

La página Publisher será un componente basado en clases y tendrá el siguiente aspecto:

// 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;

Fíjate que dentro del <OTPublisher /> estamos pasando publishAudio, publishVideoy videoSource a la properties y la función onError() a la onError puntal.

Ahora el componente Publisher mostrará un avatar hasta que el usuario dé permiso a OpenTok para acceder a la cámara del ordenador.

Construir el componente de abonado

El sitio Subscriber también será un componente basado en clases con subscribeToAudio y subscribeToVideo como propiedades:

// 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;

Construir el componente ConnectionStatus

Utilizaremos el archivo ConnectionStatus.js para mostrar el estado de la conexión al usuario:

// 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;

Crear esto ayuda a su usuario a entender si el Video se ha conectado con éxito o no:

Connection status

Construir el componente CheckBox

Utilizaremos el componente <CheckBox /> dentro de los componentes <Publisher /> y <Subscriber /> componentes:

// 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ñadir el componente CheckBox ayuda a que la interfaz de usuario de la aplicación funcione como los usuarios esperan:

checkbox gif

Pruebe su aplicación de chat de vídeo

Ya has creado los 5 componentes de React:

• Componente de vídeo

• Editorial

• Abonado

• ConnectionStatus

• Casilla de verificación

Ejecutando npm start desde la raíz de tu proyecto debería poner en marcha tu aplicación. Al seleccionar el menú desplegable junto a User Namedeberías debería ver el nombre lauren rellenado.

Intente añadir su nombre en el cuadro de texto y pulse el botón Create user . Selecciona el chat sincronizado en el menú desplegable.

Ahora puedes verificar que la aplicación se sincroniza correctamente con tu conversación ejecutando esta solicitud en tu terminal:

Además de laurentu nombre debería aparecer ahora en esa 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

Permita que el navegador acceda a su cámara y micrófono y ahora debería ver el componente de Video en la pantalla. Si abres otro navegador con el mismo código y te unes al chat como un usuario diferente, verás que también se añade otro componente de vídeo.

demo of app

Para ver la aplicación en funcionamiento, consúltela en👉 Glitch¡! Para hacerlo tuyo, remítelo y añade tus propias credenciales de Nexmo y TokBox en el archivo.env archivo.

🌟¡Colaboremos!🌟

¡Enhorabuena! Has añadido vídeo a tu aplicación de chat. ¿No es genial? Yo estoy bastante obsesionado y he empezado a buscar todas las oportunidades en mi vida cotidiana para añadir el chat de vídeo a mis conversaciones.

Si le interesa jugar con nuestra nueva Conversation API, por favor, compártala. 🤩

Siempre intentamos pensar en casos de uso creativos o innovadores para él, por lo que me encantaría colaborar y crear nuevas aplicaciones juntos.

Es importante señalar que la Conversation API se encuentra actualmente en fase beta y está en constante evolución sobre la base de sus aportaciones y comentarios. Como siempre, estaremos encantados de ayudarle con cualquier pregunta en nuestra comunidad slack o en support@nexmo.com.