セッションへの参加

このガイドでは、アプリケーションをビデオセッションに接続する方法を学びます。

前提条件

有効なVonage Video APIアカウントが必要です。お持ちでない場合は、以下をご利用ください。 無料体験を申し込む.

また、次のことも確認しておく必要がある。 セッションの作成 そして トークンが生成された 関係するすべてのユーザーのために。

セッションオブジェクトの初期化

セッションに接続する前に、セッション・オブジェクトをインスタンス化する必要があります。 クライアントSDKが利用可能.

セッション・オブジェクトをインスタンス化するには OT.initSession() メソッドに、アプリケーションIDと適切なセッションIDを入力してください：

// Replace with your application ID and session ID:
var session = OT.initSession(applicationId, sessionId);

について OT.initSession() メソッドはSessionオブジェクトを返す。

を呼び出すことに注意してください。 OT.initSession() メソッドは 作成する 既存のセッションを表すJavaScript Sessionオブジェクトを作成します。サーバーサイドSDKを使用してセッションを作成できます。参照 セッションの作成.

ユーザーのブラウザーがWebRTCをサポートしていない場合、次のような呼び出しが行われる。 OT.initSession() の結果、ページがユーザーにメッセージを表示します。WebRTC のサポートをチェックし、このメッセージが表示されないようにするには OT.checkSystemRequirements() メソッドを呼び出す前に OT.initSession():

if (OT.checkSystemRequirements() == 1) {
  var session = OT.initSession(applicationId, sessionId);
} else {
  // The client does not support WebRTC.
  // You can display your own message.
}

セッションへの接続

セッションIDを取得し、それを使ってセッションオブジェクトを初期化したら、次のステップはセッションに接続することです。

ご希望のプラットフォーム／言語を選択し、以下のセッションに接続する方法をご覧ください：

OTSession コンポーネントを追加すると、自動的に Vonage Video API セッションに接続します。

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

交換 your-application-ID, your-session-idそして your-session-token あなたの APIキー, a セッションIDそして トークン セッションのために。

を追加することに注意してください。 OTPublisher そして OTSubscriber のコンポーネントと子供たちである。 OTSession コンポーネントを使用している。

を渡すことができます。 error そして sessionConnected イベントハンドラ OTSession コンポーネントを呼び出します。エラーイベントハンドラは、クライアントがセッションへの接続に失敗した場合に呼び出される。また sessionConnected イベントハンドラは、クライアントがセッションに接続したときに呼び出される：

<OTSession
  applicationId="your-application-ID"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    error: event => {
        console.log('error', event);
      },
    sessionConnected: event => {
      console.log('session connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

セッションからの切断

ユーザーをセッションから切断する方法について説明します。

をアンマウントすると、クライアントはセッションから切断される。 OTSession コンポーネントを使用している。

クライアントの接続と切断の検出

クライアントがセッションに接続したときと切断したときの検出方法について説明します。

について OTSession オブジェクトは connectionCreated イベントをディスパッチします。OTSessionオブジェクトは connectionDestroyed イベントが発生する。これらのイベントは ConnectionEvent クラスは connection これは、イベントに関連する接続（作成または破棄）の Connection オブジェクトです：

let this.connectionCount = 0;
const this.sessionEventHandlers = {
  connectionCreated: function (event) {
    connectionCount++;
    if (event.connection.connectionId != session.connection.connectionId) {
      console.log('Another client connected. ' + connectionCount + ' total.');
    }
  },
  connectionDestroyed: function connectionDestroyedHandler(event) {
    connectionCount--;
    console.log('A client disconnected. ' + connectionCount + ' total.');
  }
  sessionConnected: function (event) {
    // include your own client's connection in the count
    connectionCount++;
  },
};

// reference later in JSX:

<OTSession
  applicationId={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={this.sessionEventHandlers}
>
    {/* ... */}

切断の検出

を設定する。 EventListner ユーザがセッションから切断された場合に関数を実行する。

例えば、ユーザーが接続を切断し、セッションに接続されなくなるたびに、この関数はユーザーに通知することができます。

クライアントがセッションから切断すると OTSession コンポーネントは sessionDisconnected イベントを開催する：

<OTSession
  applicationId="your-api-key"
  sessionId="your-session-id"
  token="your-session-token"
  eventHandlers={{
    sessionDisconnected: event => {
        console.log('disconnected', event);
      },
    connected: event => {
      console.log('subscriber connected', event);
    },
  }}
>
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

自動再接続

クライアントは、予期せず切断されたセッションに自動的に再接続を試みます（ネットワーク接続の低下などによる）。

クライアントが切断され、再接続されるときにディスパッチされるイベントに応答したい場合を除き、クライアントが自動的に再接続されるようにコードを追加する必要はない。

クライアントは、予期せず切断されたセッションに自動的に再接続しようとします（ネットワーク接続の切断など）。クライアントが切断され再接続されたときにディスパッチされるイベントに応答したい場合を除き、クライアントが自動的に再接続するようにコードを追加する必要はありません。

接続が切断され、クライアントが再接続しようとすると OTSession オブジェクトは sessionReconnecting イベントが発生する。接続が回復すると Session オブジェクトは sessionReconnected.クライアントが接続を復元できない場合、クライアントはセッションから切断し、Sessionオブジェクトは sessionDisconnected.

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

<OTSession
  applicationId={this.apiKey}
  sessionId={this.sessionId}
  token={this.token}
  eventHandlers={{
    sessionReconnecting: event => {
      // Display a user interface notification.
    },
    sessionReconnected: event => {
      // Adjust user interface.
    },
    sessionDisconnected: event => {
      // Adjust user interface.
    },
  }
>
    {/* ... */}

クライアントがセッションから一時的に切断すると、発行したストリームをサブスクライブしているクライアントのSubscriberオブジェクトは、発行したストリームがドロップしたときと、自動的に再開したとき（または再開した場合）にイベントをディスパッチします。詳細については 自動再接続.

セッション接続の問題のトラブルシューティング（JavaScript）

について Session.connect() メソッドにはコールバック関数があります。 error パラメータを使用する。このパラメータが存在し、定義されている場合 null またはundefined）の場合、接続時にエラーが発生します。このエラーをコードから探すことで、エンドユーザーがなぜ接続できなかったのかを特定することができます：

session.connect(token, function(err) {
  if (err) {
    // handle error
  } else {
    // connection succeeded
  }
});

接続を試みたときに戻ってくるエラーの多くは、無効または期限切れのトークンによるものです。

セッションへの接続が失敗するもう一つの一般的な理由は、エンドユーザーのインターネット接続によるものです。これには次のような例がある：

  • エンドユーザーがインターネットに接続できなくなった
  • エンドユーザーは、制限されたネットワーク上にいるため、一般的なポートがブロックされている。

この場合、コード1006のエラーが発生します。以下のコードを使用して対処することをお勧めします。セッションへの接続に失敗する他の理由としては、Vonageビデオサーバーがダウンしている、または何らかの予期せぬエラー（サーバーの500レベルエラーなど）が発生した場合などがあります。このようなことは頻繁に起こることではありませんが、このようなエラーに対処することは良い習慣です。

この指示に従えば、エラー処理コードは次のようになるはずだ：

session.connect(token, function(err) {
  if (err) {
    if (err.name === "OT_NOT_CONNECTED") {
      showMessage('Failed to connect. Please check your connection and try connecting again.');
    } else {
      showMessage('An unknown error occurred connecting. Please try again later.');
    }
  }
});

セッションへの接続に成功した後、接続が切れることがあります。この場合は sessionDisconnected イベントに "networkDisconnected "という理由が追加された：

session.on({
  sessionDisconnected: function(event) {
    if (event.reason === 'networkDisconnected') {
      showMessage('You lost your internet connection.'
        + 'Please check your connection and try connecting again.');
    }
  }
});

セッション接続の問題のトラブルシューティング（React Native）

接続しようとしたときに戻ってくるエラーの多くは、無効または期限切れのトークンが原因です。以下のトークンのベストプラクティスに従っていることを確認してください。 これ.

セッションへの接続が失敗するもう一つの一般的な理由は、エンドユーザーのインターネット接続によるものです。これには次のような例がある：

  • エンドユーザーがインターネットに接続できなくなった
  • エンドユーザーは、制限されたネットワーク上にいるため、一般的なポートがブロックされている。