小道具 | プロパティ | 方法 | イベント

小道具

プロパティ

• subscribeToAudio (ブール値) — オーディオを購読するかどうか。

• subscribeToVideo (ブール値) — 動画を購読するかどうか。

• 字幕の購読 (ブール値) — キャプションを購読するかどうか。なお、セッションでキャプションが有効になっていること（Video APIのRESTメソッドまたはサーバーSDKを使用）、およびパブリッシャーがキャプションを配信していることが必要です。詳細については、 ライブ・キャプション開発者ガイド.

• 優先解像度 (文字列) — サブスクライバーの動画の推奨解像度を設定します。 文字列の形式は「幅×高さ」で、幅と高さはピクセル単位で指定します。有効な値は「1280x720」、「640x480」、および「352x288」です。

• 優先フレームレート (数値) — 希望するフレームレート（1秒あたりのフレーム数）を設定します。この値をnullに設定すると、優先フレームレートが解除され、クライアントは利用可能な最高フレームレートを使用します。有効な値は、30、15、7、および1です。

• audioVolume (数値) — 加入者の音声音量を0から100の間で設定します。値がこの範囲外の場合、範囲内に制限されます。

• scaleBehavior (文字列) - レンダリング時の動画の拡大縮小方法を指定します。サポートされている値は以下の通りです。 fill (デフォルト）と fit.このプロパティは現在iOSでのみサポートされています。

について OTSubscriber コンポーネントは、マウント時に指定されたセッションからの指定されたストリームを購読します。この OTSubscriber コンポーネントは、アンマウントされる際に、サブスクライブおよびサブスクライブ解除を停止します。

方法

getRtcStatsReport(streamId) 指定されたストリーム ID を持つストリームのサブスクライバーに関する RTC 統計レポートを取得します。 これは非同期操作です。OTSubscriber オブジェクトは、 rtcStatsReport 加入者のRTC統計情報が利用可能になった際のイベント。

イベント

• audioLevel (SubscriberAudioLevelEvent) — 直近の代表的なオーディオレベルを、一定の間隔で送信します。 参照 SubscriberAudioLevelEvent

• audioNetworkStats (オブジェクト) — 加入者の音声統計情報を報告するために定期的に送信される。 An オーディオネットワーク統計 オブジェクトがイベントハンドラに渡されます。

• captionReceived (オブジェクト) — 購読者にキャプションが受信された際に送信される。 A キャプション受信 オブジェクトがイベントハンドラに渡されます。

• 接続済み () — サブスクライバーがストリームへの接続に成功したときに送信されます。イベントオブジェクトには 以下のものが含まれます。 streamId ストリームを識別するプロパティ。

• 切断された () — サブスクライバーのストリームが中断されたときに呼び出されます。

• エラー (オブジェクト) — サブスクライバーがストリームへの接続に失敗した場合に送信されます。

• otrnError (オブジェクト) — ネイティブのサブスクライバーインスタンスとJSコンポーネント間の通信にエラーが発生した場合に送信されます。

• rtcStatsReport (オブジェクト) -- サブスクライバー向けの RTC 統計レポートが利用可能になった際に、 以下の呼び出しへの応答として送信される OTSubscriber.getRtcStatsReport() メソッド。A SubscriberRtcStatsReportEvent オブジェクトが イベントハンドラに渡されます。このイベントオブジェクトには、以下のプロパティがあります：

  • jsonArrayOfReports このプロパティは、メディアストリームに関する RTCStatsReport の JSON 配列です。 この JSON 配列の構造は、Web ブラウザで実装されている RtcStatsReport オブジェクトの形式と 似ています（ Mozillaのドキュメント). 以下も参照のこと。 このW3Cドキュメント.

  • stream -- 加入者のストリームを表すオブジェクト。このオブジェクトには、 streamId ストリームを識別するプロパティ。

• videoDataReceived () - 動画の1フレームがデコードされたときに送信されます。加入者は比較的短時間で接続しますが、動画の同期にはさらに時間がかかる場合があります。このメッセージは、 connected メッセージが送信される。

• videoDisabled (文字列) — サブスクライバーが動画の受信を停止した際に送信されるメッセージです。動画の受信が停止した理由については、reason パラメータを確認してください。

• videoDisableWarning () - このメッセージは、OpenTok Media Router がストリームの画質が低下したと判断し、さらに画質が低下した場合は動画が停止される場合に送信されます。画質がさらに低下した場合、加入者は動画を停止し、 videoDisabled メッセージが送信されます。ストリームの品質が向上した場合、 videoDisableWarningLifted メッセージが送信される。

• videoDisableWarningLifted () — このメッセージは、サブスクライバーの動画ストリームが開始されたとき（それまで動画がなかった場合）、または再開されたとき（動画が無効化されていた後）に送信されます。動画が開始（または再開）された理由については、reason パラメータを確認してください。

• videoEnabled (文字列) - このメッセージは、サブスクライバーの動画ストリームが開始されたとき（それまで動画がなかった場合）、または再開されたとき（動画が無効化されていた後）に送信されます。動画が開始（または再開）された理由については、reason パラメータを確認してください。

• videoNetworkStats (オブジェクト) — 加入者の動画統計情報を報告するために定期的に送信される。A VideoNetworkStatsEvent オブジェクトがイベントハンドラに渡されます。

例

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      streamProperties: {},
    };

    this.subscriberProperties = {
      subscribeToAudio: false,
      subscribeToVideo: true,
      subscribeToCaptions: false,
    };

    this.sessionEventHandlers = {
      streamCreated: event => {
        const streamProperties = {...this.state.streamProperties, [event.streamId]: {
          subscribeToAudio: true,
          subscribeToVideo: false,
          style: {
            width: 400,
            height: 300,
          },
        }};
        this.setState({ streamProperties });
      },
    };

    this.subscriberEventHandlers = {
      error: (error) => {
        console.log(`There was an error with the subscriber: ${error}`);
      },
      audioNetworkStats: event => {
        console.log('audioNetworkStats', event);
        // { timeStamp: 1643203644833, audioPacketsLost: 0, audioPacketsReceived: 64, audioBytesReceived: 5574 }
      },
      videoNetworkStats: event => {
        console.log('videoNetworkStats', event);
        // videoBytesReceived: 706635, videoPacketsLost: 0, timeStamp: 1643203644724, videoPacketsReceived: 656 }
      },
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sessionEventHandlers}>
        <OTSubscriber
          properties={this.subscriberProperties}
          eventHandlers={this.subscriberEventHandlers}
          style={{ height: 100, width: 100 }}
          streamProperties={this.state.streamProperties}
        />
      </OTSession>
    );
  }
}

ストリームのカスタムレンダリング

ストリームに対する個々の購読者のレンダリングを制御することができます。詳しくは、以下を参照してください。 購読者のカスタムレンダリング.