Introdução à API de legendas ao vivo da Vonage no Node.js

Introdução

Imagine o seguinte. Você utilizou o Vonage Video para implementar uma plataforma de transmissão ao vivo na sua faculdade comunitária local, a fim de permitir que alunos remotos assistam às aulas. Parabéns! O próximo passo é adicionar um recurso de legendas em tempo real. Seja por questões de acessibilidade, maior concentração dos alunosou por outros motivos, as legendas são essenciais. Neste guia de introdução, você aprenderá a adicionar a API de Legendas ao Vivo ao seu aplicativo e oferecer suporte a diversos idiomas. Há até mesmo um exemplo neste repositório do GitHub que você pode implantar com um clique e experimentar.

Oferecemos suporte a legendas em tempo real na maioria das nossas zonas de mídia regionais, o que é diferente do nosso suporte a idiomas. Todas as zonas de mídia regionais compatíveis oferecem suporte a todos os nossos idiomas.

Obtenção de credenciais

Para que haja legendas, é necessário que haja participantes falando em uma videochamada. Para poder participar de uma videochamada, a pessoa precisará de um token para poder entrar. Esse token é gerado em um servidor usando o ID do seu aplicativo e o ID da sessão. Você pode pensar no ID da sessão como o identificador único da sala em que sua videochamada está ocorrendo.

Este passo a passo pressupõe que você já tenha um servidor em funcionamento. Caso contrário, você pode encontrar um exemplo de aplicativo de servidor escrito em Node.js que pode ser implantado. Se quiser iniciar um servidor de teste, você pode usar a plataforma sem servidor da Vonage para implantar este projeto do Vonage Video Learning Server em Node.js.

Adicionando pontos de extremidade do servidor

Para iniciar e interromper as legendas em tempo real em uma videochamada, as solicitações devem ser enviadas por um servidor. Se você estiver usando o SDK do Node.js, o código para os endpoints pode ser semelhante a este: 

/**
 * POST /captions/start
 */
router.post('/captions/start', async (req, res) => {
  const sessionId = req.body.sessionId;
  const captionsOptions = {
    languageCode: 'en-US',
    partialCaptions: 'true',
  };
  try {
    const captionsResponse = await vonage.video.enableCaptions(sessionId, req.body.token, captionsOptions);
    const captionsId = captionsResponse.captionsId;
    res.send({ id: captionsId });
  } catch (error) {
    console.error("Error starting captions: ",error);
    res.status(500).send(`Error starting captions: ${error}`);
  }
});

/**
 * POST /captions/:captionsId/stop
 */
router.post('/captions/:captionsId/stop', async (req, res) => {
  const captionsId = req.params.captionsId;
  try {
    await vonage.video.disableCaptions(captionsId);
    res.sendStatus(202)
  } catch (error) {
    console.error("Error stopping captions: ",error);
    res.status(500).send(`Error stopping captions: ${error}`);
  }
});

Observação: Se você estiver consultando o aplicativo de exemplo “Video Node.js Learning Server”, poderá encontrar esse código no arquivo arquivo routes/index.js.

Para alterar o idioma, defina o languageCode para um idioma compatível.

Se você estiver usando outra linguagem de servidor, a API REST pode ser usada para iniciar e interromper a legenda.

Configurando o front-end

Agora que o servidor está pronto, vamos configurar o aplicativo front-end para fazer as chamadas para iniciar, parar e aguardar as legendas.

Você pode encontrar o código a seguir, utilizado no contexto do aplicativo de exemplo “Basic Captions”, no arquivo arquivo js/app.js.

Para iniciar a geração de legendas na sua sessão, você precisará fazer uma solicitação POST ao seu servidor, passando o sessionId e token. Aqui está o código usado no aplicativo de demonstração para fazer isso funcionar:

async function startCaptions() {
  console.log('start captions');
  try {
    captions = await postData(SAMPLE_SERVER_BASE_URL +'/captions/start',{sessionId, token});
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'inline';
  }
  catch(error){
    handleError(error);
  }
}

É enviada outra solicitação POST para interromper as legendas na sua sessão, utilizando a id propriedade do objeto de legendas que você recebe em resposta à solicitação para ativar as legendas:

async function stopCaptions() {
  console.log('stop captions');
  try {
    const response = await fetch(
      ${SAMPLE_SERVER_BASE_URL}/captions/${captions.id}/stop,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    if (!response.ok) {
      throw new Error('error getting data!');
    }
    captionsStopBtn.style.display = 'none';
    captionsStartBtn.style.display = 'inline';
  } catch (error) {
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'inline';
    handleError(error);
  }
}

A próxima alteração a ser feita é adicionar publishCaptions: true ao inicializar um Publisher.

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%',
  publishCaptions: true,
};

Agora, qualquer pessoa que publique conteúdo na videochamada também tem legendas geradas. Isso significa que qualquer assinante pode receber essas legendas para exibi-las. O objeto Subscriber possui um captionReceived evento que você pode monitorar:

subscriber.on('captionReceived', function(event){
  console.log('captionReceived event: ', event);
  if (!captions) {
    // Client didn't initiate the captions. Remove controls.
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'none';
  }
  captionsBox.style.display = 'flex';
  captionsText.textContent = event.caption;
  // remove the captions after 5 seconds
  const removalTimerDuration = 5 * 1000;
  clearTimeout(captionsRemovalTimer);
  captionsRemovalTimer = setTimeout(() => {
    captionsBox.style.display = 'none';
    captionsText.textContent = '';
  }, removalTimerDuration);
});

Conclusão

É isso aí! Você já contribuiu para que os alunos retenham melhor as informações e alcancem o sucesso. Tem alguma dúvida ou comentário? Participe da nossa ativa no Slack, siga-nos no X (antigo Twitter) ou inscreva-se em nosso Boletim Informativo para Desenvolvedores. Fique conectado, compartilhe seu progresso e acompanhe as últimas notícias, dicas e eventos para desenvolvedores!