Twilio 移行ガイド (Web)

このガイドでは、既存の Twilio Video の実装を Vonage Video SDK に移行する方法を説明します。Vonage Video API また、TwilioのコンセプトとVonageのコンセプトを対応させることで、最小限の摩擦でアプリを移動させることができます。

概要

Twilio と Vonage Video API のコンセプトは非常によく似ています。このスターターガイドは、ビデオアプリケーションの移行を支援することを目的としています。主な違いは、Twilioではルームを作成する必要があることです。 SID Vonageでは セッションID.その後、クライアント側でTwilioのルームやVonageのセッションに接続するための認証トークンを作成します。以下の図に主な違いを詳しく示します:

Vonage Twilio migraiton illustration 1 Vonage Twilio migraiton illustration 1

ビデオSDKの認証情報を取得する

を作成する。 ビデオ開発者アカウント をクリックし、Vonage API Customer DashboardのSDKにアクセスしてください。サインアップしたら、ビデオ機能を有効にしたVonageアプリケーションを作成する必要があります。Customer Dashboardにログインしたら、以下の手順に従ってください:

  1. ビルドと管理'に移動し、次に'Applications'.
  2. をクリックしてください。+ 新規アプリケーションの作成.'
  3. アプリケーションの名前を入力します。
  4. 必要に応じて、API Keyをこのアプリケーションが登録されるAccountに変更します。ほとんどのお客様は、事前に選択された設定のままで結構です。
  5. 認証」の下にある「公開鍵と秘密鍵を生成」をクリックします。秘密鍵のダウンロードが開始され、APIにアクセスする際にアカウントの認証に使用されます。例えば サーバーSDK ビデオセッションを管理します。
  6. 下にスクロールし、「Video」をオンに切り替えます。この時点ではURLや設定を入力する必要はありませんが、イベントに対して異なるコールバックを有効にしたい場合は、ここでアプリケーションのURLを入力することができます。
  7. 下にスクロールし、「Generate new application」をクリックする。
  8. Applicationsページの上部に、先ほど作成したApplication IDが表示されます。コピーアイコンをクリックして保存してください。

インストール

Vonage Video Client SDK for JSをインストールします:

npm install @vonage/client-sdk-video

または、CDNスクリプトタグを使用する:

認証

Vonage Video SDK は、ユーザを認証するためにトークンを使用します。トークンを生成する際に、ユーザの役割(サブスクライバ、パブリッシャ、モデレータ)を設定できます。オプションで トークンにメタデータの文字列を割り当てる。 (接続されたクライアントを識別するため)。私たちの トークン作成の概要 トークンを生成するときに使用できるすべてのオプションについて説明します。トークンはサーバーサイドで生成し、オンデマンドでクライアントサイドに送信する必要があります。

ビデオセッションの作成

A 「セッション のようなものだ。 部屋.同じセッションIDを使用するすべてのクライアントは、相互に通信することができます。

トークンと同様に、セッションはサーバー側で作成されます。私たちの セッション作成の概要 詳しくは、様々なコンフィギュレーション・オプションをご覧ください。

セッションの作成とトークンの生成には、以下のいずれかを使用することをお勧めします。 サーバーSDK.

NodeJSのこのコード・スニペットは、バックエンドでトークンとセッションIDを生成する簡単なAPIを作成する方法を示しています。

const { Auth } = require('@vonage/auth');
const { Video } = require('@vonage/server-sdk');

const credentials = new Auth({
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: process.env.PRIVATE_KEY_PATH,
});

/**
 * Mapping of room names to session IDs
 * ie:
 *   sessions = {
 *     'room1': '12312312-3811-4726-b508-e41a0f96c68f',
 *     'my-room': '7c0680fc-6274-4de5-a66f-d0648e8d3ac2'
 *   }
 */
let sessions = {};

app.get('/sessionInfo', async (request, response) => {
  try {
    const { identity, roomName } = request.query;

    // Token options, this is optional
    let tokenOptions = {
      role: 'publisher', // subscriber, publisher or moderator
      data: `username=${identity}`, // metadata describing the connection
      expireTime: new Date().getTime() / 1000 + 5 * 60 , // Token expired after five minutes
    };

    // Check if we already have a session ID for this room
    if (sessions[roomName]) {
      const token = videoClient.generateClientToken(sessions[roomName], tokenOptions);

      return response.json({
        applicationId: process.env.VONAGE_APPLICATION_ID,
        sessionId: sessions[roomName],
        token
      });
    } else {
      // Create a new session since we do not have one cached by that name
      const session = await videoClient.createSession({ mediaMode: 'routed' });
      sessions[roomName] = session.sessionId;

      // Generate a token.
      const token = videoClient.generateClientToken(session.sessionId, tokenOptions);

      response.json({
        applicationId: process.env.VONAGE_APPLICATION_ID,
        sessionId: session.sessionId,
        token
      });
    }
  } catch (e) {
    console.log('Error creating session or token' + e);
  }

});

について アプリケーションID, セッションIDそして トークン サーバサイドからの認証は、クライアントセッションを認証するためにクライアントサイドで使用される。

ビデオセッションに接続する

クライアント・エンドポイントをVonage Videoセッションに接続するには、アプリケーションID、セッションID、トークンが必要です。

トワイリオ

import * as TwilioVideo from 'twilio-video';

var twilioVideo = TwilioVideo;
var twilioRoom;

twilioVideo
  .connect(TOKEN, {
    name: 'yourName',
    audio: false,
    video: false,
    dominantSpeaker: true,
  })
  .then(room => {
    twilioRoom = room;
  });

ボネージ

const session = OT.initSession(applicationId, sessionId);

session.connect(token, error => {
  if (error) {
    handleError(error);
  }
});

ビデオ出版

Vonage Video SDKは、ネットワーク状況やデバイスの能力に基づいて、ビデオ品質を自動的に処理します。とはいえ、解像度、フレームレート、音声フォールバックなど、特定のプロパティを設定することは可能です。詳細については、以下のリストを参照してください。 すべてのパブリッシャーで設定可能なオプション.

注意: 一つのパブリッシャーオブジェクトはオーディオとビデオの両方を扱うことができます。あなたは オーディオまたはビデオの選択制御 このオブジェクトが提供するメソッドを使用する。

カメラの電源を入れる

セッションが接続されると、ローカルプレビューを表示するビデオトラックを作成することができます - Vonageではこれをパブリッシャープレビューと呼んでいます。

トワイリオ

ボネージ

この時点で、ローカルのプレビューが表示されるはずですが、まだセッションには公開されていません。動画をセッションに公開するには、次のコードを追加します:

session.publish(publisher, handleError);

カメラの電源を切る

Vonage SDKはカメラをコントロールする簡単な方法を提供します。

トワイリオ

twilioRoom.localParticipant.videoTracks.forEach(publication => {
  publication.unpublish();
  publication.track.stop();
  var selfTwilioVideo = document.getElementById('twilio-self-view-div');
  selfTwilioVideo?.querySelector('video')?.remove();
});

ボネージ

これは、セッションへの動画の公開を停止するだけです。ローカルのプレビューはまだ見ることができます。

publisher.publishVideo(false);

// This will only stop publishing all media (audio and video) to the session. You can still see your local preview
session.unpublish(publisher);

// To completely destroy the publisher and remove the local preview
publisher.destroy();

リモートユーザーのビデオをレンダリングする

Twilio participantConnected そして trackSubscribed イベントリスナーによって、Vonage は、リモート参加者がセッションに接続し、ビデオの送信を開始すると、connectionCreated および streamCreated イベントもトリガーします。

トワイリオ

ボネージ

オーディオ

Twilio Videoはトラックベースなので、各オーディオトラックをループしてオーディオを開始し、オーディオ要素をDOMに追加する必要があります。Vonageは、単一のPublisherオブジェクトを使用して、オーディオとビデオの両方を管理できます。デフォルトのオプションでパブリッシュを開始すると、オーディオとビデオの両方がパブリッシュされます。ただし、音声のみのセッションをご希望の場合は、Videoを公開しないようにパブリッシャーを設定することができます。詳しくは 出版社オプション一覧.

ミュートマイク

Twilioを使用する場合、マイクをミュートするために各オーディオトラックをループする必要があります。Vonageでは、呼び出し可能なメソッドを1つ提供することで、これを簡略化しています。

トワイリオ

twilioRoom.localParticipant.audioTracks.forEach(publication => {
  publication.track.disable();
});

ボネージ

publisher.publishAudio(false);

マイクのミュートを解除する

Twilio Videoを使用する場合、マイクのミュートを解除するために各オーディオトラックをループする必要があります。Vonageは、単一の呼び出し可能なメソッドを提供することで、これを簡素化しています。

トワイリオ

twilioRoom.localParticipant.audioTracks.forEach(publication => {
  publication.track.enable();
});

ボネージ

publisher.publishAudio(true);

テキストチャット

セッション内の個々の参加者間だけでなく、セッション内のすべての参加者間でデータ(テキストチャットメッセージやカスタムJSONメッセージなど)を交換することができます。これは、以下に示すように、私たちのクライアントSDKを使用して実現されます:

//send data to specific end-point
session.signal({ to: connection1, data: 'hello' }, errorHandler);

//send data to all connected end-points
session.signal({ data: 'hello' }, errorHandler);

このエンドポイントでシグナルを受け取るイベントリスナーを確立する。

session.on('signal', function (event) {
  console.log('Signal sent from connection ' + event.from.id);
  // Process the event.data property, if there is any data.
});

イベント・リスナー

VonageとTwilioには、接続されているすべての参加者の状態を維持するのに役立つイベントリスナーがあります。

参加者の接続変更

これらのイベントは、エンドポイントがセッションに参加すると発生します:

トワイリオ

twilioRoom.on('participantConnected', participant => {
  // user joined
});

twilioVideo.on('participantDisconnected', participant => {
  // user left
});

ボネージ

session.on('connectionCreated', payload => {
  // end-point joined
});

session.on('connectionDestroyed', payload => {
  // end-point left
});

さらに、Vonageは参加者に一時的なネットワーク切断を通知するイベントを送信し、以下の機能をサポートします。 自動再接続 クライアントとの接続が切れた場合

セッションの離脱と終了

Twilioを置き換える disconnect 関数は、Vonage disconnect 関数である。

トワイリオ

twilio.disconnect();

ボネージ

session.disconnect();

詳細はこちら: