Erstellen Sie einen benutzerdefinierten Video-Chat mit React Components und Vonage

Bitte beachten Sie, dass React nicht offiziell von der Vonage Video API unterstützt wird.

Ich habe vor kurzem begonnen, mich mit der Video API-Plattform von Vonage und habe ein paar Startanwendungen mit Video-Chat entwickelt.

tweet of playing with Vonage Video API for first time

Und obwohl es Spaß macht und irgendwie albern ist, schnell einen Live-Stream meines Gesichts zu einer App hinzuzufügen, an der ich gerade arbeite, wurde ich bald neugierig auf andere Anwendungsfälle. Oder besser gesagt, was ist der Vorteil, wenn ich es selbst einrichte, im Gegensatz zu einer der vielen anderen Videokonferenzoptionen, die es gibt?

Um die volle Funktionalität der API zu erkunden, dachte ich, ich würde eine App für die Studenten des Bootcamps erstellen, an dem ich teilnahm, Ada-Entwickler-Akademie.

Ada ist ein gebührenfreies, einjähriges Programm für Frauen und geschlechtsspezifische Menschen, die das Programmieren lernen wollen. Ich fühle mich wahnsinnig glücklich, dass ich daran teilgenommen habe und mir die Werkzeuge an die Hand gegeben wurden, um in nur einem Jahr von einer Englischlehrerin zu einer Software-Ingenieurin zu werden. Daher dachte ich mir, dass es eine gute Möglichkeit wäre, etwas zurückzugeben, indem ich ein Portal für Studenten einrichte, über das sie mit Tutoren in Kontakt treten und in Echtzeit persönliche Hilfe von Mentoren aus der Branche erhalten können. Außerdem konnte ich gleichzeitig mehr über die Vonage Video API lernen!

Bei der Entwicklung des Portals entdeckte ich bald, was so viele Ingenieure zuvor erlebt hatten: wie großartig es ist, die vollständige Kontrolle über die Funktionalität des Codes in der eigenen App zu haben. Ich konnte die App und meinen Code auf die Bedürfnisse der Studenten und Tutoren zuschneiden, was sich sehr gut anfühlte. Ich habe speziell mit dem React-Wrapper der Video API herumgespielt, OpenTok Reactder im Wesentlichen eine Webkomponente für das JavaScript-SDK ist. Es macht es unglaublich einfach, hochwertiges Video- und Audio-Streaming in jede React-App zu integrieren. Es bietet anpassbare Komponenten, die flexibel genug sind, um sie in jede meiner React-Apps ganz einfach einzubetten.

Dies ist ein Tutorial darüber, wie man diesen React Wrapper benutzt und den Code in modularisierte und wiederverwendbare React-Komponenten aufteilt, um sie in jede oder alle zukünftigen React-Apps einzubetten!

Voraussetzungen

• Node.js installiert

• Registrieren Sie sich für ein Vonage Video API-Konto

Erstellen eines benutzerdefinierten Video-Chats mit der Video API von Vonage und React-Komponenten

Sie werden die folgenden Aufgaben durchführen, um Ihre App zu erstellen:

1. Ein Video API-Projekt erstellen

2. Erstellen einer React-App mit create-react-app

3. Erstellen Sie wiederverwendbare React-Komponenten:

   • Herausgeber

   • Abonnent

   • Verbindungsstatus

   • Kontrollkästchen

4. Führen Sie Ihre Video-Chat-App aus

Dieses Tutorial führt Sie von Grund auf durch den Prozess. Wenn Sie jedoch den fertigen Code sehen möchten, können Sie das Git-Repository für dieses Projekt klonen.

Erstellen eines Vonage Video API-Projekts

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

where to click new project demo

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.

what to click to generate a sessionID

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.

Erstellen einer React-App mitcreate-react-app

Bevor wir loslegen, sollten Sie überprüfen, ob Sie eine aktuelle Version von Node auf Ihrem Rechner installiert haben (mindestens 5.2), indem Sie node -v in Ihrem Terminal ausführen.

Führen Sie dann in dem Verzeichnis, in dem das Projekt gespeichert werden soll, den Befehl aus:

Ich habe mein Projekt so genannt react-components-tokboxgenannt, aber Sie können es nennen, wie Sie wollen.

Wechseln Sie zu Ihrem Projekt und installieren Sie die beiden Abhängigkeiten, die wir für dieses Projekt verwenden werden:

Die opentok-react Bibliothek ist ein React-Wrapper, der aus ein paar Komponenten besteht, die wir heute verwenden werden:

• OTSession-Komponente

• OTPublisher-Komponente

• OTStreams-Komponente

• OTSubscriber-Komponente

• createSession-Helfer

• preloadScript Übergeordnete Komponente

Führen Sie npm start um sicherzustellen, dass alles korrekt installiert wurde. localhost:3000 sollte sich automatisch öffnen und den Boilerplate-React-Startercode ausführen.

Einstellung der Konfiguration

Gehen Sie in den Ordner src Ordner und erstellen Sie eine config.js Datei:

Öffnen Sie diese neue Datei und fügen Sie die Anmeldeinformationen hinzu, die Sie soeben beim Erstellen eines TokBox-Projekts erstellt haben:

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

Öffnen Sie nun die src/index.js Datei und importieren Sie die congfig.js Datei:

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

Um diese Anmeldedaten tatsächlich zu verwenden, müssen Sie sie an die <App /> Komponente übergeben:

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

In der src/App.js Datei importieren wir einige der Komponenten aus dem React-Wrapper:

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

Aufbau von wiederverwendbaren React-Komponenten

Erstellen Sie einen neuen components Ordner innerhalb von src. Erstellen Sie in diesem Ordner Ihre Komponenten:

Nun importieren Sie wieder in Ihrer src/App.js Datei drei dieser Komponenten ein:

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

Ändern wir die <App /> Komponente in dieser Datei so, dass sie klassenbasiert und nicht funktional ist.

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

Fügen Sie innerhalb des Konstruktors einen Zustand und zwei sessionEvents ein, um den Status der Konnektivität zu erkennen:

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

Außerhalb des Konstruktors erstellen Sie eine Funktion onError():

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

Innerhalb der render() Funktion, fügen Sie die <OTSession /> Komponente ein, die die Anmeldeinformationen aus der src/index.js Datei übergibt:

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

Jetzt, innerhalb der <OTSession /> können wir Fehler vorsorglich behandeln und die Komponenten aufrufen, <ConnectionStatus />, <Publisher />, und <Subscriber />:

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

Erstellen Sie die Komponente ConnectionStatus

In der src/components/ConnectionStatus.js Datei sollten wir uns überlegen, wie wir dem Benutzer den Verbindungsstatus am besten anzeigen können:

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

Nun zurück in der src/App.js Datei, übergeben Sie den Zustand an die <ConnectionStatus /> Komponente:

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

Erstellen Sie die Publisher-Komponente

Nun importieren Sie oben in Ihrer src/components/Publisher.js Datei, importieren Sie die Dateien und die OTPublisher von opentok-react:

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

Darunter erstellen wir eine klassenbasierte Komponente 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;

Füllen wir diese Funktionen mit etwas Staat:

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

Und innerhalb der <OTPublisher /> gehen wir in publishAudio, publishVideo, und videoSource an die properties Prop und die Funktion onError() an die onError Stütze:

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

Erstellen Sie die Abonnentenkomponente

Jetzt, in der Datei src/components/Subscriber.js importieren wir die Dateien und Komponenten und erstellen eine klassenbasierte Komponente Subscriber mit subscribeToAudio und subscribeToVideo als properties innerhalb der <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;

Erstellen Sie die CheckBox-Komponente

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

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

Verwenden wir nun sowohl die <CheckBox /> Komponente in der src/components/Publisher.js Datei:

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

Und auch in der src/components/Subscriber.js Datei:

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

Zum Schluss fügen wir noch ein einfaches CSS für die App in die src/App.css Datei:

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

Führen Sie Ihre Video-Chat-App aus

Sie haben nun alle 4 React-Komponenten erstellt:

• Herausgeber

• Abonnent

• Verbindungsstatus

• Kontrollkästchen

Sie können Ihre Anwendung testen, indem Sie npm start aus dem Stammverzeichnis Ihres Projekts in Ihrem Terminal ausführen.

view after running npm start

Herzlichen Glückwunsch! Diese Komponenten sind modularisiert und für jede zukünftige React-Anwendung wiederverwendbar.

Sie können sie jetzt einfach und schnell in Ihre App einbinden, um Videochats zu ermöglichen. Wie toll ist das denn?! Ich bin jedenfalls ziemlich besessen 😆 und habe angefangen, nach allen möglichen Gelegenheiten in meinem täglichen Leben zu suchen, um Video-Chat hinzuzufügen!

🌟Lassen Sie uns zusammenarbeiten!🌟

Wenn Sie eine kreative, neue, alberne oder innovative Idee für den Einsatz von Video-Chat haben, teilen Sie sie bitte mit uns!

Ich fände es SUPER spannend, zusammenzuarbeiten und gemeinsam neue Anwendungen zu entwickeln.