Démarrer avec l'API de sous-titrage en direct de Vonage dans Node.js

Introduction

Imaginez ceci. Vous avez utilisé Vonage Video pour ajouter une plateforme de diffusion en direct pour votre collège communautaire local afin de permettre aux étudiants éloignés d'assister aux cours. Félicitations ! Votre prochain objectif est d'ajouter une fonction de sous-titrage en direct. Que ce soit pour l'accessibilité, l'amélioration de l'attention des étudiantsou pour d'autres raisons, les sous-titres sont essentiels. Dans ce guide de démarrage, vous apprendrez à ajouter l'API API de sous-titrage en direct à votre application et prendre en charge un grand nombre de langues. Il y a même un exemple dans ce dépôt dépôt GitHub que vous pouvez déployer en un clic et essayer.

Nous prenons en charge le sous-titrage en direct dans la plupart de nos zones médiatiques régionales, ce qui est distinct de notre prise en charge linguistique. Toutes les zones médiatiques régionales prises en charge le sont dans toutes nos langues.

Obtenir des accréditations

Avant d'avoir des sous-titres, il faut que des participants parlent lors d'un appel vidéo. Pour pouvoir participer à un appel vidéo, une personne aura besoin d'un jeton pour pouvoir se joindre à l'appel. Ce jeton est généré sur un serveur à l'aide de l'identifiant de votre application et de l'identifiant de session. Vous pouvez considérer l'ID de session comme l'identifiant unique de la salle dans laquelle se déroule votre appel vidéo.

Ce guide suppose que vous disposez déjà d'un serveur opérationnel. Si ce n'est pas le cas, vous pouvez trouver un exemple d'application serveur écrite en Node.js que vous pouvez déployer. Si vous souhaitez mettre en place un serveur de test, vous pouvez utiliser la plateforme sans serveur de la plateforme sans serveur de Vonage de Vonage pour déployer cette application Projet Node.js de serveur d'apprentissage vidéo de Vonage.

Ajout de points d'extrémité de serveur

Pour démarrer et arrêter les sous-titres en direct dans un appel vidéo, les demandes doivent provenir d'un serveur. Si vous utilisez le Node.js SDKle code des points d'extrémité peut ressembler à ceci :

/**
 * 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}`);
  }
});

Remarque : si vous consultez l'exemple d'application Video Node.js Learning Server, vous trouverez ce code dans le fichier routes/index.js.

Pour changer de langue, réglez le languageCode sur une langue prise en charge.

Si vous utilisez un autre langage de serveur, l API REST peut être utilisée pour démarrer et arrêter le sous-titrage.

Mise en place du Frontend

Maintenant que le serveur est prêt, configurons l'application frontale pour qu'elle effectue les appels de démarrage, d'arrêt et d'écoute des sous-titres.

Vous trouverez le code suivant, utilisé dans le contexte de l'exemple d'application Basic Captions, dans le fichier js/app.js.

Pour lancer le sous-titrage dans votre session, vous devez envoyer une requête POST à votre serveur, en transmettant les paramètres sessionId et token. Voici le code utilisé dans l'application de démonstration pour réaliser cette opération :

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);
  }
}

Une autre demande POST est effectuée pour arrêter les sous-titres dans votre session en utilisant la propriété id de l'objet "captions" que vous avez reçu en retour de la demande de démarrage des sous-titres :

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);
  }
}

La prochaine modification à apporter est d'ajouter publishCaptions: true lors de l'initialisation d'un Publisher.

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

Désormais, toute personne publiant un appel vidéo se voit également attribuer des sous-titres. Cela signifie que toute personne qui s'abonne peut alors recevoir ces sous-titres pour les afficher. L'objet Subscriber possède un événement captionReceived que vous pouvez écouter :

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);
});

Conclusion

Voilà, c'est fait ! Vous avez maintenant contribué à aider les élèves à mieux retenir les informations et à réussir. Vous avez des questions ou des commentaires ? Rejoignez notre communauté de développeurs communauté de développeurs sur Slackou suivez-nous sur X (anciennement Twitter), ou abonnez-vous à notre lettre d'information aux développeurs. Restez en contact, partagez vos progrès et tenez-vous au courant des dernières nouvelles, astuces et événements pour les développeurs !