ライブキャプション — React Native

OpenTokのライブキャプションAPIを使用して、OpenTokセッションに接続しているパブリッシャーおよびサブスクライバーの音声に対するリアルタイムのキャプション表示を有効にします。

ライブキャプションは、セッションレベルで REST API.

ライブキャプションは、以下の場合にのみサポートされます。 ルーティングセッション.

このトピックには以下のセクションが含まれます:

ライブキャプションの公開

ライブキャプションを有効にするには、 OTPublisher オプションのブール値を持つコンポーネント publishCaptions プロパティの properties prop が true:

<OTPublisher
  style={{width: 400, height: 300}}
  properties={{
    publishCaptions: true,
    // ... other properties
  }}
/>

この設定は false デフォルトで

このプロパティを(Reactの状態変化に基づいて)動的に変更することで、公開済みのストリームのキャプションの表示・非表示を切り替えることができます。

ライブキャプションを購読する

字幕の受信を開始するには、 subscribeToCaptions プロパティの properties の支柱である。 OTSubscriber コンポーネントを使用している:

<OTSubscriber
  style={{width: 200, height: 200}}
  properties={{
    subscribeToCaptions: true,
    // ... other properties
  }}
  eventHandlers={{
    captionReceived: event => {
      console.log('Caption received:', event.text);
      console.log('Caption final:', event.isFinal);
    },
  }}
/>

を設定することができます。 subscribeToCaptions プロパティ true ストリームを公開しているクライアントが現在ライブキャプションを公開して いるかどうかに関係なく。サブスクライバは、パブリッシャがキャプションを公開し始めると、キャプションデータの受信を開始する。

購読者は、以下の方法でキャプションを受け取る。 captionReceived イベント・ハンドラ(上図)。

について captionReceived event オブジェクトには 2 つのプロパティがあります:

  • text - キャプションのテキスト(文字列)
  • isFinal - キャプションテキストがフレーズ (true) または部分的な(false).

OpenTok React Native SDK では、キャプションイベントのテキストは表示されません。キャプションイベントに基づいてキャプションテキストを表示するための UI 要素を独自に作成することができます。

ライブキャプションの受信

Vonage Client SDKでは、パブリッシャーが自身のキャプションに関するイベントを受信することはサポートされていません。ローカルクライアントが配信するストリームのキャプションを表示するには、(ローカルパブリッシャーのストリームに対する)非表示のサブスクライバーを作成し、キャプションイベントをリッスンするようにします。 subscribeToSelf プロパティの OTSubscriber への true.この加入者のビデオをレンダリングしてはならない(そのビデオを width そして height を 0 に設定します)、オーディオを購読すべきではありません。 subscribeToAudio への false). 他のストリームのキャプションと同様に、UIにキャプションを追加することができます。詳しくは 購読者のカスタムレンダリング.