Implementación de una Video API Application con React Hooks

Si has sido desarrollador de ReactJS durante un par de años, probablemente hayas tenido que refactorizar tu código para usar React Hooks. React Hooks se ha introducido desde la versión 16.8 (febrero de 2019, documentación) y te permite usar el estado y otras características de React sin escribir una clase.

Esta entrada de blog explicará cómo integrar la API de Video JS de Vonage en tu aplicación React utilizando Hooks.

Requisitos previos

1. Una cuenta de Video API de Vonage. Si aún no tienes una, puedes crear una Account en el Panel de Video

2. Versión de ReactJS >= 16.8

El punto de entrada del proyecto es el src/index.js . El fichero índice importa el fichero App que contiene la definición de Rutas y Componentes.

Páginas

Las rutas se definen en el archivo App.js. El código utiliza el módulo react-router-dom para declarar las rutas. Hay dos rutas principales:

• Sala de esperaEn esta página, el usuario puede configurar el micrófono y la cámara, así como realizar una llamada previa. Prueba de red Opentok. A continuación, puede unirse a la videollamada.

• VideoSala: en esta página, el usuario se conecta a la sesión, publica su flujo y se suscribe a cada uno de los flujos dentro de la sala.

Tenga en cuenta que el usuario puede directamente navegar directamente a la página VideoRoom. No hay autenticación implementada en el código de ejemplo.

Sala de espera

La página de la sala de espera crea un editor (mediante UsePublisher Hook) para mostrar el vídeo. Mediante los componentes AudioSettings y VideoSettings, el usuario puede silenciar y desactivar el micrófono y la cámara.

También es posible establecer el nombre de usuario utilizando el parámetro de consulta user-nameen la URL de la página. Así, si el usuario navega a waiting-room?user-name=JohnDoela página de la sala de espera establecerá el nombre de usuario en John Doe.

Por último, hay un efecto React que ejecuta la prueba de red cuando se carga la página. La prueba de red es manejada por un Hook personalizado, useNetworkTest. La prueba de red ejecuta dos pruebas diferentes: testConnectivity y testQuality. Si el usuario se incorpora a la llamada antes de que se hayan completado las pruebas, el useNetworkTest Hook las abortará.

Para obtener más información, consulte el Prueba de red GitHub repo

Sala de Video

Los componentes de la sala de Video utilizan los botones useSession y usePublisher Hooks para manejar la lógica de la Video API. El useEffect Hook en el montaje del componente obtiene las credenciales para conectarse a la sala (getCredentials ). Una vez que las credenciales son establecidas por el Hook, se dispara otro efecto que creará una nueva sesión, llamando a OT.initSession y session.connect secuencialmente.

Tras la creación de la sesión, el siguiente efecto activará la función de publicación desde la función usePublisher gancho.

Además, la sala de Video incluye el componente Chat que utiliza la señal de la Video API para enviar y recibir mensajes.

Por último, los ControlToolBar componentes incluyen los botones utilizados durante la videollamada: silenciar/activar micrófono y cámara, compartir pantalla y chat.

Contexto de React

El único contexto utilizado en esta aplicación es el UserContext que almacena las preferencias de nombre de usuario, localAudio y localVideo.

Ganchos React

Los ganchos utilizados por la aplicación se encuentran en el directorio hooks:

useSession

El src/hooks/useSession.js Hook maneja el objeto Session de la biblioteca Video API. Las funciones principales son:

• crearSesión: dadas las credenciales, la función se conecta a los servidores de Vonage Video y añade los escuchadores de eventos (onStreamCreated y onStreamDestroyed).

• destruirSesión: desconecta la sesión actual.

• suscribirse: dado un flujo y las opciones de abonado, se suscribe al flujo.

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

En el gancho useSession está la función onAudioLevel que escucha el comando audioLevelUpdated actualizado. La función comprueba si hay un nivel de audio superior a 0,2 para más de un umbral dado (speakingThreshold).

Si es así, asume que el suscriptor está hablando y añade una clase al elemento.

Si hay un nivel de audio inferior a 0,2 para un umbral dado (notSpeakingThreshold), significa que el abonado no está hablando.

usePublisher

El archivo src/hooks/usePublisher.js define el objeto Publisher. Las funciones principales son:

• initPublisher: solicita acceso al micrófono y a la cámara además de inicializar el objeto editor. Esta función crea el editor local en la página.

• publish: publica el flujo en la sesión.

• unpublish: despublica el flujo local de la Sesión y detiene los mediaTracks (micrófono y cámara).

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

En src/hooks/useNetworkTest.js Hook se encarga del opentok-network-js módulo. Las funciones principales son:

• initNetworkTest: inicia el NetworkTest objeto

• runNetworkTest: ejecuta el testConnectivity y testQuality y, a continuación, establece las variables de estado de acuerdo con el resultado

• stopNetworkTest: detiene la prueba de red en curso.

useChat

El src/hooks/useChat.js Hook maneja la funcionalidad de señal de la Video API de Vonage. Las funciones principales son:

• sendMessages: envía una señal de tipo type:message

• messageListenerpara el evento type:message evento. El receptor añadirá el mensaje al messages array.

Conclusión

En esta entrada del blog, expliqué cómo integrar React Hooks con Vonage Video API. El repositorio está disponible públicamente en Ganchos de la Video API. Puedes usarlo como referencia para integrar o refactorizar tu aplicación usando React Hooks.

Además, Vonage ha lanzado recientemente un nuevo producto llamado Vonage Video Express para crear una aplicación web de videoconferencia multipartita. Hemos escrito un entrada de blog al respecto.