ストリームの公開 — Web

一旦 セッションに接続この場合、セッションに接続している他のクライアントが閲覧できるストリームを公開することができる。

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

ストリームの公開

ストリームを発行するには、OTSessionオブジェクトの子としてOTPublisherコンポーネントを追加します：

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

クライアントがセッションに接続すると、パブリッシャーはストリーミングを開始します。OTPublisherオブジェクトは streamCreated イベントをディスパッチする。これは error 公開時にエラーが発生した場合でも、 eventHandlers プロパティを設定します。 streamCreated そして error プロパティをコールバック関数に渡す：

<OTPublisher
eventHandlers={{
  streamCreated: () => {
    console.log('The publisher started streaming.');
  },
  error: event => {
    console.log('Publisher error:', event);
  },
}}/>

クライアントに公開機能があるかどうかを確認する

セッションに接続したら、クライアントがパブリッシュできるかどうかを確認できます。OTSession オブジェクトへの参照を設定し、その getCapabilites() メソッドの sessionConnected イベントハンドラ。 このメソッドは、以下の要素を含むオブジェクトを格納したプロミス返します。 canPublish プロパティを指定します。そして、その値に基づいて条件付きでパブリッシュすることができます：

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your API key';
    this.sessionId = 'a session ID';
    this.token = 'a valid token';
    this.state = {canPublish: false};

    this.sessionEventHandlers = {
      sessionConnected: event => {
        this.connectionCount++;
        this.session.getCapabilities().then(capabilities => {
          this.setState({canPublish: capabilities.canPublish});
        });
      },
    };
  }

  render() {
    return (
      <View
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          ref={instance => {
            this.session = instance;
          }}
          eventHandlers={this.sessionEventHandlers}>
          {this.state.canPublish ? (
            <OTPublisher/>
          ) : null}
          <OTSubscriber/>
        </OTSession>
      </View>
    );
  }
}

export default App;

パブリッシュするには、クライアントはトークンでセッションに接続しなければならない。 役割 出版をサポートする。

パブリッシャーが使用するカメラの設定

を設定することで、パブリッシャーにデバイスの背面カメラを使用させることができます。 properties OTPublisherコンポーネントのプロパティを設定し cameraPosition プロパティを "back":

<OTPublisher
  properties={{
    cameraPosition: 'back',
  }}
/>

なお、カメラではなくクライアントの画面をソースとする画面共有ストリームを配信することも可能です。詳細については、以下を参照してください。 画面共有.

パブリッシャーによるセッションへのストリーミングを停止する

パブリッシャーのセッションへのストリーミングを停止するには、そのパブリッシャーをアンマウント（親の OTSession コンポーネントから削除）します。たとえば、次のコードは 30 秒後にストリームの公開を解除します：

import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher} from 'opentok-react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = 'your-api-key';
    this.sessionId = 'valid-session-id';
    this.token = 'valid-token';
    this.publisherOptions = {
      publishCaptions: true,
      publishVideo: true,
      publishAudio: false,
    };
    this.state = {
      publishing: true,
    };
    this.publisherEventHandlers = {
      streamCreated: event => {
        setTimeout(
          function () {
            console.log(10);
            this.setState({publishing: false});
          }.bind(this),
          10000,
        );
      },
    };
  }

  render() {
    return (
      <View>
        <OTSession
          apiKey={this.apiKey}
          sessionId={this.sessionId}
          token={this.token}
          {this.state.publishing ? (
            <OTPublisher
              eventHandlers={this.publisherEventHandlers}
              ref={instance => {
                this.publisher = instance;
              }}
            />
          ) : null}
        </OTSession>
      </View>
    );
  }
}

export default App;

なお、（公開を継続したまま）動画または音声の配信を個別に停止することができます。詳細については、以下を参照してください。 オーディオとビデオの調整.

公開されたストリームがセッションから離れるときの検出

をディスパッチします。 streamDestroyed セッションへのストリーミングが停止した際のイベント：

<OTPublisher
  eventHandlers={{
    streamDestroyed: function() {
      console.log('The publisher stopped streaming.');
    },
  }}
/>

ストリームのビデオ解像度を設定する

公開ストリームの推奨ビデオ解像度を設定するには、次のように設定します。 resolution プロパティの properties に渡す。 OTPublisher コンポーネントを使用している：

<OTPublisher
  properties={{
    resolution: '320x240',
    // other properties
  }}
/>

について resolution プロパティは文字列で、ビデオの解像度を指定します。文字列の形式は _width_x_height、ここで幅と高さはピクセル単位で表されます。有効な値は「1920x1080」、「1280x720」、「640x480」、および「320x240」です。 公開された動画が指定された解像度で再生されるのは、クライアントの設定がそれをサポートしている場合に限られます。一部のデバイスやクライアントでは、これらの解像度設定のすべてに対応していない場合があります。

注： 参照 1080pデベロッパーガイド 1080p解像度を使用する際の注意事項については、こちらをご覧ください。

ストリームのフレームレートを設定する

公開ストリームの推奨ビデオ解像度を設定するには、次のように設定します。 frameRate プロパティの properties に渡す。 OTPublisher コンポーネントを使用している：

<OTPublisher
  properties={{
    frameRate: 7,
    // other properties
  }}
/>

この値を、動画の希望するフレームレート（1秒あたりのフレーム数）に設定してください。有効な値は、30、15、7、1です。

OpenTok Media Router を使用するセッション（ メディアモード （ルーティング設定に設定されている場合）、 フレームレートを下げると、ストリームが使用できる最大帯域幅もそれに比例して減少します。ただし、セッション において メディアモード を relayed に設定すると、フレームレートを下げてもストリームの帯域幅は減らない。

ストリームの最大ビットレートの設定

公開ストリームの最大ビットレートを設定できます。最大ビットレートを設定すると 最大ビットレートを設定すると、ユーザーが従量制接続から接続する場合に、帯域幅の消費を抑えることができます。 帯域幅の消費を抑えることができます。以下を参照してください。 本書.

パブリッシャーのストリームに関する統計情報の取得

OTPublisher audioNetworkStats そして audioNetworkStats イベントは、パブリッシャーの現在のオーディオまたはビデオの統計情報を定義するオブジェクトの配列を提供します。ルーティングされたセッション（ OpenTok メディアルーター)、これらのイベント配列にはそれぞれ1つのオブジェクトが含まれており、OpenTok Media Routerに送信されるオーディオまたはビデオの統計情報を定義しています。中継セッションでは、この配列には公開ストリームの各加入者に対応するオブジェクトが含まれます。配列内の各オブジェクトには、以下のプロパティがあります：

  • videoBytesSent — 送信された音声および動画のバイト数合計
  • videoPacketsSent — 送信された音声および動画パケットの総数
  • videoPacketsSent — 失われた音声および動画パケットの総数

さらに、中継セッションにおけるパブリッシャーについては、配列内の各オブジェクトには以下の2つのプロパティが含まれます：

  • connectionId — 接続を確立したクライアントの接続固有のID。これは、 connectionId プロパティの connectionCreated そのクライアントの接続に対するイベント。

  • subscriberId — 加入者の固有ID。

以下のコードは、パブリッシャーのストリームに関するこれらの統計情報を1秒ごとに記録します：

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

より詳細なストリーム統計を取得するには OTPublisher.getRtcStatsReport() メソッド。このメソッドを呼び出すと、OTPublisherインスタンスが rtcStatsReport イベントを開催する：

<OTPublisher
  eventHandlers={{
    streamCreated: event => {
      console.log('publisher streamCreated', event);
      setTimeout(() => this.publisher.getRtcStatsReport(), 12000)
    },
    rtcStatsReport: event => {
      console.log('publisher rtcStatsReport event', event);
    },
  }}
/>

ルーティングされたセッションにおけるパブリッシャーの場合、イベント配列には、OpenTok Media Router に送信されたストリームの統計情報を定義する 1 つのオブジェクトが含まれます。リレーされたセッションの場合、この配列には、パブリッシュされたストリームの各サブスクライバーに関する RTC 統計レポートを定義するオブジェクトが含まれます。配列内の各オブジェクトには、 jsonArrayOfReports データを含むプロパティ。このJSON配列の構造は、Webブラウザで実装されているRtcStatsReportオブジェクトの形式と類似しています（参照： Mozillaのドキュメント). こちらも参照 このW3Cドキュメント.

公開済みの動画にフィルターやエフェクトを適用する

公開済みの動画に動画フィルターを適用できます。詳しくは、以下を参照してください。 本題.

特定の状況下でビデオのパフォーマンスを向上させるビデオコンテンツのヒント設定

動画コンテンツのヒントを設定して、公開動画の品質とパフォーマンスを向上させることができます。これは特定の状況で役立ちます：

  • 主にテキストまたはビデオコンテンツを含むスクリーン共有ビデオを公開する場合。

  • カメラの映像ソースを使用する場合、フレームレートを下げつつ解像度を維持したいときは、コンテンツヒントを「text」または「detail」に設定できます。 ルーティングされたセッションでは、パブリッシャーはフル解像度で低フレームレートのストリームと、ネットワーク状況が許せばフル解像度で通常のフレームレートのストリームを送信します。OpenTok Media Routerは、これらの ストリームのいずれかをサブスクライバーに転送します。

これにより、クライアントは、指定したコンテンツの種類により適したエンコード方法や処理方法を使用するよう指示されます。

を設定する。 videoContentHint OTPublisherのプロパティ properties prop:

<OTPublisher
  properties={{
    videoContentHint: 'text',
  }}
/>

動画コンテンツのヒントを、以下のいずれかの値に設定してください：

  • "" — ヒントは指定されません（デフォルト）。公開クライアントは、動画コンテンツをどのように扱うべきかについて、最善の推測を行います。

  • 「モーション」 — 動画に含まれる動きが重要なトラックについては、この設定を適用してください。たとえば、動画を含む画面共有の動画ストリームなどで、この設定を使用することができます。

  • 「詳細」 — このトラックでは、動画の詳細が特に重要であるかのように扱う必要があります。たとえば、テキストコンテンツや絵画、線画などが含まれる画面共有の動画ストリームで、この設定を使用することができます。

  • 「テキスト」 — このトラックは、テキスト情報が特に重要であるかのように扱う必要があります。たとえば、テキストコンテンツを含む画面共有の動画ストリームなどで、この設定を使用することができます。

「text」および「detailed」のコンテンツヒントが指定された場合、クライアントは、たとえ動画のフレームレートを下げなければならない場合でも、高解像度を維持しようとします。一方、「motion」のコンテンツヒントが指定された場合、クライアントはフレームレートの低下を防ぐために解像度を下げます。

これらのオプションの詳細については、 W3C ワーキングドラフト.

フレームレートが低くなっても構わないというのであれば、以下の選択肢も検討してみてはいかがでしょうか。 購読中のストリームのフレームレートを制限する.

その他のオーディオ・ビデオ・オプション

詳細については、開発者ガイドをご覧ください。 オーディオとビデオの調整.