Créer un chat vidéo personnalisé avec React Components et Vonage

Veuillez noter que React n'est pas officiellement pris en charge par l'API Video de Vonage

J'ai récemment commencé à bricoler avec la plateforme Video API de Video API de Vonage de Vonage et à créer quelques applications de démarrage avec le chat vidéo.

tweet of playing with Vonage Video API for first time

Bien qu'il soit amusant et un peu idiot d'ajouter rapidement un live-stream de mon visage à une application sur laquelle je travaille, j'ai rapidement commencé à m'interroger sur d'autres cas d'utilisation. Ou plutôt, quel est l'avantage de le construire moi-même plutôt que d'utiliser l'une des nombreuses autres options de vidéoconférence existantes ?

Pour explorer toutes les fonctionnalités de l'API, j'ai pensé créer une application pour les étudiants du bootcamp auquel j'ai participé, Ada Developers Academy.

Ada est un programme gratuit d'un an destiné aux femmes et aux personnes issues de la diversité sexuelle pour leur permettre d'apprendre à coder. J'ai eu la chance inouïe de participer à ce programme et d'avoir reçu les outils nécessaires pour passer du statut de professeur d'anglais à celui d'ingénieur logiciel en l'espace d'un an seulement. J'ai donc pensé qu'un bon moyen de rendre la pareille serait de créer un portail permettant aux étudiants d'entrer en contact avec des tuteurs et d'obtenir une aide en temps réel et en face à face de la part de mentors de l'industrie. De plus, je pourrais en apprendre davantage sur l'API Video de Vonage en même temps !

En développant ce portail, j'ai rapidement découvert ce que tant d'ingénieurs avaient déjà fait : à quel point il est formidable d'être totalement propriétaire et de contrôler la fonctionnalité du code de son application. Je pouvais adapter l'application et mon code aux besoins des étudiants et des tuteurs, ce qui me semblait très puissant. Je jouais spécifiquement avec le wrapper React de Video API appelé, OpenTok Reactqui est essentiellement un composant web pour le SDK JavaScript. Il rend incroyablement simple l'intégration de flux vidéo et audio de haute qualité dans n'importe quelle application React. Il fournit des composants personnalisables qui sont suffisamment flexibles pour être intégrés dans n'importe laquelle de mes applications React assez facilement.

Ce tutoriel explique comment utiliser ce React Wrapper et décomposer le code en composants React modulaires et réutilisables à intégrer dans toutes vos futures applications React !

Conditions préalables

• Node.js installé

• S'inscrire à un compte compte Video API de Vonage

Comment créer un chat vidéo personnalisé avec l'API Video de Vonage et les composants React.

Vous allez accomplir les tâches suivantes pour créer votre application :

1. Créer un projet Video API

2. Créer une application React avec create-react-app

3. Construire des composants React réutilisables :

   • Éditeur

   • Abonné

   • État de la connexion

   • CheckBox

4. Faites fonctionner votre In-App Video

Ce tutoriel vous guidera à travers le processus en partant de zéro. Cependant, si vous souhaitez voir le code fini, vous pouvez cloner le dépôt dépôt git pour ce projet.

Créer un projet API Video de Vonage

Une fois connecté à votre compte Video API de Vonage, dans le coin gauche de votre page, sélectionnez Projects et, dans le menu déroulant, cliquez sur Create New Project.

where to click new project demo

À partir de là, sélectionnez Create Custom Project et donnez-lui le nom que vous souhaitez. Une fois le projet créé, cliquez sur View Project et enregistrez la clé API en haut.
Ensuite, descendez jusqu'à la section intitulée Project Tools et cliquez sur le bouton bleu pour Create Session ID.

what to click to generate a sessionID

Copiez et collez cet identifiant de session dans la section ci-dessous Generate Token. N'hésitez pas à prolonger le délai d'expiration au-delà de l'heure par défaut si vous le souhaitez.
Ensuite, cliquez sur le bouton bleu Generate Token et enregistrez le jeton généré.

Créer une application React aveccreate-react-app

Avant de commencer, vérifiez que vous avez une version à jour de Node installée sur votre machine (5.2 au minimum) en lançant node -v dans votre terminal.

Ensuite, dans le répertoire où vous souhaitez que ce projet soit installé, exécutez la commande suivante :

J'ai appelé mon projet react-components-tokboxmais vous pouvez lui donner le nom que vous voulez.

Allez dans votre projet et installez les deux dépendances que nous utiliserons pour ce projet :

La opentok-react bibliothèque est un wrapper React qui comprend quelques composants que nous utiliserons aujourd'hui :

• Composant OTSession

• Composant OTPublisher

• Composant OTStreams

• Composant OTSubscriber

• createSession Helper

• preloadScript Composant d'ordre supérieur

Exécuter npm start pour s'assurer que tout s'est installé correctement. localhost:3000 devrait s'ouvrir automatiquement et exécuter le code de démarrage React.

Configuration

Déplacez-vous dans le dossier src et créez un config.js fichier :

Ouvrez ce nouveau fichier et ajoutez les informations d'identification que vous avez générées tout à l'heure lorsque vous avez créé un projet TokBox :

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

Maintenant, ouvrez le fichier src/index.js et importez le fichier congfig.js fichier :

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

Maintenant, pour utiliser ces informations d'identification, assurez-vous de les transmettre à l'élément <App /> composant :

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

Dans le fichier src/App.js importons certains composants du wrapper React :

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

Construire des composants React réutilisables

Créer un nouveau components dans le dossier src. Dans ce dossier, créez vos composants :

Dans votre fichier src/App.js importez trois de ces composants :

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

Modifions le composant <App /> dans ce fichier pour qu'il soit basé sur les classes plutôt que sur les fonctions.

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

Dans le constructeur, ajoutez un état et deux sessionEvents pour détecter l'état de la connectivité :

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

En dehors du constructeur, créez une fonction onError():

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

Dans la fonction render() ajouter le composant <OTSession /> qui transmet les informations d'identification du fichier src/index.js du fichier :

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

Maintenant, dans le cadre de la <OTSession /> gérons les erreurs de manière préemptive et appelons les composants, <ConnectionStatus />, <Publisher />et <Subscriber />:

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

Construire le composant ConnectionStatus

Dans le fichier src/components/ConnectionStatus.js réfléchissons à la meilleure façon d'afficher l'état de la connexion à l'utilisateur :

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

Maintenant, dans le fichier src/App.js transmettez l'état au composant <ConnectionStatus /> au composant :

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

Construire le composant de l'éditeur

Maintenant, en haut de votre fichier src/components/Publisher.js importez les fichiers et le fichier OTPublisher de opentok-react:

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

En dessous, créons un composant basé sur une classe 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;

Remplissons ces fonctions avec un peu d'état :

// 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}` });
  }

Et à l'intérieur de la <OTPublisher /> passons à publishAudio, publishVideoet videoSource à la properties et la fonction onError() à la fonction onError l'accessoire :

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

Élaborer la composante "abonnés

Maintenant, dans le fichier src/components/Subscriber.js importons les fichiers et les composants et créons un composant basé sur les classes Subscriber avec subscribeToAudio et subscribeToVideo comme properties à l'intérieur de l'élément <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;

Construire le composant CheckBox

Nous utiliserons le composant <CheckBox /> à la fois dans le composant <Publisher /> et <Subscriber /> et dans les composants :

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

Utilisons maintenant le composant <CheckBox /> dans le fichier src/components/Publisher.js dans le fichier

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

Et aussi dans le src/components/Subscriber.js dossier :

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

Enfin, ajoutons quelques feuilles de style CSS simples pour l'application dans le fichier src/App.css dans le fichier

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

Faites fonctionner votre In-App Video

Vous avez maintenant créé les 4 composants React :

• Éditeur

• Abonné

• État de la connexion

• CheckBox

Vous pouvez tester votre application en lançant npm start depuis la racine de votre projet dans votre terminal.

view after running npm start

Félicitations ! Ces composants sont modulaires et réutilisables pour toute future application React.

Vous pouvez maintenant les brancher facilement et rapidement dans votre application pour activer la capacité de chat vidéo. C'est vraiment génial ! Je suis pour ma part assez obsédée 😆 et j'ai commencé à chercher toutes les occasions dans ma vie quotidienne pour ajouter le chat vidéo !

🌟Collaborons!🌟

Si vous avez une idée créative, nouvelle, idiote ou innovante sur la manière d'utiliser le chat vidéo, n'hésitez pas à la partager !

Je serais SUPER enthousiaste à l'idée de collaborer et de créer de nouvelles applications ensemble.