Legendas em tempo real — OpenTok.js

Use a API de legendas ao vivo da OpenTok para habilitar a legenda em tempo real do áudio dos emissores e assinantes conectados a uma sessão da OpenTok.

A legenda em tempo real deve ser ativada no nível da sessão por meio do API REST.

A legenda em tempo real é compatível apenas em sessão encaminhada.

Este tópico inclui as seguintes seções:

Publicação de legendas em tempo real

Ativando as legendas em tempo real

Um publisher pode ser inicializado com o valor booleano opcional publishCaptions parâmetro. O parâmetro é passado por meio do properties objeto. Esse parâmetro terá o valor “false” por padrão.

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

Ativar e desativar legendas em tempo real para um editor de forma dinâmica

Depois que as legendas em tempo real forem ativadas, um editor poderá iniciar ou interromper o envio de legendas chamando a função publishCaptions método. Esse método aceita um valor booleano como parâmetro.

O código abaixo mostra um exemplo de como interromper as legendas em tempo real para um editor.

publisher.publishCaptions(false);

O código abaixo mostra um exemplo de como ativar legendas em tempo real para um editor.

publisher.publishCaptions(true);

Inscrever-se para receber legendas em tempo real

Um assinante do OpenTok pode optar por começar ou parar de receber legendas em tempo real.

Método `subscribeToCaptions` do assinante

Um assinante pode ativar ou desativar o recebimento de legendas ligando para o serviço assíncrono subscribeToCaptions método. Esse método aceita um valor booleano como parâmetro.

O método pode ser chamado independentemente de o emissor estar ou não publicando legendas em tempo real no momento. O assinante começará a receber os dados das legendas assim que o emissor iniciar a publicação das legendas.

O código abaixo mostra um exemplo de como ativar legendas em tempo real para um assinante.

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

O código abaixo mostra um exemplo de como interromper as legendas em tempo real para um assinante.

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

Ativando legendas em tempo real para um assinante

Os assinantes podem verificar se estão ativamente inscritos nas legendas ao vivo de um canal usando o isSubscribedToCaptions método. Esse método não possui parâmetros e retorna um valor booleano

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

Recebendo legendas em tempo real

Os assinantes recebem legendas por meio de eventos. O SDK do OpenTok não exibe o texto dos eventos de legenda.

Legenda do assinante: Evento recebido

Um assinante que esteja ativamente inscrito no serviço de legendas ao vivo enviará captionReceived eventos. O captionReceived O objeto `event` possui três propriedades: caption, streamId, e isFinal. streamId é o ID do fluxo, enquanto caption é o texto transcrito. isFinal indica se a transcrição de uma legenda foi concluída. Esse valor só é relevante ao se utilizar legendas parciais. O desenvolvedor pode escolher como e onde exibir o texto da legenda.

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 seguir, são apresentados os registros do console ao usar legendas parciais e quando um locutor diz “Esta é a minha 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"

Como receber suas próprias legendas em tempo real

O Client SDK do cliente web da Vonage não permite que um editor receba eventos relativos às suas próprias legendas. Para exibir as próprias legendas do locutor, crie um assinante oculto (no fluxo do editor local) para monitorar os eventos de legenda. Esse assinante não deve estar vinculado ao DOM nem assinar o áudio, a fim de evitar eco. Você pode então adicionar as legendas à interface do usuário.

A seguir, é mostrada a criação de um assinante oculto para que o editor receba suas próprias legendas.

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

Observação: Para o OpenTok.js 2.25.0 e versões anteriores, é necessário definir testNetwork para true nas opções passadas para Session.subscribe(), devido a um bug.

Aplicativo de exemplo

O opentok-web-samples – Exemplo “Basic-Captions” utiliza legendas em tempo real em um aplicativo web desenvolvido com o Vonage Client SDK.