Implementar um aplicativo de Video API com React Hooks

Se você já é desenvolvedor de ReactJS há alguns anos, provavelmente teve que refatorar seu código para usar os React Hooks. Os React Hooks foram introduzidos a partir da versão 16.8 (fevereiro de 2019, documentação) e permitem que você use o state e outros recursos do React sem precisar escrever uma classe.

Esta postagem do blog explicará como integrar a Video API da Vonage em JavaScript à sua aplicação React usando Hooks.

Pré-requisitos

1. Uma conta da Video API da Vonage. Se você ainda não tiver uma, pode criar uma conta no Painel de Controle de Video

2. Versão do ReactJS >= 16.8

O ponto de entrada do projeto é o src/index.js arquivo. O arquivo de índice importa o arquivo App, que contém as definições de rotas e componentes.

Páginas

As rotas são definidas no arquivo App.js. O código utiliza o react-router-dom módulo para declarar as rotas. Existem duas rotas principais:

• Sala de espera: nesta página, o usuário pode definir as configurações do microfone e da câmera, bem como realizar um teste antes da chamada Teste de Rede Opentok. Em seguida, ele pode participar da videochamada.

• VideoRoom: nesta página, o usuário se conecta à sessão, publica sua transmissão e se inscreve em cada uma das transmissões dentro da sala.

Observe que o usuário pode acessar diretamente acessar a página do VideoRoom. Não há autenticação implementada no código de exemplo.

Sala de espera

A página da sala de espera cria um editor (usando UsePublisher Hook) para exibir o feed de Video. Usando os componentes AudioSettings e VideoSettings, o usuário pode ativar e desativar o microfone e a câmera.

Também é possível definir o nome de usuário usando o parâmetro de consulta, user-name, na URL da página. Portanto, se o usuário acessar waiting-room?user-name=JohnDoe, a página da sala de espera definirá o nome de usuário como John Doe.

Por fim, há um efeito do React que executa o teste de rede quando a página é carregada. O teste de rede é gerenciado por um Hook personalizado, useNetworkTest. O teste de rede executa dois testes diferentes: testConnectivity e testQuality. Se o usuário entrar na chamada antes que os testes sejam concluídos, o useNetworkTest Hook irá abortá-los.

Para mais informações, consulte o repositório do Network Test no GitHub

Sala de Video

Os componentes da sala de vídeo utilizam o useSession e usePublisher Hooks para lidar com a lógica da Video API. O useEffect Hook na montagem do componente obtém as credenciais para se conectar à sala (função getCredentials ). Assim que as credenciais são definidas pelo Hook, outro efeito é acionado, criando uma nova sessão e chamando OT.initSession e session.connect sequencialmente.

Após a criação da sessão, o próximo efeito acionará a função de publicação a partir do usePublisher Hook.

Além disso, a sala de Video inclui o Chat componente que utiliza a Video API Signal para enviar e receber mensagens.

Por fim, os ControlToolBar componentes incluem os botões usados durante a videochamada: silenciar/ativar o microfone e a câmera, compartilhamento de tela e chat.

Contexto do React

O único contexto utilizado neste aplicativo é o UserContext que armazena as preferências de nome de usuário, localAudio e localVideo.

Hooks do React

Os hooks utilizados pelo aplicativo estão no diretório hooks:

useSession

O src/hooks/useSession.js Hook gerencia o objeto Session da biblioteca da Video API. As principais funções são:

• createSession: com as credenciais fornecidas, a função se conecta aos servidores do Vonage Video e adiciona os ouvintes de eventos (onStreamCreated e onStreamDestroyed).

• destroySession: desconecta a sessão atual.

• inscrever-se: recebendo um fluxo e opções de assinante, esta função assina o fluxo.

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

No hook `useSession`, existe a onAudioLevel função que monitora o evento `audioLevelUpdated` . A função verifica se há um nível de áudio superior a 0,2 por um tempo superior a um determinado limite (speakingThreshold).

Nesse caso, ele presume que o assinante está falando e adiciona uma classe ao elemento.

Se houver um nível de áudio inferior a 0,2 para um determinado limiar (notSpeakingThreshold), isso significa que o assinante não está falando.

usePublisher

O src/hooks/usePublisher.js arquivo define o objeto Publisher. As principais funções são:

• initPublisher: solicita acesso ao microfone e à câmera, além de inicializar o objeto “publisher”. Essa função cria o “publisher” local na página.

• publish: publica o fluxo na sessão.

• unpublish: retira a transmissão local da Sessão e interrompe os mediaTracks (microfone e câmera).

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

O src/hooks/useNetworkTest.js Hook controla o opentok-network-js módulo. As principais funções são:

• initNetworkTest: inicia o NetworkTest objeto

• runNetworkTest: executa o testConnectivity e testQuality funções e, em seguida, define as variáveis do estado de acordo com o resultado

• stopNetworkTest: interromper o teste de rede em andamento.

useChat

O src/hooks/useChat.js Hook lida com a funcionalidade de sinal da Video API da Vonage. As principais funções são:

• sendMessages: enviar um sinal do tipo type:message

• messageListener: ouvinte para o type:message evento. O ouvinte adicionará a mensagem à messages array.

Conclusão

Nesta postagem do blog, expliquei como integrar os React Hooks à Video API da Vonage. O repositório está disponível publicamente em Video API Hooks. Você pode usá-lo como referência para integrar ou refatorar seu aplicativo usando React Hooks.

Além disso, a Vonage lançou recentemente um novo produto chamado Vonage Video Express para criar um aplicativo web de videoconferência com vários participantes. Escrevemos uma postagem no blog sobre o assunto.