ストリームの購読 — React Native

一旦セッションに接続, セッション内のストリームを購読することができます。ストリームを購読すると、その動画ストリームがクライアントページに表示され、音声が再生されます。

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

ストリームの購読
ストリーム・プロパティの設定
購読者のカスタムレンダリング
新しいストリームが作成されたことを検知する
ストリームからの配信停止
ストリームがセッションから離れるタイミングの検出
自動再接続
好みのフレームレートと解像度を設定する
加入者のビデオが無効になっていることを検知する
ストリームのビデオ寸法が変更されたときの検出
ストリーム統計の取得

ストリームの購読

セッション内のすべてのストリームをサブスクライブするには、OTSubscriber オブジェクトを OTSession オブジェクトのチリとして追加します：

<OTSession
  apiKey="the API key"
  sessionId="the session ID"
  token="the token">
  <OTSubscriber/>
</OTSession>

クライアントがセッションに接続した後、OTSubscriber オブジェクトは、セッション内で他のクライアントのストリームが利用可能になると、サブスクライバービデオのビューを追加する。

をディスパッチします。 connected サブスクライバーがストリーミングの開始に成功した際のイベント。このイベントは error 購読中にエラーが発生した場合でも、 eventHandlers OTSubscriberコンポーネントのプロパティを設定し connected そして error プロパティをコールバック関数に渡す：

<OTSubscriber
eventHandlers={{
  connected: () => {
    console.log('The subscriber started streaming.');
  },
  error: () => {
    console.log('The subscriber failed.');
  }
}}/>

ストリーム・プロパティの設定

を指定して properties OTSubscriber オブジェクトのプロパティを設定するためのプロパティ すべて 購読者数：

<OTSubscriber
  properties={{
    subscribeToAudio: true,
    subscribeToVideo: false,
    subscribeToCaptions: true,
    preferredResolution: 30,
    preferredFrameRate: '352x288',
    audioVolume: 50,
  }}/>

あるいは、 streamProperties OTSubscriber プロパティは、各ストリームの個別の設定を定義するオブジェクトを指します。このオブジェクトのプロパティはキーと値のペアで構成され、キーにはストリーム ID が、値には以下の内容を含むオブジェクトが設定されます。 subscribeToAudio, subscribeToVideo, subscribeToCaptions, preferredResolution, preferredFrameRateそして audioVolume ストリームのサブスクライバーに対するオーバーライド：

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

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

について properties このオブジェクトには、以下のプロパティが含まれています：

subscribeToAudio — (ブール値) 音声を購読するかどうか。
subscribeToVideo — (ブール値) 動画を購読するかどうか。
subscribeToCaptions — (ブール値) 字幕を購読するかどうか。詳しくはライブキャプション -- React Native
preferredResolution — (文字列) 優先される解像度。詳しくは好みのフレームレートと解像度を設定する.
preferredFrameRate — (数値) 推奨フレームレート。詳しくは好みのフレームレートと解像度を設定する.
audioVolume — (数値) 音量（0～100）。

購読者のカスタムレンダリング

デフォルトでは、OTSubscriber はサブスクライバーの動画に対して子ビューを追加します。ただし、レンダリング関数を追加することで、OTSubscriber オブジェクトにサブスクライバーを追加することも可能です。この関数には、ストリーム ID の配列が渡されます：

import { OTSubscriberView, OTSubscriber } from 'opentok-react-native'

// Render method:

<OTSubscriber>
  {streamIds => {
    if (streamIds.length === 0) {
      return null;
    }
    return streamIds.map(streamId => {
      return (
        <OTSubscriberView
          streamId={streamId}
          key={streamId}
          style={{
            width: 200,
            height: 150,
          }}
        />
      );
    });
  }}
</OTSubscriber>

個々のストリームをレンダリングするには、OTSubscriberView コンポーネントを使用します。OTSubscriberView コンポーネントは、props（例えば style) React NativeのViewコンポーネントから。さらに、これには streamId サブスクライバーのストリームのストリームIDを渡すために使用するプロップ。

注：について streamProperties これらの子 OTSubscriberView コンポーネントが追加された場合、OTSubscriber オブジェクトの prop は無視されます。

セッション内でストリームが作成されたタイミングの検出

OTSessionオブジェクトは streamCreated イベントは、セッションに新しいストリーム（自分のストリーム以外）が作成されたときに発生します。ストリームは、クライアントが出版ストリームをセッションに送る。セッションの streamCreated また、最初に接続した際、セッション内の既存のストリームごとにイベントがディスパッチされます。

<OTSession
eventHandlers={{
  streamCreated: () => {
    console.log('Stream created -- stream ID:', event.streamId);
  }
}}/>

について streamCreated event オブジェクトには、接続データや動画ソースの種類（「camera」または「screen」）など、ストリームに関する詳細情報が含まれています。この情報を使用して、

ストリームからの配信停止

パブリッシングクライアントがパブリッシングを停止すると、サブスクライバーは自動的に破棄されます。進行中のストリームの購読を停止するには、OTSubscriber コンポーネントから対応する OTSubscriberView コンポーネントをアンマウントしてください。詳しくは購読者のカスタムレンダリング.

ストリームがセッションから離れるタイミングの検出

自分以外のストリームがセッションを離れると、OTSession オブジェクトは streamDestroyed イベントを開催する：

<OTSession
eventHandlers={{
  streamDestroyed: (event) => {
    console.log('Stream destroyed -- stream ID:', event.streamId);
  }
}}/>

について streamDestroyed event オブジェクトには、ストリームを定義する以下のプロパティがあります：

connection � ストリームを配信している接続に対応するオブジェクト。これには、 data 以下を含むプロパティ接続データ（設定されている場合）そのクライアントに対して。
creationTime �ストリームの作成日時を表すタイムスタンプ（数値）。この値はミリ秒単位で算出されます。
hasAudio (ブール値) ストリームに音声があるかどうかを示します。このプロパティは、パブリッシャーが音声をオンまたはオフにした場合に変化することがあります。これが発生すると、OTSession オブジェクトは streamPropertyChanged イベントを開催する。
hasVideo (ブール値) ストリームに動画が含まれているかどうか。
name �(String) ストリームが公開された際に名前が設定されていた場合、そのストリームの名前。

videoDimensions�このオブジェクトには、width と height の 2 つのプロパティがあります。どちらも Numbers です。 width プロパティはエンコード済みストリームの幅を表し、height プロパティはエンコード済みストリームの高さを表します。（これらは、ストリームに対応する Publisher オブジェクトおよび Subscriber オブジェクトの実際の幅とは無関係です。）モバイルデバイスから公開されたストリームの場合、デバイスの向きが変わったことに伴い、ストリームのサイズが変更されると、このプロパティも変更されることがあります。

videoType �動画の種類：「カメラ」または「画面」のいずれかです。「画面」の動画では、パブリッシャーの画面共有が動画ソースとして使用されます。公開中のストリームがカメラから画面共有の動画ソースに変更された場合、このプロパティも変更されることがあります。詳細については、以下を参照してください。画面共有 — React Native.

について hasAudio, hasVideo, videoDimensionsそして videoType プロパティは変更される場合があります（たとえば、パブリッシャーがビデオの再生を開始または停止した場合など）。これが発生すると、OTSession オブジェクトは streamPropertyChanged イベントを開催する。

自動再接続

クライアントがサブスクライブしているストリームへの接続を切断した場合 (たとえば、いずれかのクライアントのネットワーク接続が切断された場合など)、ストリームへの再接続を自動的に試みます。ストリームが切断され、クライアントが再接続を試みると、OTSubscriber オブジェクトは disconnected イベントを生成する。ストリームが復元されると、OTSubscriberオブジェクトは connected イベントが発生する。クライアントがストリームを復元できない場合、OTSubscriberオブジェクトは destroyed イベントを開催する。

これらのイベントに応答して、アプリケーションは、一時的な切断、再接続、および破壊された状態を示すユーザーインターフェイス通知を（オプションで）表示できる：

<OTSubscriber
  eventHandlers={{
    disconnected: (event) => {
      console.log('stream disconnected -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
    connected: (event) => {
      console.log('stream connected -- stream ID:', event.streamId);
      // Adjust user interface.
    },
    destroyed: (event) => {
      console.log('stream destroyed -- stream ID:', event.streamId);
      // Adjust user interface.
    }
  }}/>

好みのフレームレートと解像度を設定する

を使用するストリームを購読する際は、スケーラブルビデオ機能, サブスクライブしているクライアントが OpenTok Media Router から受信するストリームについて、希望するフレームレートと解像度を設定できます。

<OTSubscriber
    properties={{
      preferredFrameRate: 7,
      preferredResolution: '352x288',
  }}/>

preferredFrameRate — 推奨フレームレート（1秒あたりのフレーム数）。有効な値は 30、15、7、1 です。この設定を未定義のままにすると、推奨フレームレートが設定されなくなり、クライアントは利用可能な最高フレームレートを使用します。
preferredResolution — 推奨解像度。有効な値は「1280x720」、「640x480」、および「352x288」です。この設定を未指定にすると、推奨解像度が解除され、クライアントは利用可能な最高フレームレートを使用します。

加入者のビデオが無効になっていることを検知する

サブスクライバーのビデオが無効化されると、OTSubscriberオブジェクトは videoDisabled イベントを開催する：

<OTSubscriber
  eventHandlers={{
    videoDisabled: (event) => {
      console.log('stream video disabled -- stream ID:', event.streamId);
      // Display a user interface notification.
    },
  }}/>

OpenTok Media Router が加入者の映像を無効にした場合、その加入者に関連するユーザーインターフェースを調整する必要がある場合があります。

videoDisabled イベントオブジェクトの reason プロパティは、動画が無効化された理由を定義します。このプロパティには、以下のいずれかの値を設定できます。

"PublisherPropertyChanged" - 出版社はビデオの公開を中止した。
"QualityChanged" — OpenTok Media Router は、ストリームの品質変化に基づき、加入者への動画送信を停止しました。OpenTok Media Router のこの機能により、接続状態が悪化した場合、加入者は動画ストリームの受信を停止します（音声ストリームがある場合は、加入者は引き続きそれを受信します）。

このイベントを送信する前に、サブスクライバーのストリーム品質が低下し、ビデオストリームが無効化される恐れがあるほど低くなった場合、OTSubscriber オブジェクトは videoDisableWarning イベントを開催する。

接続状態が改善して再び動画の再生が可能になった場合、OTSubscriber オブジェクトは videoEnabled イベントが発生し、加入者はビデオの受信を再開する。

この機能は、OpenTok Media Router を使用するセッション（メディアモード（ルーティング設定）に設定されている場合を除き、メディアモードが中継に設定されているセッションでは適用されません。

ストリームを公開する際、ストリームの画質が原因でビデオが無効化されるのを防ぐことができます。設定 audioFallbackEnabled への false での properties プロパティを OTPublisher コンポーネントに渡します。
"SubscriberPropertyChanged" - 加入者がビデオの購読を開始または停止した。 subscribeToVideo を false に設定する properties OTSubscriber コンポーネントに渡されたプロパティ。
"CodecNotSupported" - コーデックに互換性がないため、ビデオの購読が停止されました。ビデオコーデック（開発者ガイド）。

OTSubscriber オブジェクトはディスパッチを行います videoEnabled イベントを発生させる：

について reason videoEnabled イベントオブジェクトのプロパティは、動画が有効化された理由を定義します。このプロパティには、以下のいずれかの値を設定できます：

"PublisherPropertyChanged" - 出版社はビデオの公開を再開した。
"QualityChanged" — OpenTok Media Router は、ストリームの品質変化に応じて、加入者への動画送信を再開しました。OpenTok Media Router のこの機能により、接続状態が悪化した際には加入者は動画ストリームの受信を中断し、ストリームの品質が改善した場合には動画ストリームの受信を再開します。

この機能は、OpenTok Media Router を使用するセッション（メディアモード（ルーティング設定）に設定されている場合を除き、メディアモードが中継に設定されているセッションでは適用されません。
"SubscriberPropertyChanged" - 加入者がビデオの購読を開始または停止した。 subscribeToVideo を false に設定する properties OTSubscriber コンポーネントに渡されたプロパティ。
「CodecNotSupported」 — 互換性のないコーデックからの変更後に、加入者の動画が有効化されました（詳細はビデオコーデック（開発者ガイド）。

ストリームのビデオ寸法が変更されたときの検出

モバイル端末から配信されているストリームの画面向きが変わったことにより、端末のサイズが変更されると、ストリームの動画サイズも変更される場合があります。また、動画ソースが画面共有ウィンドウであり、ストリームを配信しているユーザーが、ストリームのソースとなっているウィンドウのサイズを変更した場合にも、同様の現象が発生することがあります。

ストリームの動画サイズが変更されると、Session オブジェクトは streamPropertyChanged イベントをディスパッチし、その際に changedProperty イベントのプロパティが "videoDemensions".

ストリーム統計の取得

サブスクライバーのオーディオとビデオの統計情報を取得するには、以下のイベントハンドラを追加します。 audioNetworkStats そして videoNetworkStats イベントは、OTSubscriber によってディスパッチされる。これらは、以下を含むサブスクライバのストリームに関する情報を提供する：

失われたオーディオおよびビデオパケットの総数
受信したオーディオおよびビデオパケットの総数
受信したオーディオとビデオの合計バイト数
現在の平均ビデオフレームレート

<OTSubscriber
  eventHandlers={{
    audioNetworkStats: event => {
      console.log('subscriber audioNetworkStats event', event);
    },
    videoNetworkStats: event => {
      console.log('subscriber videoNetworkStats event', event);
    },
  }}
/>

より詳細なストリーム統計情報を取得するには、OTSubscriber オブジェクトの Subscriber.getRtcStatsReport() メソッドを使用します。このメソッドは Promise を返し、成功した場合は、 RtcStatsReport オブジェクトを返します：

<OTSubscriber
  eventHandlers={{
    connected: event => {
      setTimeout(() => {
        this.subscriber.getRtcStatsReport();
      }, 4000);
    },
    rtcStatsReport: event => {
      console.log('subscriber rtcStatsReport event', event);
    },
  }}
/>