Crear Video Chat Personalizado con Componentes React y Vonage

Ten en cuenta que React no es compatible oficialmente con la Video API de Vonage.

Recientemente he comenzado a experimentar con plataforma Video API de Vonage y a crear algunas aplicaciones de inicio con chat de vídeo.

tweet of playing with Vonage Video API for first time

Y aunque es divertido y un poco tonto añadir rápidamente una retransmisión en directo de mi cara a una aplicación en la que estoy trabajando, pronto empecé a sentir curiosidad por otros casos de uso. O más bien, ¿cuál es el beneficio de construirlo yo mismo en lugar de utilizar una de las muchas otras opciones de videoconferencia que existen?

Para explorar todas las funcionalidades de la API, se me ocurrió crear una aplicación para los alumnos del bootcamp al que asistí, Ada Developers Academy.

Ada es un programa gratuito de un año de duración para que mujeres y personas con diversidad de género aprendan a programar. Me siento ridículamente afortunada de haber asistido y de que me hayan dado las herramientas para pasar de ser profesora de inglés a ingeniera de software en sólo un año. Así que pensé que una buena forma de devolver el favor sería crear un portal para que los estudiantes se pusieran en contacto con tutores y recibieran ayuda en tiempo real y cara a cara de mentores del sector. Además, ¡podría aprender más sobre la Video API de Vonage al mismo tiempo!

Mientras creaba ese portal, pronto descubrí lo que muchos ingenieros habían descubierto antes: lo increíble que es tener la propiedad y el control completos de la funcionalidad del código de tu aplicación. Podía adaptar la aplicación y mi código a las necesidades de los estudiantes y tutores, lo que me parecía muy potente. Estaba jugando específicamente con la envoltura React de la Video API llamada, OpenTok Reactque es básicamente un componente web para el SDK de JavaScript. Hace que sea increíblemente sencillo integrar vídeo de alta calidad y streaming de audio en cualquier aplicación React. Proporciona componentes personalizables que son lo suficientemente flexibles como para incrustar dentro de cualquiera de mis aplicaciones React con bastante facilidad.

Este es un tutorial sobre cómo usar ese React Wrapper y descomponer el código en componentes React modularizados y reutilizables para incrustar en cualquiera o en todas tus futuras aplicaciones React.

Requisitos previos

• Node.js instalado

• Regístrese para obtener una cuenta de Video API de Vonage

Cómo crear un videochat personalizado con la Video API de Vonage y componentes de React

Vas a realizar las siguientes tareas para crear tu aplicación:

1. Crear un proyecto de Video API

2. Crear una aplicación React con create-react-app

3. Construir componentes React reutilizables:

   • Editorial

   • Abonado

   • ConnectionStatus

   • Casilla de verificación

4. Ejecute su aplicación de chat de vídeo

Este tutorial te llevará a través del proceso desde cero. Aunque si quieres ver el código terminado, puedes clonar el repositorio repositorio git de este proyecto.

Crear un proyecto de Video API de Vonage

Una vez que hayas iniciado sesión en tu cuenta de Video API de Vonage, en la esquina izquierda de tu página, selecciona Projects y, en el menú desplegable, haz clic en Create New Project.

where to click new project demo

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.

what to click to generate a sessionID

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.

Crear una aplicación React concreate-react-app

Antes de entrar en materia, asegúrese de verificar que tiene una versión actualizada de Node instalada en su máquina (5.2 como mínimo) ejecutando node -v en tu terminal.

A continuación, ejecute el comando en el directorio en el que desea que se aloje el proyecto:

He llamado a mi proyecto react-components-tokboxpero puedes ponerle el nombre que quieras.

Entra en tu proyecto e instala las dos dependencias que utilizaremos para este proyecto:

La opentok-react biblioteca es una envoltura React que se compone de unos pocos componentes que vamos a utilizar hoy:

• Componente OTSession

• Componente OTPublisher

• Componente OTStreams

• Componente OTSubscriber

• ayudante createSession

• preloadScript Componente de orden superior

Ejecute npm start para asegurarnos de que todo se ha instalado correctamente. localhost:3000 debería abrirse automáticamente y estar ejecutando el código boilerplate React starter.

Configuración

Desplácese a la carpeta src y crea un archivo config.js archivo:

Abre ese nuevo archivo y añade las credenciales que acabas de generar al crear un proyecto TokBox:

// src/config.js
export default {
  API_KEY: 'XYZ',
  SESSION_ID: 'XYZ',
  TOKEN: 'XYZ'
};

Ahora, abra el archivo src/index.js e importa el archivo congfig.js archivo:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import config from './config';

Ahora, para utilizar realmente esas credenciales, asegúrese de pasarlas al componente <App /> componente:

// src/index.js
ReactDOM.render(<App
  apiKey={config.API_KEY}
  sessionId={config.SESSION_ID}
  token={config.TOKEN}
  />, document.getElementById('root'));

En el archivo src/App.js vamos a importar algunos de los componentes de la envoltura React:

// src/App.js
import { OTSession, OTStreams, preloadScript } from 'opentok-react';

Creación de componentes React reutilizables

Cree una nueva components carpeta dentro de src. En esa carpeta, crea tus componentes:

Ahora, de nuevo en su archivo src/App.js importa tres de esos componentes:

// src/App.js
import ConnectionStatus from './components/ConnectionStatus';
import Publisher from './components/Publisher';
import Subscriber from './components/Subscriber';

Cambiemos el componente <App /> en ese archivo para que esté basado en clases en lugar de ser funcional.

// src/App.js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  };
  render() {
    return (
      <div>
        TokBox
      </div>
    );
  }
}
export default preloadScript(App);

Dentro del constructor, añada algún estado y dos sessionEvents para detectar el estado de conectividad:

// src/App.js
constructor(props) {
  super(props);
  this.state = {
    error: null,
    connected: false
  };
  this.sessionEvents = {
    sessionConnected: () => {
      this.setState({ connected: true });
    },
    sessionDisconnected: () => {
      this.setState({ connected: false });
    }
  };
}

Fuera del constructor, cree una función onError():

// src/App.js
  onError = (err) => {
    this.setState({ error: `Failed to connect: ${err.message}` });
  }

Dentro de la función render() añada el componente <OTSession /> que pasa las credenciales del archivo src/index.js archivo:

// src/App.js
render() {
  return (
      <OTSession
        apiKey={this.props.apiKey}
        sessionId={this.props.sessionId}
        token={this.props.token}
        eventHandlers={this.sessionEvents}
        onError={this.onError}
        >
      </OTSession>
    );
  }

Ahora, dentro del <OTSession /> vamos a manejar los errores de forma preventiva y a llamar a los componentes <ConnectionStatus />, <Publisher />y <Subscriber />:

// src/App.js
  {this.state.error ? <div id="error">{this.state.error}</div> : null}
  <ConnectionStatus />
  <Publisher />
  <OTStreams>
    <Subscriber />
  </OTStreams>

Crear el componente ConnectionStatus

En el archivo src/components/ConnectionStatus.js pensemos en la mejor manera de mostrar el estado de la conexión al usuario:

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

Ahora, en el archivo src/App.js pasamos el estado al componente <ConnectionStatus /> componente:

// src/App.js
<ConnectionStatus connected={this.state.connected} />

Crear el componente editor

Ahora, en la parte superior de su src/components/Publisher.js importe los archivos OTPublisher de opentok-react:

// src/components/Publisher.js
import React from 'react';
import { OTPublisher } from 'opentok-react';
import CheckBox from './CheckBox';

A continuación, vamos a crear un componente basado en clases Publisher:

// src/components/Publisher.js
class Publisher extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      audio: true,
      video: true,
      videoSource: 'camera'
    };
  }
  setAudio()
  setVideo()
  setVideoSource()
  onError()

  render() {
    return (
      <div>
        <OTPublisher />
      </div>
    );
  }
}
export default Publisher;

Rellenemos esas funciones con algún estado:

// src/components/Publisher.js
  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}` });
  }

Y dentro del <OTPublisher /> pasemos en publishAudio, publishVideoy videoSource a la properties prop y la función onError() a la función onError puntal:

// src/components/Publisher.js
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}
      />
    </div>
  };

Crear el componente de abonado

Ahora, en el archivo src/components/Subscriber.js archivo, vamos a importar los archivos y componentes y crear un componente basado en clases Subscriber con subscribeToAudio y subscribeToVideo como properties dentro de la clase <OTSubscriber />:

// src/components/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}
        />
      </div>
    );
  }
}
export default Subscriber;

Construir el componente CheckBox

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

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

Utilicemos ahora tanto el componente <CheckBox /> en el archivo src/components/Publisher.js archivo:

// src/components/Publisher.js
<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}
/>

Y también en el src/components/Subscriber.js archivo:

// src/components/Subscriber.js
<CheckBox
  label="Subscribe to Audio"
  initialChecked={this.state.audio}
  onChange={this.setAudio}
/>
<CheckBox
  label="Subscribe to Video"
  initialChecked={this.state.video}
  onChange={this.setVideo}
/>

Y por último, vamos a añadir un poco de CSS simple para la aplicación en el archivo src/App.css archivo:

/* src/App.css */
body, html {
  background-color: pink;
  height: 100%;
  font-family: Verdana, Geneva, sans-serif
}
.connectionStatus {
  padding-top: 20px;
  margin-left: 5%;
  font-size: 1.5em;
}
.subscriber {
  margin-left: 10%;
}
.publisher {
  float: right;
  margin-right: 10%;
}
.OTPublisherContainer {
  width: 80vh !important;
  height: 80vh !important;
}
#error {
  color: red;
}

Ejecute su aplicación de chat de vídeo

Ya has creado los 4 componentes de React:

• Editorial

• Abonado

• ConnectionStatus

• Casilla de verificación

Puedes probar tu aplicación ejecutando npm start desde la raíz del proyecto en el terminal.

view after running npm start

¡Enhorabuena! Estos componentes son modularizados y reutilizables para cualquier futura aplicación React.

Ahora puedes conectarlos fácil y rápidamente a tu aplicación para habilitar la función de videochat. ¿No es genial? Yo estoy bastante obsesionado 😆 y he empezado a buscar todas las oportunidades en mi vida cotidiana para añadir el videochat.

🌟¡Colaboremos!🌟

Si tienes una idea creativa, nueva, tonta o innovadora sobre cómo utilizar el videochat, ¡compártela!

Me haría muchísima ilusión colaborar y crear nuevas aplicaciones juntos.