出版する基本

このガイドでは、ストリームを公開するための基本的な手順、つまりパブリッシャーの作成、セッションでのストリームの開始、ストリームの安全な停止、終了時のリソースの破棄について説明します。

Publisherオブジェクトは、Vonage Videoセッションで使用するために、システムのマイクとカメラからオーディオ/ビデオ・ストリームをキャプチャするために使用されます。

パブリッシャーを使って 画面共有 ビデオストリーム

パブリッシャーオブジェクトの初期化

について OT.initPublisher() メソッドは、Publisher オブジェクトを初期化して返します。Publisher オブジェクトは、公開する動画のビューを表します：

var publisher;
var targetElement = 'publisherContainer';

publisher = OT.initPublisher(targetElement, null, function(error) {
  if (error) {
    // The client cannot publish.
    // You may want to notify the user.
  } else {
    console.log('Publisher initialized.');
  }
});

について OT.initPublisher() メソッドは3つのパラメーターを取る：

  • targetElement- オプション）パブリッシャの動画が置き換わる DOM 要素を定義します。

  • properties- オプション）パブリッシャをカスタマイズするプロパティのセット。パブリッシャの properties パラメータには、パブリッシャーが使用する音声入力デバイスと映像入力 デバイスを指定するオプションも含まれる。また properties パラメータには、HTMLページのビューの外観をカスタマイズするためのオプションも含まれています ( UIのカスタマイズを参照）、オーディオとビデオを公開するかどうかを選択します。 オーディオまたはビデオのみの公開その他のパブリッシャーオプションについては properties OTのパラメータ。initPublisher() メソッドを使用する。

  • completionHandler- (オプション) パブリッシャーが正常にインスタンス化されたか、エラーになったかを指定する 完了ハンドラ。

このパブリッシャー・オブジェクトを Session.publish() メソッドを使用してストリームをセッションに発行します。

電話する前に Session.publish()このPublisherオブジェクトを使用して、Publisherに接続されたマイクとカメラをテストできます。

について insertMode プロパティの properties パラメーターの OT.initPublisher() メソッドは、パブリッシャ・オブジェクトがHTML DOMに挿入される方法を指定します。 targetElement パラメータを設定します。このパラメータには、以下のいずれかの値を設定できる：

  • "replace" - Publisherオブジェクトは、targetElementのコンテンツを置換します。これは既定です。
  • "after" - Publisherオブジェクトは、HTML DOMのtargetElementの後に挿入される新しい要素です。(PublisherとtargetElementはどちらも同じ親要素を持ちます)。
  • "before" - Publisherオブジェクトは、HTML DOMのtargetElementの前に挿入される新しい要素です。(PublisherとtargetElementはどちらも同じ親要素を持ちます)。
  • "append" - Publisherオブジェクトは、targetElementの子要素として追加される新しい要素です。他の子要素がある場合、Publisher は targetElement の最後の子要素として追加されます。

例えば、次のコードは、新しいPublisherオブジェクトを publisherContainer DOM要素：

// Try setting insertMode to other values: "replace", "after", or "before":
var publisherProperties = {insertMode: "append"};
var publisher = OT.initPublisher('publisherContainer', publisherProperties, function (error) {
  if (error) {
    console.log(error);
  } else {
    console.log("Publisher initialized.");
  }
});

ストリームの公開

パブリッシャー・オブジェクトと セッション次のステップは、それをセッション・オブジェクトに渡してストリーミングを開始することだ。

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

<OTSession
  applicationId="your-application-id"
  sessionId="the session ID"
  token="the token">
  <OTPublisher/>
</OTSession>

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

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

パブリッシャー劣化の優先設定

帯域幅やCPUが制限されている場合、ビデオエンジンはパブリッシャービデオのフレームレートや解像度を下げ、制限に合わせることができる。

デグラデーション・プリファレンスは、この動作を微調整するためのコンフィギュレーション設定です。

開発者は、ユースケースや要件に応じて、劣化プリファレンスを定義し、適用する責任がある。

これはプリファレンスとして機能し、ビデオエンジンは選択されたプリファレンスに従おうとするが、結果は保証されない。

を使用する場合、このプリファレンスは異なる動作をすることがあります。 スケーラブルビデオビデオエンジンは、解像度を落とす代わりにレイヤーを削除することができる。

コンテンツのヒント とデグラデーション・プリファレンスは、異なるが関連した目的を果たす：Content Hint は伝送されるコンテンツのタイプを記述し、Degradation preference はエンコーディング戦略を制御します。コンテンツヒントを設定すると、ビデオエンジンは自動的に適切なデグラデーションプリファレンスを決定します（たとえば、"text" は自動的に解像度を維持するように選択します）。劣化プリファレンスを明示的に設定すると、この自動選択が上書きされます。

Setting the degradation preference

パブリッシャー劣化の優先順位を設定するには publisher.setDegradationPreference で提供されている利用可能なオプションのいずれかを使用する。 DegradationPreference:

publisher.setDegradationPreference(DegradationPreference.DegradationPreferenceMaintainResolution);

以下の通りである。 DegradationPreference の値が利用できる：

  • DegradationPreferenceNotSet:デフォルト値。ビデオエンジンが最適な劣化の優先順位を決定する。

  • DegradationPreferenceMaintainFrameRateAndResolution:ビデオエンジンはフレームレートを一定に保ち、解像度を下げないようにします。

  • DegradationPreferenceMaintainFrameRate:ビデオエンジンはフレームレートを一定に保とうとしますが、必要に応じて解像度を下げることがあります。

  • DegradationPreferenceMaintainResolution:ビデオエンジンは解像度を下げませんが、必要に応じてフレームレートを下げることがあります。

  • DegradationPreferenceBalanced:ビデオエンジンは必要に応じて解像度とフレームレートのバランスを取ろうとします。

Getting the current degradation preference

現在設定されているパブリッシャー劣化プリファレンスを取得するには publisher.getDegradationPreference:

DegradationPreference preference = publisher.getDegradationPreference();

出版社のストリーミングを停止する

誰がパブリッシュできるかをコントロールし、必要なときにパブリッシャーがセッションにストリーミングするのを止めます。

パブリッシャーをアンマウント(親 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
          applicationId={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.');
    },
  }}
/>

パブリッシャーの削除（クリーンアップ）

パブリッシャを削除するには destroy() メソッド呼び出し destroy() は、Publisher オブジェクトを削除し、HTML DOM から削除します：

publisher.destroy();