ライブキャプション — OpenTok.js
OpenTokのライブキャプションAPIを使用して、OpenTokセッションに接続しているパブリッシャーおよびサブスクライバーの音声に対するリアルタイムのキャプション表示を有効にします。
ライブキャプションは、セッションレベルで REST API.
ライブキャプションは、以下の場合にのみサポートされます。 ルーティングセッション.
このトピックには以下のセクションが含まれます：
ライブキャプションの公開
ライブキャプションの有効化
パブリッシャーはオプションの boolean publishCaptions パラメータで渡されます。パラメータは properties オブジェクトを返します。このパラメータはデフォルトではfalseである。
const publisher = OT.initPublisher({ publishCaptions: true });
パブリッシャーのライブキャプションを動的に切り替える
ライブキャプションが有効になった後、パブリッシャーは publishCaptions メソッドを呼び出します。このメソッドはパラメータとしてブール値を受け取ります。
以下のコードは、パブリッシャーのライブキャプションを停止する例です。
publisher.publishCaptions(false);
以下のコードは、パブリッシャーに対してライブキャプションを開始する例を示しています。
publisher.publishCaptions(true);
ライブキャプションを購読する
OpenTokの加入者は、ライブ字幕の受信を開始または停止することを選択できます。
サブスクライバ subscribeToCaptions メソッド
サブスクライバーは、非同期の subscribeToCaptions メソッドを呼び出します。このメソッドはパラメータとしてブール値を受け取ります。
このメソッドは、パブリッシャーが現在ライブキャプションを公開しているか否かに関わらず 呼び出すことができます。サブスクライバーは、パブリッシャーがキャプションを公開し始めると、 キャプションデータの受信を開始します。
以下のコードは、購読者のためにライブ・キャプションを開始する例を示しています。
try {
await subscriber.subscribeToCaptions(true);
} catch (err) {
console.warn(err);
}
以下のコードは、購読者のライブ・キャプションを停止する例を示しています。
try {
await subscriber.subscribeToCaptions(false);
} catch (err) {
console.warn(err);
}
加入者のライブキャプションを有効にする
サブスクライバーは、パブリッシャーのライブキャプションをアクティブに購読しているかどうかを、次の方法で確認できます。 isSubscribedToCaptions メソッドを呼び出します。このメソッドにはパラメータはなく、真偽値を返します。
const isSubscribed = subscriber.isSubscribedToCaptions()
console.log(`${isSubscribed} states whether or not a given subscriber is subscribing to live captions`).
ライブキャプションの受信
購読者はイベントを通じて字幕を受け取ります。OpenTok SDKでは、字幕イベントのテキストは表示されません。
サブスクライバ captionReceived イベント
ライブ・キャプションを積極的に購読している購読者は、次のような配信を行います。 captionReceived イベントその captionReceived イベント・オブジェクトには3つのプロパティがある： caption, streamIdそして isFinal. streamId はストリームのIDである。 caption は転写されたテキストである。 isFinal は、キャプションの転記が終了したかどうかを示します。この値は、部分的なキャプションを使用する場合にのみ関連します。開発者は、キャプションのテキストをどこでどのようにレンダリングするかを選択できます。
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}`);
})
以下は、部分的なキャプションを使い、パブリッシャーに "This is my sentence" と言わせたときのコンソールログです。
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"
ライブキャプションの受信
Vonage Web Client SDKは、パブリッシャーが自身のキャプションのイベントを受信することをサポートしていません。スピーカー自身のキャプションをレンダリングするには、キャプションイベントを listen するために、(ローカルパブリッシャーのストリームに) 非表示のサブスクライバーを作成します。このサブスクライバは、エコーを避けるために、DOM にアタッチされるべきではありませんし、オーディオをサブスクライブすべきではありません。そうすれば、UI にキャプションを追加することができます。
以下は、パブリッシャーが独自のキャプションを受け取るために、非表示のサブスクライバーを 作成する例です。
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
});
注： OpenTok.js 2.25.0以前のバージョンでは、次のように設定する必要があります。 testNetwork への true に渡されるオプションの Session.subscribe()バグのため。
サンプルアプリ
について opentok-web-samples Basic-Captions サンプル Vonage Client SDKを使用して構築されたWebアプリで、ライブキャプション機能を利用しています。