Hinzufügen von Video zu Ihrer React Chat App mit Nexmo

Wir bei Nexmo freuen uns sehr über die Möglichkeit, mit unserer neuen Conversation API Customer Journeys durch Gespräche zu erstellen. Sie ermöglicht es den Nutzern nicht nur, ein Omnichannel-Erlebnis zu schaffen, das Voice, Messaging und Video in einem einzigen Erlebnis nutzt, sondern auch den Kontext dieser Konversationen beizubehalten, um ein hervorragendes Kundenerlebnis zu bieten.

Die Möglichkeiten, die diese API bietet, scheinen endlos zu sein, und so hatte ich in den letzten Wochen viel Spaß beim Erforschen der verschiedenen Möglichkeiten, sie in meine Applications einzubinden.

Warum wir uns darüber freuen

• Omnichannel-Kommunikation ermöglicht es Ihnen, alles - Voice, Nachrichten und benutzerdefinierte Ereignisse - gleichzeitig und in Echtzeit durchzuführen.

• Es handelt sich um ein robustes Modell, auf dem alles aufbaut, was bedeutet, dass Sie jeden beliebigen benutzerdefinierten Kanal oder jedes beliebige Ereignis hinzufügen können.

• Wir halten den Kontext für Sie fest und machen den Verlauf Ihrer Gespräche zugänglich.

Erstellen wir eine App mit der Conversation API

Heute werden wir etwas auf der Chat-Anwendung aufbauen, die in diesem Einführungslehrgang. Diese ursprüngliche Anwendung verwendet das Client SDK von Nexmo und stellt eine Verbindung zur Conversation API her. Heute werden wir diese React-Anwendung mit Hilfe der TokBox API um einen Video-Chat erweitern.

demo of app

Der Anwendungsfall unserer Anwendung

Stellen Sie sich vor, Sie chatten mit einem Kunden auf Ihrer Website. Vielleicht wendet er sich an Sie, weil er mit einer Dienstleistung unzufrieden ist, und damit er sich gehört und gesehen fühlt, ist zusätzliche Unterstützung erforderlich. In diesem Tutorial erfahren Sie, wie Sie ganz einfach die Möglichkeit einbauen können, das Problem mit dem Kunden von Angesicht zu Angesicht per Video-Chat zu lösen!

Voraussetzungen

Um es kurz zu machen, nehmen wir an, Sie haben das React- und Express-Anleitung. Um zu beginnen, benötigen Sie wieder einen Vonage Account und Node in Ihrer Entwicklungsumgebung. Wenn Sie zu einem funktionierenden Projekt übergehen möchten, können Sie den Code hier in Glitch nachbauen. Ansonsten können Sie in wenigen Schritten Ihre eigene Video-Chat-App von Grund auf erstellen!

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Eine Anwendung erstellen

Führen Sie in Ihrem Terminal aus:

Das erste Element in der Ausgabe ist die Anwendungs-ID, die Sie an einem sicheren Ort speichern sollten. Wir werden sie später als YOUR_APP_ID später. Der letzte Wert in der Ausgabe ist der Ort des privaten Schlüssels. Der private Schlüssel wird verwendet, um JWTs zu erzeugen, die zur Authentifizierung Ihrer Interaktionen mit Nexmo verwendet werden.

Eine Konversation schaffen

Erstellen Sie eine Unterhaltung innerhalb der Anwendung:

Das Ergebnis ist die Konversations-ID. Speichern Sie diese, da dies die eindeutige Kennung für die erstellte Unterhaltung ist. Wir werden sie später als YOUR_CONVERSATION_ID später.

Einen Benutzer erstellen

Erstellen Sie einen Benutzer, der an der Konversation teilnehmen wird:

Die Ausgabe ist die Benutzer-ID. Auch diese ID sollte gespeichert werden, da sie der eindeutige Bezeichner für den erstellten Benutzer ist. Wir werden sie später als YOUR_USER_ID später.

Erstellen einer TokBox-Anwendung

Sobald Sie in Ihrem TokBox Account angemeldet sind, wählen Sie in der linken Ecke Ihrer Seite Projects und klicken Sie in der Dropdown-Liste auf Create New Project.

New project tok-box

Wählen Sie dort Create Custom Project und geben Sie ihm einen Namen Ihrer Wahl. Sobald Sie das Projekt erstellt haben, klicken Sie auf View Project und speichern Sie den API-Schlüssel ganz oben. Scrollen Sie dann nach unten zum Abschnitt Project Tools und klicken Sie auf die blaue Schaltfläche Create Session ID.

session ID

Kopieren Sie diese SessionID und fügen Sie sie in den folgenden Abschnitt ein Generate Token. Wenn Sie möchten, können Sie die Ablaufzeit über die Standardzeit von 1 Stunde hinaus verlängern. Klicken Sie anschließend auf die blaue Generate Token und speichern Sie das generierte Token.

Organisieren Sie die App

Wir machen da weiter, wo wir im letzten Tutorial aufgehört haben und verschieben alle Chat-Komponenten in einen ChatComponents Ordner und erstellen einen neuen VideoComponents Ordner für unsere neuen Dateien.

Directory structure

In der Datei NexmoApp.js tauschen Sie eine der Konversations-IDs aus mit YOUR_CONVERSATION_ID die wir gerade im Terminal erzeugt haben.

Hinzufügen der Video-Komponente

Installieren Sie die TokBox API, indem Sie sie in Ihrem Terminal ausführen:

Innerhalb des Ordners VideoComponents Ordner werden die Dateien erstellt: CheckBox.js ConnectionStatus.js Publisher.js Subscriber.js VideoComponent.js

In der Chatroom.jsimportieren Sie die VideoComponent oben und rufen Sie <VideoComponent /> unterhalb der Chat-Schaltfläche innerhalb der Return-Anweisung auf.

Erstellen Sie die VideoComponent-Komponente

Sie rufen die Publisher, Subscriber, und ConnectionStatus Komponenten Ihre 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);

Geben Sie apikey, sessionId und token mit den Anmeldedaten ein, die wir beim Erstellen der TokBox-Anwendung erstellt haben.

Erstellen Sie die Publisher-Komponente

Die Publisher wird eine klassenbasierte Komponente sein und wie folgt aussehen:

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

Beachten Sie, dass wir innerhalb der <OTPublisher /> übergeben wir in publishAudio, publishVideo, und videoSource an die properties Prop und die Funktion onError() an die onError Stütze.

Jetzt zeigt die Publisher Komponente einen Avatar an, bis der Benutzer OpenTok die Erlaubnis erteilt, auf die Kamera des Computers zuzugreifen.

Erstellen Sie die Abonnenten-Komponente

Die Subscriber wird ebenfalls eine klassenbasierte Komponente sein mit subscribeToAudio und subscribeToVideo als Eigenschaften in ihr:

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

Erstellen Sie die Komponente ConnectionStatus

Wir verwenden die Datei ConnectionStatus.js Datei, um dem Benutzer den Verbindungsstatus anzuzeigen:

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

Dies hilft dem Benutzer zu erkennen, ob das Video erfolgreich verbunden wurde oder nicht:

Connection status

Erstellen Sie die CheckBox-Komponente

Wir verwenden die <CheckBox /> Komponente sowohl innerhalb der <Publisher /> und <Subscriber /> Komponenten:

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

Das Hinzufügen der CheckBox Komponente trägt dazu bei, dass die Benutzeroberfläche der Anwendung so funktioniert, wie die Benutzer es erwarten:

checkbox gif

Testen Sie Ihre Video-Chat-App

Sie haben nun alle 5 React-Komponenten erstellt:

• VideoKomponente

• Herausgeber

• Abonnent

• Verbindungsstatus

• Kontrollkästchen

Wenn Sie npm start aus dem Stammverzeichnis Ihres Projekts sollte Ihre Anwendung zum Laufen gebracht werden. Wenn Sie das Dropdown-Menü neben User Namewählen, sollten Sie sollten Sie sehen Sie den Namen lauren vorausgefüllt.

Versuchen Sie es mit Ihren Namen in das Textfeld ein und klicken Sie auf die Create user Schaltfläche. Wählen Sie den synchronisierten Chat aus der Dropdown-Liste aus.

Sie können nun verifizieren, dass die App korrekt mit Ihrer Konversation synchronisiert wurde, indem Sie diese Anfrage in Ihrem Terminal ausführen:

Zusätzlich zu laurensollte Ihr Name nun in dieser Liste sichtbar sein:

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

Erlauben Sie dem Browser den Zugriff auf Ihre Kamera und Ihr Mikrofon und Sie sollten nun die Video-Komponente auf dem Bildschirm sehen! Wenn Sie einen anderen Browser mit demselben Code öffnen und dem Chat als ein anderer Benutzer beitreten, wird ebenfalls eine Videokomponente hinzugefügt.

demo of app

Um zu sehen, wie die App funktioniert, schauen Sie sich die App auf👉 Störung! Um es zu Ihrem eigenen zu machen, mischen Sie es um und fügen Sie Ihre eigenen Nexmo und TokBox Anmeldeinformationen in die.env Datei.

🌟Lassen Sie uns zusammenarbeiten!🌟

Herzlichen Glückwunsch! Sie haben erfolgreich Video zu Ihrer Chat-Anwendung hinzugefügt. Wie toll ist das denn?! Ich für meinen Teil bin ziemlich besessen und habe damit begonnen, in meinem täglichen Leben nach jeder Gelegenheit zu suchen, um Video-Chat zu meinen Unterhaltungen hinzuzufügen!

Wenn Sie Interesse an unserer neuen Conversation API haben, teilen Sie uns dies bitte mit 🤩

Wir versuchen immer, kreative oder innovative Anwendungsfälle dafür zu finden, und deshalb würde ich mich riesig freuen, wenn wir zusammenarbeiten und gemeinsam neue Anwendungen entwickeln könnten.

Es ist wichtig zu beachten, dass die Conversation API derzeit in der Beta-Phase ist und auf der Grundlage Ihrer Anregungen und Ihres Feedbacks ständig weiterentwickelt wird. Wie immer helfen wir Ihnen gerne bei allen Fragen in unserem Community-Slack oder support@nexmo.com.