Mettre en œuvre une application API Video avec React Hooks

Si vous êtes développeur ReactJS depuis quelques années, vous avez probablement dû remanier votre code pour utiliser React Hooks. React Hooks a été introduit depuis la version 16.8 (février 2019, documentation) et vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe.

Cet article de blog expliquera comment intégrer l'API Video JS de Vonage dans votre application React à l'aide de Hooks.

Conditions préalables

1. Un compte Video API de Vonage. Si vous n'en avez pas encore, vous pouvez créer un Account dans le Tableau de bord Video

2. Version de ReactJS >= 16.8

Le point d'entrée du projet est le fichier src/index.js est le point d'entrée du projet. Le fichier d'index importe le fichier App qui contient la définition des routes et des composants.

Pages

Les routes sont définies dans le fichier App.js. Le code utilise le module react-router-dom pour déclarer les routes. Il existe deux routes principales :

• Salle d'attenteSalle d'attente : sur cette page, l'utilisateur peut régler les paramètres de son microphone et de sa caméra, ainsi que lancer un appel préalable. Test du réseau Opentok. Il peut ensuite participer à l'appel vidéo.

• Salle vidéo: sur cette page, l'utilisateur se connecte à la session, publie son flux et s'abonne à chacun des flux de la salle.

Veuillez noter que l'utilisateur peut directement naviguer directement vers la page VideoRoom. Aucune authentification n'est mise en œuvre dans l'exemple de code.

Salle d'attente

La page de la salle d'attente crée un éditeur (en utilisant UsePublisher Hook) pour afficher le flux Video. Les composants AudioSettings et VideoSettings permettent à l'utilisateur d'activer et de désactiver le microphone et la caméra.

Il est également possible de définir le nom d'utilisateur en utilisant le paramètre de requête, user-namedans l'URL de la page. Ainsi, si l'utilisateur navigue vers waiting-room?user-name=JohnDoela page de la salle d'attente définira le nom d'utilisateur comme suit John Doe.

Enfin, il y a un effet React qui exécute le test de réseau lorsque la page est chargée. Le test du réseau est géré par un Hook personnalisé, useNetworkTest. Le test de réseau exécute deux tests différents : testConnectivity et testQualité. Si l'utilisateur rejoint l'appel avant que les tests ne soient terminés, la fonction useNetworkTest Hook les interrompt.

Pour plus d'informations, veuillez consulter le Test de réseau repo GitHub

Video Room

Les composants de la salle vidéo utilisent les boutons useSession et usePublisher pour gérer la logique de l'API Video. Le useEffect au montage du composant obtient les informations d'identification pour se connecter à la salle (fonction getCredentials ). Une fois les informations d'identification définies par le crochet, un autre effet est déclenché qui créera une nouvelle session, en appelant OT.initSession et session.connect séquentiellement.

Après la création de la session, l'effet suivant déclenchera la fonction de publication à partir de la fonction usePublisher Hook.

En outre, la salle vidéo comprend le composant Chat qui utilise le signal de l Video API Signal pour envoyer et recevoir des messages.

Enfin, les ControlToolBar comprennent les boutons utilisés lors de l'appel Video : coupure/mise en sourdine du microphone et de la caméra, partage d'écran et chat.

Contexte React

Le seul contexte utilisé dans cette application est le contexte UserContext qui stocke le nom d'utilisateur, les préférences localAudio et localVideo.

Crochets React

Les hooks utilisés par l'application se trouvent dans le répertoire hooks :

useSession

Le crochet src/hooks/useSession.js Hook gère l'objet Session de la bibliothèque Video API. Les principales fonctions sont les suivantes :

• createSessionLa fonction se connecte aux serveurs de Vonage Video et ajoute les récepteurs d'événements (onStreamCreated et onStreamDestroyed).

• destroySession: déconnecte la session en cours.

• subscribe: à partir d'un flux et d'options d'abonnement, il s'abonne au flux.

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

Dans le crochet useSession, il y a la fonction onAudioLevel qui écoute la fonction audioLevelUpdated . Cette fonction vérifie s'il y a un niveau audio supérieur à La fonction vérifie s'il y a un niveau audio supérieur à 0,2 pour plus d'un seuil donné (speakingThreshold).

Si c'est le cas, il suppose que l'abonné est en train de parler et ajoute une classe à l'élément.

Si le niveau audio est inférieur à 0,2 pour un seuil donné (notSpeakingThreshold), cela signifie que l'abonné ne parle pas.

usePublisher

Le fichier src/hooks/usePublisher.js définit l'objet Publisher. Les principales fonctions sont les suivantes :

• initPublisher: demande l'accès au micro et à la caméra en plus de l'initialisation de l'objet publisher. Cette fonction crée l'éditeur local dans la page.

• publishLe flux de données est publié dans la session.

• unpublishL'étape suivante consiste à dépublier le flux local de la session et à arrêter les mediaTracks (microphone et caméra).

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

Le crochet src/hooks/useNetworkTest.js Hook gère le module opentok-network-js module. Les principales fonctions sont les suivantes

• initNetworkTest: initie l NetworkTest l'objet

• runNetworkTest: fait fonctionner les testConnectivity et testQuality puis définit les variables de l'état en fonction du résultat.

• stopNetworkTest: arrête le test de réseau en cours.

useChat

Le crochet src/hooks/useChat.js Hook gère la fonctionnalité de signal de l'API Video de Vonage. Les principales fonctions sont les suivantes :

• sendMessages: envoyer un signal de type type:message

• messageListener: auditeur pour l'événement type:message événement. L'écouteur ajoutera le message au messages tableau.

Conclusion

Dans ce billet de blog, j'ai expliqué comment intégrer React Hooks avec l'API Video de Vonage. Le référentiel est accessible au public à l'adresse suivante Crochets de l'API Video. Vous pouvez l'utiliser comme référence pour intégrer ou refactoriser votre application à l'aide de React Hooks.

Par ailleurs, Vonage a récemment lancé un nouveau produit appelé Vonage Video Express pour créer une application web de vidéoconférence multipartite. Nous avons écrit un article de blog à ce sujet.