Comment ajouter de la Video à votre application de chat React avec Nexmo

Chez Nexmo, nous sommes très enthousiastes quant à la possibilité de créer des parcours clients à travers des conversations grâce à notre nouvelle API Conversation. Elle permet aux utilisateurs non seulement de déployer une expérience omnicanale exploitant la voix, la messagerie et la vidéo au sein d'une même expérience, mais aussi de conserver le contexte de ces conversations afin d'offrir une expérience client supérieure.

Les possibilités offertes par cette API sont infinies et je me suis donc amusé à explorer les différentes façons de l'intégrer dans mes Applications au cours des dernières semaines.

Pourquoi nous sommes enthousiastes

• La communication omnicanale vous permet de tout faire - voix, messages et événements personnalisés - en même temps et en temps réel.

• Il s'agit d'un modèle robuste, sur lequel tout est construit, ce qui signifie que vous pouvez y ajouter n'importe quel canal ou événement personnalisé.

• Nous conservons le contexte pour vous, rendant ainsi accessible l'historique de vos conversations

Construisons une application avec l'API Conversation

Aujourd'hui, nous allons construire quelque chose à partir de l'application de chat qui a été construite dans ce tutoriel d'introduction. Cette application originale utilise le Client SDK de Nexmo et se connecte à l'API Conversation. Aujourd'hui, nous allons ajouter un chat vidéo à cette application React en utilisant l'API TokBox.

demo of app

Le cas d'utilisation de notre application

Imaginez que vous discutez avec un client sur votre site web. Il se peut qu'il vous contacte parce qu'il est frustré par un service et pour qu'il se sente entendu et vu, un soutien supplémentaire est nécessaire. Ce tutoriel vous guidera à travers les étapes de la façon d'ajouter facilement la possibilité de résoudre le problème avec eux en face à face avec le chat vidéo !

Pré-requis

Pour faire court, supposons que vous ayez suivi le tutoriel tutoriel React et Express. Pour commencer, vous aurez à nouveau besoin d'un compte Vonage et de Node installé dans votre environnement de développement. Si vous souhaitez passer à un projet fonctionnel, vous pouvez remixer le code ici dans Glitch. Sinon, en quelques étapes seulement, vous pouvez créer votre propre application de Video Chat à partir de zéro !

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.

Créer une application

Dans votre terminal, exécutez :

Le premier élément de la sortie est l'identifiant de l'Applications, que vous devez enregistrer dans un endroit sûr. Nous y ferons référence en tant que YOUR_APP_ID par la suite. La dernière valeur de la sortie est l'emplacement de la clé privée. La clé privée est utilisée pour générer des JWT qui sont utilisés pour authentifier vos interactions avec Nexmo.

Créer une conversation

Créez une conversation dans l'application :

Le résultat est l'ID de la conversation. Enregistrez-le car il s'agit de l'identifiant unique de la conversation qui a été créée. Nous l'appellerons YOUR_CONVERSATION_ID par la suite.

Créer un utilisateur

Créez un utilisateur qui participera à la conversation :

Le résultat est l'ID de l'utilisateur. Là encore, enregistrez cet identifiant car il s'agit de l'identifiant unique de l'utilisateur qui a été créé. Nous l'appellerons YOUR_USER_ID par la suite.

Créer une application TokBox

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

New project tok-box

À 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.

session ID

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é.

Organiser l'application

Reprenons là où le dernier tutoriel s'est arrêté, déplaçons tous les composants du chat dans un dossier ChatComponents et créons un nouveau dossier VideoComponents pour nos nouveaux fichiers.

Directory structure

Dans le fichier NexmoApp.js remplacez l'un des identifiants de conversation par l'identifiant YOUR_CONVERSATION_ID que nous venons de générer dans le terminal.

Ajouter le composant Video

Installez l'API TokBox en la lançant dans votre terminal :

Dans le dossier VideoComponents créer les fichiers : CheckBox.js ConnectionStatus.js Publisher.js Subscriber.js VideoComponent.js

Dans le Chatroom.js, importez le VideoComponent en haut et appeler <VideoComponent /> sous le bouton Chat dans l'instruction de retour.

Construire le composant VideoComponent

Vous appellerez le Publisher, Subscriber, et ConnectionStatus les composants de votre 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);

Remplissez les champs apikey, sessionId et token avec les informations d'identification que nous avons créées lors de la création de l'application TokBox.

Construire le composant de l'éditeur

Le composant Publisher sera un composant basé sur des classes et ressemblera à ceci :

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

Remarquez qu'à l'intérieur de l'élément <OTPublisher /> nous passons dans publishAudio, publishVideo, et videoSource à la properties et la fonction onError() à la fonction onError l'accessoire.

Désormais, le composant Publisher affichera un avatar jusqu'à ce que l'utilisateur autorise OpenTok à accéder à la caméra de l'ordinateur.

Construire le composant abonné

Les Subscriber sera également un composant basé sur les classes avec subscribeToAudio et subscribeToVideo comme propriétés :

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

Construire le composant ConnectionStatus

Nous utiliserons le fichier ConnectionStatus.js pour afficher l'état de la connexion à l'utilisateur :

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

La création de cet élément permet à l'utilisateur de savoir si la vidéo s'est connectée avec succès ou non :

Connection status

Construire le composant CheckBox

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

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

L'ajout du composant CheckBox permet à l'interface utilisateur de l'application de fonctionner comme les utilisateurs s'y attendent :

checkbox gif

Testez votre In-App Video

Vous avez maintenant créé les 5 composants React :

• Composant vidéo

• Éditeur

• Abonné

• État de la connexion

• CheckBox

L'exécution npm start depuis la racine de votre projet devrait permettre à votre application de fonctionner. Lorsque vous sélectionnez le menu déroulant à côté de User Namevous devriez voir le nom lauren est prérempli.

Essayez d'ajouter votre dans la zone de texte et cliquez sur le bouton Create user et cliquez sur le bouton Sélectionnez le chat synchronisé dans le menu déroulant.

Vous pouvez maintenant vérifier que l'app est correctement synchronisée avec votre conversation en exécutant cette requête dans votre terminal :

En plus de laurenvotre nom devrait être visible dans cette liste :

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

Autorisez le navigateur à accéder à votre caméra et à votre microphone et vous devriez maintenant voir le composant vidéo à l'écran ! Si vous ouvrez un autre navigateur avec le même code et que vous rejoignez le chat en tant qu'utilisateur différent, vous verrez également un autre composant vidéo ajouté.

demo of app

Pour voir l'application opérationnelle, consultez le site suivant👉 Glitch! Pour vous l'approprier, remixez-le et ajoutez vos propres identifiants Nexmo et TokBox dans le fichier.env fichier.

🌟Collaborons !🌟

Félicitations ! Vous avez réussi à ajouter la vidéo à votre application de chat. C'est vraiment génial ! Pour ma part, je suis plutôt obsédée et j'ai commencé à chercher toutes les occasions dans ma vie quotidienne pour ajouter le chat vidéo à mes conversations !

Si vous souhaitez jouer avec notre nouvelle Conversation API, n'hésitez pas à nous en faire part. 🤩

Nous essayons toujours de réfléchir à des cas d'utilisation créatifs ou innovants et je serais donc très enthousiaste à l'idée de collaborer et de créer de nouvelles applications ensemble.

Il est important de noter que l Conversation API est actuellement en version bêta et qu'elle évolue constamment en fonction de vos commentaires et de vos réactions. Comme toujours, nous sommes heureux de répondre à vos questions dans notre communauté slack ou à l'adresse support@nexmo.com.