Implementierung einer Video-API-Anwendung mit React Hooks

Wenn Sie seit ein paar Jahren ReactJS-Entwickler sind, mussten Sie wahrscheinlich Ihren Code refaktorisieren, um React Hooks zu verwenden. React Hooks ist seit der Version 16.8 (Februar 2019) eingeführt worden, Dokumentation) und ermöglicht es Ihnen, Zustände und andere React-Funktionen zu nutzen, ohne eine Klasse zu schreiben.

In diesem Blogbeitrag wird erklärt, wie Sie Vonage Video API JS mit Hilfe von Hooks in Ihre React-Anwendung integrieren können.

Voraussetzungen

1. Ein Vonage Video API-Konto. Wenn Sie noch keines haben, können Sie ein Konto im Video-Dashboard

2. ReactJS Version >= 16.8

Der Einstiegspunkt des Projekts ist die src/index.js Datei. Die Indexdatei importiert die App-Datei, die die Routes und die Komponentendefinition enthält.

Seiten

Die Routen werden in der Datei App.js definiert. Der Code verwendet das react-router-dom Modul, um die Routen zu deklarieren. Es gibt zwei Hauptrouten:

• WarteraumAuf dieser Seite kann der Benutzer seine Mikrofon- und Kameraeinstellungen festlegen und einen Vorabanruf durchführen. Opentok Netzwerk Test. Dann kann er dem Videoanruf beitreten.

• VideoRaumVideoRoom: Auf dieser Seite stellt der Benutzer eine Verbindung zur Sitzung her, veröffentlicht seinen Stream und abonniert jeden der Streams im Raum.

Bitte beachten Sie, dass der Benutzer direkt zur VideoRoom-Seite navigieren kann. Im Beispielcode ist keine Authentifizierung implementiert.

Warteraum

Die Wartezimmer-Seite erstellt einen Publisher (mit UsePublisher Hook), um den Video-Feed anzuzeigen. Mithilfe der Komponenten AudioSettings und VideoSettings kann der Benutzer das Mikrofon und die Kamera stummschalten und die Stummschaltung aufheben.

Es ist auch möglich, den Benutzernamen mit dem Abfrageparameter, user-namein der URL der Seite festzulegen. Navigiert der Benutzer also zu waiting-room?user-name=JohnDoenavigiert, setzt die Wartezimmer-Seite den Benutzernamen auf John Doe.

Schließlich gibt es einen React-Effekt, der den Netzwerktest ausführt, wenn die Seite geladen wird. Der Netzwerktest wird von einem eigenen Hook ausgeführt, useNetworkTest. Der Netzwerktest führt zwei verschiedene Tests durch: testConnectivity und testQualität. Wenn der Benutzer dem Anruf beitritt, bevor die Tests abgeschlossen sind, bricht der useNetworkTest Hook diese abbrechen.

Für weitere Informationen besuchen Sie bitte das Netzwerk-Test GitHub Repo

Video-Raum

Die Videoraumkomponenten verwenden die useSession und usePublisher Hooks, um die Logik der Video-API zu handhaben. Der useEffect Hook bei der Komponenteneinbindung ruft die Anmeldeinformationen für die Verbindung mit dem Raum ab (getCredentials Funktion). Sobald die Zugangsdaten durch den Hook gesetzt sind, wird ein weiterer Effekt ausgelöst, der eine neue Sitzung erstellt, indem er OT.initSession und session.connect sequentiell aufruft.

Nach der Erstellung der Sitzung löst der nächste Effekt die Veröffentlichungsfunktion von usePublisher Haken.

Darüber hinaus enthält der Videoraum die Komponente Chat Komponente, die das Video-API-Signal verwendet, um Nachrichten zu senden und zu empfangen.

Und schließlich umfassen die ControlToolBar Komponenten die während des Videoanrufs verwendeten Schaltflächen: Mikrofon und Kamera stummschalten/aufheben, Bildschirmfreigabe und Chat.

React-Kontext

Der einzige in dieser App verwendete Kontext ist der UserContext der den Benutzernamen, die localAudio- und localVideo-Einstellungen speichert.

React-Haken

Die von der Anwendung verwendeten Hooks befinden sich im Verzeichnis hooks:

useSession

Der src/hooks/useSession.js Hook verwaltet das Session-Objekt der Video-API-Bibliothek. Die wichtigsten Funktionen sind:

• createSession: Nach Eingabe der Anmeldedaten stellt die Funktion eine Verbindung zu den Vonage Video-Servern her und fügt die Ereignis-Listener (onStreamCreated und onStreamDestroyed).

• destroySession: trennt die aktuelle Sitzung.

• abonnieren: Gibt man einen Stream und Abonnentenoptionen an, wird der Stream abonniert.

const createSession = useCallback(
    ({ apikey, sessionId, token }) => {
      if (!apikey) {
        throw new Error("Missing apiKey");
      }

      if (!sessionId) {
        throw new Error("Missing sessionId");
      }

      if (!token) {
        throw new Error("Missing token");
      }

      sessionRef.current = OT.initSession(apikey, sessionId);
      const eventHandlers = {
        streamCreated: onStreamCreated,
        streamDestroyed: onStreamDestroyed,
      };
      sessionRef.current.on(eventHandlers);
      return new Promise((resolve, reject) => {
        sessionRef.current.connect(token, (err) => {
          if (!sessionRef.current) {
            // Either this session has been disconnected or OTSession
            // has been unmounted so don't invoke any callbacks
            return;
          }
          if (err) {
            reject(err);
          } else if (!err) {
            console.log("Session Connected!");
            setConnected(true);
            resolve(sessionRef.current);
          }
        });
      });
    },
    [onStreamCreated, onStreamDestroyed]
  );

onAudioLevel

In dem useSession Hook gibt es die onAudioLevel Funktion, die auf die audioLevelUpdated Ereignis hört. Die Funktion prüft, ob ein Audiopegel größer als 0,2 für mehr als einen bestimmten Schwellenwert (speakingThreshold) vorliegt.

Wenn dies der Fall ist, wird davon ausgegangen, dass der Abonnent spricht, und dem Element wird eine Klasse hinzugefügt.

Wenn der Audiopegel bei einem bestimmten Schwellenwert (notSpeakingThreshold) niedriger als 0,2 ist, bedeutet dies, dass der Teilnehmer nicht spricht.

usePublisher

Die Datei src/hooks/usePublisher.js Datei definiert das Publisher-Objekt. Die wichtigsten Funktionen sind:

• initPublisher: fordert den Zugriff auf das Mikrofon und die Kamera sowie die Initialisierung des Publisher-Objekts an. Diese Funktion erstellt den lokalen Verleger auf der Seite.

• publish: veröffentlicht den Stream in der Sitzung.

• unpublish: hebt die Veröffentlichung des lokalen Streams aus der Sitzung auf und stoppt die mediaTracks (Mikrofon und Kamera).

const initPublisher = useCallback(
    (containerId, publisherOptions) => {
      console.log('UsePublisher - initPublisher');
      if (publisherRef.current) {
        console.log('UsePublisher - Already initiated');
        return;
      }
      if (!containerId) {
        console.log('UsePublisher - Container not available');
      }
      const finalPublisherOptions = Object.assign({}, publisherOptions, {
        insertMode: 'append',
        width: '100%',
        height: '100%',
        style: {
          buttonDisplayMode: 'off',
          nameDisplayMode: 'on'
        },
        showControls: false
      });
      publisherRef.current = OT.initPublisher(
        containerId,
        finalPublisherOptions,
        (err) => {
          if (err) {
            console.log('[usePublisher]', err);
            publisherRef.current = null;
          }
          console.log('Publisher Created');
        }
      );
      publisherRef.current.on('accessAllowed', accessAllowedListener);
      publisherRef.current.on('accessDenied', accessDeniedListener);
      publisherRef.current.on('streamCreated', streamCreatedListener);
      publisherRef.current.on('streamDestroyed', streamDestroyedListener);
      publisherRef.current.on(
        'videoElementCreated',
        videoElementCreatedListener
      );
    },
    [
      streamCreatedListener,
      streamDestroyedListener,
      accessAllowedListener,
      accessDeniedListener
    ]
  );

useNetworkTest

Der src/hooks/useNetworkTest.js Hook behandelt das opentok-network-js Modul. Die wichtigsten Funktionen sind:

• initNetworkTest: initiiert das NetworkTest Objekt

• runNetworkTest: führt die testConnectivity und testQuality aus und setzt dann die Variablen des Zustands entsprechend dem Ergebnis

• stopNetworkTest: Beendet den aktuellen Netzwerktest.

useChat

Der src/hooks/useChat.js Hook verwaltet die Signalfunktionen der Vonage Video API. Die wichtigsten Funktionen sind:

• sendMessages: ein Signal des Typs type:message

• messageListener: Listener für das Ereignis type:message Ereignis. Der Listener fügt die Nachricht in das messages Array hinzu.

Schlussfolgerung

In diesem Blogbeitrag habe ich erklärt, wie man React Hooks in die Vonage Video API integriert. Das Repository ist öffentlich zugänglich unter Video-API-Hooks. Sie können es als Referenz für die Integration oder Umstrukturierung Ihrer Anwendung mit React Hooks verwenden.

Außerdem hat Vonage kürzlich ein neues Produkt namens Vonage Video Express herausgebracht, mit dem sich eine Webanwendung für Videokonferenzen mit mehreren Teilnehmern erstellen lässt. Wir haben einen Blogbeitrag darüber geschrieben.