Primeros pasos con la API de subtítulos en directo de Vonage en Node.js

Introducción

Imagina esto. Has usado Vonage Video para agregar una plataforma de transmisión en vivo para tu universidad comunitaria local para permitir que los estudiantes remotos asistan a clases. Felicitaciones. Tu próximo paso es agregar una función de subtítulos en vivo. Ya sea por accesibilidad, mejorar la atención de los estudiantesu otras razones, los subtítulos son esenciales. En esta guía de introducción, aprenderá a añadir la API de subtítulos en directo API de subtítulos en directo a su aplicación y admitir una gran variedad de idiomas. Incluso hay un ejemplo en este repositorio de GitHub que puedes desplegar con un clic y probar.

En la mayoría de nuestras zonas multimedia regionales se admiten subtítulos en directo, lo que es independiente de la asistencia lingüística. Todas las zonas multimedia regionales son compatibles con todos nuestros idiomas.

Obtener credenciales

Antes de poder tener subtítulos, necesitarás que los participantes hablen en una videollamada. Para poder participar en una videollamada, una persona necesitará un token para poder unirse. Este token se genera en un servidor utilizando el ID de tu aplicación y el ID de sesión. Puedes pensar en el ID de sesión como el identificador único de la sala en la que se está realizando la videollamada.

Este tutorial asume que ya tienes un servidor funcionando. Si no es así, puedes encontrar una aplicación de servidor de ejemplo escrita en Node.js que puedes desplegar. Si deseas crear un servidor de prueba, puedes utilizar la plataforma sin servidor de plataforma sin servidor de Vonage para implementar este Proyecto de servidor de aprendizaje por video Node.js de Vonage.

Añadir puntos finales de servidor

Para iniciar y detener los subtítulos en directo en una videollamada, las solicitudes deben proceder de un servidor. Si utiliza el SDK de Node.jsel código para los puntos finales puede ser similar 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}`);
  }
});

Nota: Si está viendo la aplicación de ejemplo del Servidor de Aprendizaje de Video Node.js, puede encontrar este código en el archivo archivo routes/index.js.

Para cambiar el idioma, ajuste languageCode en un idioma compatible.

Si utiliza otro lenguaje de servidor, la API REST puede utilizarse para iniciar y detener el subtitulado.

Configuración del frontend

Ahora que el servidor está listo, vamos a configurar la aplicación frontend para hacer las llamadas para iniciar, detener y escuchar los subtítulos.

Puede encontrar el siguiente código utilizado en el contexto de la aplicación de ejemplo Basic Captions en el archivo js/app.js.

Para iniciar el subtitulado en su sesión, tendrá que hacer una petición POST a su servidor, pasando los valores sessionId y token. Aquí está el código utilizado en la aplicación de demostración para que esto suceda:

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

Se realiza otra petición POST para detener los subtítulos en su sesión utilizando la propiedad id del objeto captions que se obtiene de la petición para iniciar los subtítulos:

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

El siguiente cambio a realizar es añadir publishCaptions: true al inicializar un Publisher.

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

Ahora, cualquiera que publique en la videollamada también tendrá subtítulos creados. Eso significa que cualquiera que se suscriba puede recibir esos subtítulos para mostrarlos. El objeto Subscriber tiene un evento captionReceived que puedes escuchar:

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

Conclusión

Ya está. Ya has contribuido a que los alumnos retengan mejor la información y alcancen el éxito. ¿Tienes alguna pregunta o comentario? Únete a nuestra comunidad de desarrolladores en Slacko síguenos en X (antes Twitter), o suscríbete a nuestro Boletín para desarrolladores. Mantente conectado, comparte tus progresos y entérate de las últimas noticias, consejos y eventos para desarrolladores.