Subtítulos en directo — OpenTok.js

Utiliza la API de subtítulos en directo de OpenTok para habilitar los subtítulos de audio en tiempo real de los emisores y los suscriptores conectados a una sesión de OpenTok.

Los subtítulos en directo deben activarse a nivel de sesión a través de la opción API REST.

Los subtítulos en directo sólo se admiten en sesión enrutada.

Este tema incluye las siguientes secciones:

Publicación de subtítulos en directo

Subtítulos en directo

Un editor puede inicializarse con el booleano opcional publishCaptions parámetro. El parámetro se pasa a través de la función properties objeto. Este parámetro tendrá el valor «false» por defecto.

const publisher = OT.initPublisher({ publishCaptions: true });

Conmutación dinámica de los subtítulos en directo de un editor

Una vez activados los subtítulos en directo, un editor puede iniciar o detener el envío de subtítulos llamando a la función publishCaptions método. Este método acepta un valor booleano como parámetro.

El código siguiente muestra un ejemplo de detención de subtítulos en directo para un editor.

publisher.publishCaptions(false);

El código siguiente muestra un ejemplo de inicio de subtítulos en directo para un editor.

publisher.publishCaptions(true);

Suscribirse a los subtítulos en directo

Los suscriptores de OpenTok pueden elegir si desean empezar a recibir subtítulos en directo o dejar de recibirlos.

Suscriptor subscribeToCaptions Método

Un suscriptor puede activar o desactivar la recepción de subtítulos llamando al servicio asíncrono subscribeToCaptions método. Este método acepta un valor booleano como parámetro.

Este método puede invocarse independientemente de si el editor está publicando subtítulos en directo. El suscriptor comenzará a recibir datos de subtítulos una vez que el editor comience a publicar subtítulos.

El código siguiente muestra un ejemplo de inicio de subtítulos en directo para un abonado.

try {
    await subscriber.subscribeToCaptions(true);
} catch (err) {
    console.warn(err);
}

El código siguiente muestra un ejemplo de detención de subtítulos en directo para un abonado.

try {
    await subscriber.subscribeToCaptions(false);
} catch (err) {
    console.warn(err);
}

Activar los subtítulos en directo para un suscriptor

Los suscriptores pueden verificar si están suscritos activamente a los subtítulos en directo de un editor utilizando el botón isSubscribedToCaptions método. Este método no tiene parámetros y devuelve un valor booleano

const isSubscribed = subscriber.isSubscribedToCaptions()
console.log(`${isSubscribed} states whether or not a given subscriber is subscribing to live captions`).

Recepción de subtítulos en directo

Los suscriptores reciben los subtítulos a través de eventos. El SDK de OpenTok no muestra el texto de los eventos de subtítulos.

Título del suscriptor: Evento recibido

Un suscriptor que esté suscrito activamente al servicio de subtítulos en directo enviará captionReceived eventos. En captionReceived tiene tres propiedades: caption, streamIdy isFinal. streamId es el ID del flujo, mientras que caption Es el texto transcrito. isFinal indica si se ha terminado de transcribir un subtítulo. Este valor sólo es relevante cuando se utilizan subtítulos parciales. El desarrollador puede elegir cómo y dónde mostrar el texto del subtítulo.

subscriber.on('captionReceived', function(event){
    console.log(`Caption received for stream ${event.streamId}`);
    console.log(`Caption text: ${event.caption}`);
    console.log(`Final text: ${event.isFinal}`);
})

A continuación se muestran los registros de la consola cuando se utilizan subtítulos parciales y un editor dice "Esta es mi frase".

subscriber.on('captionReceived', function(event){
    console.log(`The ${event.isFinal ? 'complete' : 'partial'} caption text is: "${event.caption}"`)
})
// The partial caption text is: "This"
// The partial caption text is: "This is"
// The partial caption text is: "This is my" 
// The complete caption text is: "This is my sentence"

Cómo recibir tus propios subtítulos en directo

El Vonage Client SDK no permite que un editor reciba eventos relacionados con sus propios subtítulos. Para mostrar los subtítulos del propio locutor, crea un suscriptor oculto (al flujo del emisor local) para que escuche los eventos de subtítulos. Este suscriptor no debe estar vinculado al DOM ni suscribirse al audio, para evitar el eco. A continuación, puedes añadir los subtítulos a la interfaz de usuario.

A continuación se muestra la creación de un abonado oculto para que el editor reciba sus propios subtítulos.

const captionOnlySub = session.subscribe(
  publisher.stream,
  document.createElement('div'),
  {
    audioVolume: 0,
    testNetwork: true, // This option is only needed in OpenTok.js versions below 2.25.1
  },
);

captionOnlySub.on('captionReceived', (event) => {
  // Do something with the event.caption
});

Nota: Para OpenTok.js 2.25.0 y versiones anteriores, es necesario configurar testNetwork a true en las opciones que se pasan a Session.subscribe()debido a un error.

Aplicación de ejemplo

El Ejemplo «Basic-Captions» de opentok-web-samples utiliza subtítulos en directo en una aplicación web desarrollada con el Vonage Client SDK.