Sous-titres en direct — OpenTok.js

Utilisez l'API de sous-titrage en direct d'OpenTok pour activer le sous-titrage audio en temps réel des diffuseurs et des abonnés connectés à une session OpenTok.

Le sous-titrage en direct doit être activé au niveau de la session via l'option API REST.

Le sous-titrage en direct n'est possible que dans les cas suivants session acheminée.

Cette rubrique comprend les sections suivantes :

Publication de sous-titres en direct

Activation des sous-titres en direct

Un éditeur peut être initialisé avec l'option booléenne publishCaptions paramètre. Le paramètre est transmis par l'intermédiaire de la fonction properties objet. Ce paramètre sera faux par défaut.

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

Commutation dynamique des sous-titres en direct pour un éditeur

Une fois que les sous-titres en direct sont activés, un éditeur peut commencer ou arrêter d'envoyer des sous-titres en appelant la commande publishCaptions méthode. Cette méthode accepte un booléen comme paramètre.

Le code ci-dessous montre un exemple d'arrêt des sous-titres en direct pour un éditeur.

publisher.publishCaptions(false);

Le code ci-dessous montre un exemple de démarrage de sous-titres en direct pour un éditeur.

publisher.publishCaptions(true);

S'abonner aux sous-titres en direct

Un abonné OpenTok peut choisir d'activer ou de désactiver l'affichage des sous-titres en direct.

Méthode de l'abonné subscribeToCaptions

Un abonné peut commencer ou arrêter de recevoir des sous-titres en appelant la fonction asynchrone subscribeToCaptions méthode. Cette méthode accepte un booléen comme paramètre.

Cette méthode peut être appelée même si l'éditeur est en train de publier des sous-titres en direct. L'abonné commencera à recevoir des données de sous-titrage dès que l'éditeur commencera à publier des sous-titres.

Le code ci-dessous montre un exemple de démarrage de sous-titres en direct pour un abonné.

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

Le code ci-dessous montre un exemple d'arrêt des sous-titres en direct pour un abonné.

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

Activation des sous-titres en direct pour un abonné

Les abonnés peuvent vérifier s'ils sont activement abonnés aux sous-titres en direct d'un éditeur à l'aide de la fonction isSubscribedToCaptions (méthode). Cette méthode n'a pas de paramètres et renvoie un booléen

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

Recevoir des sous-titres en direct

Les abonnés reçoivent les sous-titres via des événements. Le SDK OpenTok n'affiche pas le texte des événements de sous-titrage.

Événement Subscriber captionReceived

Un abonné qui est activement abonné aux sous-titres en direct enverra captionReceived événements. Les captionReceived possède trois propriétés : caption, streamIdet isFinal. streamId est l'identifiant du flux, tandis que caption est le texte transcrit. isFinal indique si la transcription d'une légende est terminée. Cette valeur n'est pertinente que lors de l'utilisation de sous-titres partiels. Le développeur peut choisir comment et où rendre le texte de la légende.

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

La figure suivante montre les journaux de la console lorsque l'on utilise des sous-titres partiels et qu'un éditeur dit "Ceci est ma phrase".

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"

Recevoir ses propres sous-titres en direct

Le Vonage Client SDK ne permet pas à un éditeur de recevoir des événements pour ses propres sous-titres. Pour rendre les propres sous-titres de l'orateur, créez un abonné caché (au flux de l'éditeur local) pour écouter les événements de sous-titres. Cet abonné ne doit pas être attaché au DOM et ne doit pas s'abonner à l'audio, pour éviter l'écho. Vous pouvez ensuite ajouter les sous-titres à l'interface utilisateur.

La figure suivante montre la création d'un abonné caché pour que l'éditeur reçoive ses propres légendes.

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

Remarque : Pour OpenTok.js 2.25.0 et les versions antérieures, vous devez paramétrer testNetwork à true dans les options transmises à Session.subscribe()en raison d'un bogue.

Exemple d'application

Les Exemple « Basic-Captions » d'opentok-web-samples utilise le sous-titrage en direct dans une application web développée à l'aide du Vonage Client SDK.