ビデオエクスプレス開発者ガイド

このデベロッパーガイドでは、Video Expressの使用方法について詳しく説明しています。

ビデオエクスプレスについて

Vonage Video Expressは、マルチパーティビデオ会議Webアプリケーションを素早く作成するためのJavaScriptライブラリです。会議Webアプリケーションを迅速に作成するためのJavaScriptライブラリです。これは、Webアプリケーション用のVonage Video APIであるOpenTok.jsの上で動作します。アプリケーションの上で動作します。

ビデオエクスプレスの設定部屋Video APIセッションをベースにして、複数のウェブベースのクライアントが会合できるようにする。複数のウェブベースのクライアントがミーティングできるようにする。

ビデオ・エクスプレスには以下が含まれる：

A レイアウトマネージャーHTMLページ内の動画要素の配置を処理する。
ストリームの解像度とフレームレートを継続的に最適化するクオリティ・マネージャー、クライアントの帯域幅使用を削減します。
スピーカーの優先順位を動的に設定し、自動ミュートを行うエクスペリエンスマネージャー。参加者を自動ミュートします。アクティブ・スピーカー検出).
ルーム・マネージャーは、WebRTCとの低レベルのインタラクションを処理し、より高いレベルのプリミティブを提供します。プリミティブを提供します。

Video Expressライブラリの読み込み

Video Expressは、以下のNodeモジュールとして入手可能です。 npmjs.com:

npm i --save @vonage/video-express

を使用して Video Express ライブラリをロードすることもできます。 script タグを付ける：

<script src="https://static.opentok.com/v1/js/video-express.js"></script>

現在、Vonage Video ExpressにはデフォルトのUIが含まれていません。そのため、アプリ内のルームコンポーネントをスタイル設定するためにを追加する必要があります：

手っ取り早く始めるには video-express-styles.css ファイルを作成し、それを head セクションページでVideo Expressを使用しています：

ルームに参加してカメラストリームを公開する

に電話する。 Room ビデオエクスプレスルームに参加するためのコンストラクタ

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
});

について apiKey, sessionIdそして token は、ビデオアプリケーションのアプリケーションIDです、トークンです。トークンには "publisher "ロールが含まれている必要があります。アプリケーションIDは、Vonage Customer Dashboardの以下の項目で取得できます。 "ビルドと管理"、"アプリケーション "の順にクリックする.セッションIDとトークンを作成します。サーバーSDK.

以下は、Room インスタンス (すべてのパラメータを含む) をインスタンス化します。

const room = new VideoExpress.Room({
  apiKey:'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
    cameraPublisherContainer: "cameraPublisherContainerDiv",
    screenPublisherContainer: "screenPublisherContainerDiv",
  }
});

以下は Room インスタンスをインスタンス化しますが、カメラと画面共有パブリッシャーは除外します。コンテナのインスタンスを作成します：

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
  }
});

クライアントが入室すると、Roomオブジェクトは connected イベントを開催する：

room.on('connected', () => {
  console.log('Connected');
  // Can use this event to update visual indicator for connection status
});

参照イベント Video Expressイベントモデルの詳細については、こちらをご覧ください。

ルームに参加すると、Video Express はクライアントのカメラパブリッシャーを作成します。これにより、クライアントの映像がルーム内の他の参加者に送信されます。ユーザーカメラとマイクへのアクセスを許可するよう求められます。ユーザーがカメラとマイクへのアクセスを拒否した場合、クライアントは会議室から切断されます。カメラストリームを公開せずに会議室に参加することは許可されていないためです。

重要だ： Vonage Video Express 1.0は現在25人の同時参加者をサポートしています。をサポートしています。セッションに25人以上の参加者を追加する場合は、参加者のネットワークとハードウェアのパフォーマンスが十分であることを確認する必要があります。ネットワークとハードウェアのパフォーマンスが十分であることを確認する必要があります。

退室

退室するには、ブラウザのウィンドウを閉じるか leave() メソッドのメソッドを呼び出します：

room.leave();

ローカルクライアントの退室検知

Room オブジェクトは disconnected イベントイベントが発生します：

room.on('disconnected', (reason) => {
  console.log('disconnected reason: ', reason);
  // Can use this event to update visual indicator for connection status
});

イベントは reason クライアントが切断した理由を示す文字列。

Room オブジェクトは reconnecting そして reconnected イベントイベントが発生する：

// You can use these event to update a UI indicator for connection status
room.on('reconnecting', () => {
  console.log('Temporarily disconnected.');
});

room.on('reconnected', () => {
  console.log('Reconnected.');
});

他のクライアントの入退室検知

Room オブジェクトは participantJoined イベントが入室したときに発生します：

room.on('participantJoined', (participant) => {
  console.log('participant joined: ', participant.name);
});

このイベントは、参加した参加者を識別するParticipantオブジェクトを発行します。参照参考文献.

Room オブジェクトは participantLeft イベントが発生します。イベントが発生します：

room.on('participantLeft', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

このイベントは、退席した参加者を識別するParticipantオブジェクトとそして reason クライアントが離脱した理由を示す文字列。参照参考文献.

他のクライアントがカメラストリームを公開するタイミングの検出

他のユーザーがカメラストリームを公開すると、Video Express レイアウトマネージャは自動的にビデオを HTML ページに追加します。は自動的に動画を HTML ページに追加します。

参加者オブジェクトは cameraCreated イベント。参加者（ローカルユーザではない）がカメラストリームを公開するときに発生します：

participant.on('cameraCreated', (cameraSubscriber) => {
  console.log('new camera stream for ', participant.name);
});

イベントはカメラ購読者オブジェクトを使用します。CameraSubscriberオブジェクトには、ローカル・クライアントで音声とビデオの再生を有効または無効にするメソッドが含まれています。メソッドがあります ( カメラ加入者のオーディオとビデオの有効化と無効化).

参加者オブジェクトは cameraDestroyed イベント。参加者（ローカルユーザではない）がカメラストリームの公開を停止したときのイベント：

participant.on('cameraDestroyed', () => {
  console.log('camera destroyed for ', participant.name);
});

UIとレイアウト

Video Express には、HTML DOM 内の動画要素を自動的に配置し、モバイル画面でのレイアウトを調整するレイアウト・マネージャが含まれています。に自動的に配置し、モバイル画面でのレイアウトを調整します。レイアウトマネージャは、自動的にルーム内のアクティブなスピーカーを自動的にハイライトします。レイアウトは、アクティブなスピーカーが大きくなるように自動的に調整されます。レイアウトマネージャは、画面共有ビデオがある場合、自動的に拡大します。

レイアウト・マネージャーは、スクリーン共有ビデオをレイアウトの最も大きなタイルに配置します、アクティブスピーカーが適用されている場合でも

を設定することができます。 screenPublisherContainer そして cameraPublisherContainer オプションの Room() を構築することで、ローカル・クライアントの公開カメラと画面共有ビデオのビデオをカメラとスクリーン共有の動画がレイアウト・マネージャのUIの外側に表示されるように構築されています。

モバイルデバイスでは、レイアウトマネージャーは4つのカメラ映像のみを表示します。また、スクリーン・シェアリングとアクティブ・スピーカーのビデオもモバイル機器では画面全体を占めます。レイアウトマネージャーは participantJoined そして participantLeft ルーム・オブジェクトによってディスパッチされるイベントによって、カスタムUIインジケータが表示されます。を表示するカスタムUIインジケータを持つことができます。

デフォルトでは、レイアウトマネージャは、クライアントがモバイルデバイス上で動作しているかどうかを、クライアントのユーザーエージェントに基づいて自動的に判断します。を自動的に判断します。このとき managedLayoutOptions パラメーターの Room()コンストラクタオプション deviceLayoutMode プロパティに設定します。これを "desktop" または "mobile" を使用する。デバイスレイアウトを明示的に設定する。

レイアウト・オプション

レイアウトは2種類：

grid - 動画はグリッドレイアウトで配置されています。
active-speaker - アクティブなスピーカー（現在発言している参加者）は、大きなDOM要素で自動的に強調表示されます。大きなDOM要素で自動的にハイライトされます。

について Room() コンストラクタには managedLayoutOptions パラメータを使用します。パラメータです：

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  roomContainer: 'roomContainer',
  managedLayoutOptions: {
    layoutMode: 'active-speaker'
  }
});

を呼び出してレイアウトモードを変更することもできます。 Room.setLayoutMode() メソッドを使用する：

room.setLayoutMode('grid'); // Set layout mode to grid
room.setLayoutMode('active-speaker'); // Set layout mode to active-speaker

について managedLayoutOptions パラメーターの Room()コンストラクタオプションで deviceLayoutMode プロパティに設定します。これを "desktop" または "mobile" を使用する。デバイス・レイアウトを明示的に設定する。デフォルトではは、クライアントのユーザーエージェントに基づいて、クライアントがモバイルデバイス上で動作しているかどうかを自動的に判断します。ユーザーエージェントに基づいて自動的に判断されます。

オプション mediaShutoffThreshold パラメーターの Room()コンストラクタルームの現在の参加者数のしきい値を設定します。ローカルクライアントのCameraPublisherが音声とビデオを公開できないようにします。

オプション maxVideoParticipantsOnScreen パラメーターの Room()コンストラクタは、1つの部屋で同時に表示されるCameraSubscriberビデオの最大数を設定します。これは、ローカルクライアントのビデオ表示にのみ影響します。

使用するカメラとマイクの変更

カメラ出版社のオーディオ/ビデオデバイスの設定

// Changes the audio input device
room.camera.setAudioDevice(audioDeviceId);

// Changes the video input device
room.camera.setVideoDevice(videoDeviceId);

カメラ出版社のオーディオ/ビデオ機器の入手

// Returns the current audio input device
const currentAudioDevice = await room.camera.getAudioDevice();

// Returns the current video input device
const currentVideoDevice = room.camera.getVideoDevice();

音声出力機器の設定

利用可能なオーディオ出力デバイスの配列を取得するには VideoExpress.getAudioOutputDevices() メソッドを使用する：

const devices = await VideoExpress.getAudioOutputDevices();

現在のオーディオ出力デバイスのデバイスIDとラベルを取得するには VideoExpress.getActiveAudioOutputDevice() メソッドを使用する：

const device = await VideoExpress.getActiveAudioOutputDevice();
console.log(device.deviceId, device.label);

音声出力デバイスを設定するには VideoExpress.setAudioOutputDevice() メソッドにデバイスIDを渡す：

const devices = await VideoExpress.setAudioOutputDevice(deviceId);

次のコードは、利用可能なオーディオ出力デバイスを循環させるメソッドの実装方法を示しています。メソッドを実装する方法を示します：

const currentAudioIndex;

const devices = await VideoExpress.getAudioOutputDevices;
const currentDevice = await devices.getActiveAudioOutputDevice();
  devices.forEach((device, index) => {
    if (device.label === currentDevice.label) {
      currentAudioIndex = index;
    }
  });

const cycleAudioOutput = () => {
  currentAudioIndex += 1;
  let deviceId = devices[currentAudioIndex % devices.length].deviceId;
  VideoExpress.setAudioOutputDevice(deviceId);
};

プレビューパブリッシャーの作成

オプションで、入室前にプレビューパブリッシャー要素を設定することができます：

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia(
  publisherOptions: {
    targetElement: 'previewContainer',
    publisherProperties: {
      resolution: '1280x720'
    },
  },
);

ユーザーは、カメラとマイクへのアクセスを許可するよう促されます。ユーザがによって返されるプロミス。 previewPublisher.previewMedia() メソッドは解決される。そうでない場合は拒否される。

プレビューパブリッシャーを使って、入室前にカメラとマイクを選択させることができます。を選択させることができます：

// Get the current audio input device
const currentAudioDevice = await previewPublisher.getAudioDevice();

// Change the audio input device
previewPublisher.setAudioDevice(audioDeviceId);

// Get the current video input device
const currentVideoDevice = previewPublisher.getVideoDevice();

// Change the video input device
previewPublisher.setVideoDevice(videoDeviceId);

利用可能なオーディオおよびビデオ入力デバイスの配列を取得するには VideoExpress.getDevices() メソッドを使用する：

const devices = await VideoExpress.getDevices();

以下のコードは、利用可能なオーディオ・ビデオ入力デバイスを循環させるメソッドの実装方法を示しています。メソッドを実装する方法を示します：

let currentAudioIndex;
let currentVideoIndex;

VideoExpress.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, index) => {
    if (device.label === previewPublisher.getAudioSource().label) {
      currentAudioIndex = index;
    }
  });

  currentAudioIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'audioInput')
    // Find the right starting index for cycleMicrophone
    .findIndex((device) => device.label === previewPublisher.getAudioSource().label);

  currentVideoIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'videoInput')
    // Find the right starting index for cycleCamera
    .findIndex((device) => device.label === previewPublisher.getVideoDevice().label);
});

const cycleMicrophone = () => {
  currentAudioIndex += 1;
  let deviceId = audioInputs[currentAudioIndex % audioInputs.length].deviceId;
  previewPublisher.setAudioSource(deviceId);
};

const cycleCamera = () => {
  currentVideoIndex += 1;
  let deviceId = videoInputs[currentVideoIndex % videoInputs.length].deviceId;
  previewPublisher.setVideoSource(deviceId);
};

入室する前に、プレビューパブリッシャーを破棄することができます。ページから削除する)：

previewPublisher.destroy();

公開ビデオの有効化と無効化

カメラパブリッシャーのオーディオ/ビデオへのアクセス

// Check whether a camera publisher video is enabled or not:
room.camera.isVideoEnabled();

// Check whether a camera publisher audio is enabled or not:
room.camera.isAudioEnabled();

// Enable the camera publisher's video:
room.camera.enableVideo();

// Disable the camera publisher's video:
room.camera.disableVideo();

// Enable the camera publisher's audio:
room.camera.enableAudio();

// Disable the camera publisher's audio:
room.camera.disableAudio();

カメラ加入者のオーディオとビデオの有効化と無効化

これらの方法は、ローカルクライアントの加入者のオーディオとビデオにのみ影響する。

// Check whether a camera subscriber's video is enabled or not:
participant.camera.isVideoEnabled();

// Check whether a camera subscriber's audio is enabled or not:
participant.camera.isAudioEnabled();

// Enable a camera subscriber's video:
participant.camera.enableVideo();

// Disable a camera subscriber's video:
participant.camera.disableVideo();

// Enable a camera subscriber's audio:
participant.camera.enableAudio();

// Disable a camera subscriber's audio:
participant.camera.disableAudio();

ビデオフィルターの設定

背景ぼかしと背景置換フィルタを設定できます。 CameraPublisher ビデオストリームを CameraPublisher.setVideoFilter() メソッドを使用します。フィルタを削除するには CameraPublisher.clearVideoFilter() メソッドを使用する。

// Applying a background blur filter
room.camera.setVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high'
});

// Removing the filter
room.camera.clearVideoFilter();

動画無効時の画像設定

動画の背景画像は setDisabledImageURI メソッドが利用可能です。 CameraSubscriber, CameraPublisher, ScreenSubscriber, ScreenPublisherそして PreviewPublisher クラスを表示します。この画像はビデオがミュートされているときに表示されます。

const disabledImageURI = 'https://path-to.file/dog-dance.jpg';
room.camera.setDisabledImageURI(disabledImageURI);

アクティブ・スピーカー検出

Video Express のレイアウトマネージャは、HTML DOM 内の動画要素を自動的に配置し、モバイル画面でのレイアウトを調整します。に配置し、モバイル画面でのレイアウトを調整します。レイアウトマネージャは、自動的にルーム内のアクティブスピーカーを自動的にハイライトします。アクティブなスピーカーが大きくなるように、レイアウトが自動的に調整されます。画面共有ビデオがある場合、レイアウトマネージャは自動的に拡大します。レイアウトは、アクティブスピーカーが非表示の場合、自動的に表示します。

アクティブスピーカーハイライトを有効にするには managedLayoutOptions.speakerHighlightEnabled オプションの Room()コンストラクタへの true.ハイライトの色をカスタマイズするには managedLayoutOptions.speakerHighlightColor オプションの Room() コンストラクタを使用する。

Room オブジェクトは activeSpeakerChanged 新しいアクティブ・スピーカーが入室するとイベントがディスパッチされます。このイベントがディスパッチされると、どの参加者に応じたUIエフェクトを追加できます。

room.on('activeSpeakerChanged', (participant) => {
  console.log('Active speaker: ', participant.name);
});

このイベントは、アクティブな話者を識別するParticipantオブジェクトを発行します。

画面共有

画面共有を開始するには Room.startScreensharing() メソッドを使用する：

room.startScreensharing('screenContainer')
  .then(() => console.log('Started screen sharing'))
  .catch((err) => console.err(err));

このメソッドは、オプションのパラメータを 1 つ受け取ります。です。これは、HTMLElement または文字列 ( id の HTML要素の)。パラメータが渡されない場合、コンテナは screenPublisherContainer プロパティの managedLayoutOptions パラメータに渡された Room()コンストラクタまたはを選択します。 roomContainer プロパティに渡された Room() constructor.これらのいずれも指定されていない場合、スクリーン共有の子として追加されます。 body HTMLページの

ユーザは、画面へのアクセスを許可するよう促される。ユーザが画面へのアクセスを許可するとによって返される Room.startScreensharing() メソッドは、画面共有メソッドは解決されます。そうでない場合、Promise は拒否されます。

画面共有を停止するには Room.stopScreenSharing() メソッドを使用する：

room.stopScreenSharing();

スクリーン共有パブリッシャーが開始すると、対応するスクリーン共有サブスクライバーが、他の参加者のページのレイアウトマネージャーに自動的に追加されます。自動的に他の参加者のページのレイアウトマネージャーに追加されます。

スクリーン共有パブリッシャーのオーディオ/ビデオへのアクセス

以下のコードは、画面共有パブリッシャービデオが有効かどうかをチェックします：

room.screen.isVideoEnabled();

以下のコードは、画面共有パブリッシャーの音声が有効かどうかをチェックします：

room.screen.isAudioEnabled();

スクリーン共有パブリッシャーのビデオを有効にする：

room.screen.enableVideo();

スクリーン共有パブリッシャーのビデオを無効にするには：

room.screen.disableVideo();

画面共有パブリッシャーの音声を有効にするには：

room.screen.enableAudio();

スクリーン共有パブリッシャーの音声を無効にする：

room.screen.disableAudio()

他のクライアントが画面共有ストリームを公開したときの検出

他のユーザーが画面共有ストリームを公開すると、Video Express レイアウト・マネージャは自動的に動画を HTML ページに追加します。が自動的に動画を HTML ページに追加します。

参加者オブジェクトは screenCreated 参加者（ローカルユーザーではない）がが画面共有ストリームを公開したときに発生します：

participant.on('screenCreated', (screenSubscriber) => {
  console.log('new screen-sharing stream for ', participant.name);
});

イベントはスクリーン購読者オブジェクトを使用します。ScreenSubscriber オブジェクトには、ローカルクライアントの画面共有ストリームのオーディオとビデオの再生を有効または無効にするメソッドが含まれています。メソッドがあります ( 画面共有契約者のオーディオとビデオの有効化と無効化).

参加者オブジェクトは screenDestroyed イベント。参加者（ローカルユーザではない）がカメラストリームの公開を停止したときのイベント：

participant.on('screenDestroyed', () => {
  console.log('screen-sharing stream destroyed for ', participant.name);
});

画面共有契約者のオーディオとビデオの有効化と無効化

// Check whether a screen-sharing subscriber video is enabled or not:
participant.screen.isVideoEnabled();

// Check whether a screen-sharing subscriber audio is enabled or not:
participant.screen.isAudioEnabled();

// Enable a screen-sharing subscriber's video:
participant.screen.enableVideo();

// Disable a screen-sharing subscriber's video:
participant.screen.disableVideo();

// Enable a screen-sharing subscriber's audio:
participant.screen.enableAudio();

// Disable a screen-sharing subscriber's audio:
participant.screen.disableAudio();

イベント

ビデオ・エクスプレスのイベントはイベントエミッターパターンがある。

イベントリスナーを追加するには、オブジェクトの on() メソッドを使用します。例えばメソッドのリスナーを追加します。 connected ルームによるイベントディスパッチオブジェクトによってディスパッチされます：

room.on('connected', () => {
  console.log('Connected');
});

について on() メソッドは、イベントの名前（文字列）と、イベントがディスパッチされたときに呼び出されるコールバック関数の2つのパラメータを受け取ります。コールバック関数です。

いくつかのイベントでは、コールバック関数に引数が渡される。イベントはに渡されます。 発する といったオブジェクトがある。例えば、ルーム disconnected イベントは reason 文字列：

room.on('disconnected', (reason) => {
  console.log('Disconnected:', reason);
});

ザ・ルーム participantLeft イベントは2つのオブジェクトを生成します。 reason 文字列：

room.on('connected', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

高度な機能

エンド・ツー・エンドの暗号化

エンド・ツー・エンドの暗号化を使うには、次のようにインスタンス化します。 Room オブジェクトを暗号化する：

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  encryptionSecret: 'this-is-a-secret',
});

部屋を暗号化シークレットで作成した後、新しいシークレットを使うように更新するには Room.setEncryptionSecret(encryptionSecret) メソッドを使用する：

room.setEncryptionSecret('this-is-a-secret');

注： End-To-End暗号化は、最初にサーバーSDKを通して有効にする必要があります。詳細はビデオエクスプレス開発者ガイド.

シグナリング

ルームに入室したら Room.signal() 信号を送信する方法信号を送信する方法。

以下のコードは、ルーム内の全参加者にシグナルを送信する：

room.signal({
  data: 'hello.'
});

以下のコードは、ルーム内の特定の参加者にシグナルを送信します：

room.signal({
  to: participant, // this is a Participant object
  data: `hello ${participant.name}.`
});

オプションで type シグナルのプロパティ options シグナル信号を識別するのに役立つ：

room.signal({
  type: 'greeting',
  data: `hello.`
});

シグナルを受信すると、Roomオブジェクトは signal イベント。はシグナルを定義するSignalEventオブジェクトを発行する：

room.on('signal', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

を含む信号の場合 type を受信すると、Room オブジェクトは signal:type イベントを生成する、これは、シグナルを定義するSignalEventオブジェクトを発行する：

room.on('signal:greeting', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

詳細はルーム.シグナル() そしてシグナルとシグナル：イベントビデオ Express のリファレンス・ドキュメントを参照してください。またシグナリングの概要.

プロキシURLの設定

IPプロキシ機能を使用すると、クライアントはすべてのインターネットトラフィック（メディアストリームを除く）をプロキシサーバー経由でをルーティングします。メディア以外のトラフィックには、Video API サーバーへの通信やロギングインフラストラクチャへの通信が含まれます。

IPプロキシ機能はアドオン機能.

以下のコードは、IPプロキシサーバーのURLを設定する。このコードは Room() コンストラクタを使用する：

VideoExpress.setProxyUrl('https://123.123.123.123:8080');

詳細は IPプロキシ開発者ガイド.

カスタムTURNサーバーの使用

設定可能なTURNサーバー機能はアドオン機能.Video Express クライアントが使用する TURN サーバーを設定します、のオプションを設定します。 iceConfig プロパティの options パラメーターの Room()コンストラクタ.

詳細は設定可能なTURNサーバー開発者ガイド.

接続データの使用

Video Expressルームへの入室を呼び出す際、接続トークンを渡します。トークンには、メタデータを含む接続データ文字列をオプションで指定できます。このデータにはこのデータには Room.participantConnectionData そして Participant.connectionData プロパティー

サーバーサイドのコード（Node.js）

を使用してトークンを生成する際に接続データを追加する方法を示します。を使用してトークンを生成する際に接続データを追加する方法を示します：

// Generating token from your server
const token = opentok.generateToken(sessionId, {
  role: 'moderator',
  data: '{"disabledImageURI":"https://path-to.file/jason.jpg"}',
});

クライアント側のコード（Video Express）

// Setting a participant's disabledImageURI with data from token
participant.on('cameraCreated', (cameraSubscriber) => {
  // connectionData is a JSON string from some your server
  const { connectionData } = participant;
  const { disabledImageURI } = JSON.parse(connectionData);
  cameraSubscriber.setDisabledImageURI(disabledImageURI);
});

詳しくはトークン作成の概要.

エンタープライズ環境でVideo Expressを使用する

Vonage Video Expressは、現在スタンダード環境のみを提供しています。ただし Enterprise プロジェクトを使用することができます。これにより、Video Express は Vonage インフラストラクチャを確実に利用できます。 Enterprise環境を使用するパートナーアプリケーション専用のシグナリングおよびメディアサーバ。これにより、変更に対する安定性が向上し、プラットフォームの負荷急増に対する回復力が高まります。

モバイルアプリでVideo Expressを使用する

参照 Vonage Video Express iOSおよびAndroidデモアプリをGitHubに公開しました。このアプリは、モバイルアプリのWebビュー（iOSのWKWebViewなど）でVideo Expressを使用しています。や Android の WebView) で Video Express を使用しています。

既知の問題と制限

Vonage Video Expressは、JavaScript用のVonage Video APIであるOpenTok.jsの上で動作します。 Vonage Video Express ルームに接続するすべてのクライアントは、Vonage Video Express を使用する必要があります。他の Vonage Video API クライアント SDK（OpenTok.js API を直接使用して構築されたウェブクライアントを含む）を使用する場合は、Vonage Video Express を使用してください。 OpenTok.js API を使用して直接構築された Web クライアントを含む）を使用すると、Vonage Video Express の一部の機能が無効になる場合があります。

OpenTok.js および Video API プラットフォームの機能には、次のような制限があります。 Vonage Video Expressはサポートしていません：

Video Expressはサポートしていません。大型インタラクティブ放送なぜなら、Video Expressは現在、ルームに参加するすべてのクライアントにカメラストリームを公開するよう要求しているからです。
を使用する場合、Video Expressの接続に若干時間がかかることがあります。
許可IPリスト特集ビデオ・エクスプレスは、開発者の体験を簡素化することに重点を置いています。このため Video Express は、許可 IP リストのアドレスを使用する前に、CDN 経由での設定ファイルのダウンロードを試みます（ファイアウォールでブロックされている可能性があります）。のダウンロードを試みます。クライアントが許可された IP アドレスを使用するように指定することはできません。クライアントが許可された IP アドレスのみを使用するように指定することはできません。 ipWhitelist OpenTok.js のオプション OT.initSession() メソッド)。Video Expressクライアントはメソッドで設定された OpenTok.js を使用するクライアントよりも、接続に若干時間がかかります。 ipWhitelist オプションを true 使用時許可IPリストコンテンツ・デリバリー・ネットワークをブロックするファイアウォールを持つ。

参加者 ビデオエクスプレスの コネクション.カメラ Video Express のカメラおよび画面共有ストリームは、次のものに対応しています。 ストリーム.データとイベント接続とストリームのデータとイベントは開発ツールインスペクターなど Insightsなど。Video Expressは、次のような接続IDを提供します。 Participant.id, Room.participantIdのキーと Room.participants, これは、接続やストリームのイベントやデータについて、特定のユーザーを識別するために使用できます。接続およびストリームIDを必要とする一部の機能は、Video Expressではサポートされていません。これには以下が含まれます：

ほとんどの場合モデレーション機能.ただし、REST API メソッドを使用すると、Video Express ルーム内のすべてのストリームを強制的に消音できます（ただし、除外するストリーム ID のリストを含めることはできません）。ただし、除外するストリーム ID のリストを含めることはできません）。Video Express Moderation のさらなる機能は、近日公開予定です。
収録するストリームの選択アーカイブまたはライブ・ストリーミング放送.
のレイアウトクラスの変更アーカイブまたはライブ・ストリーミング放送カスタムレイアウトを使用している。

Vonage Video Expressは、基盤となるOpenTok.jsへのアクセスを提供しません。出版社そして購読者オブジェクトを使用することはできません。そのため getStats() そして getRtcStatsReport() メソッドを呼び出します。 Video Expressは、すべてのビデオ・ストリームのフレーム・レートと解像度を自動的に最適化する。を呼び出す必要はありません。 setPreferredFrameRate() そして setPreferredResolution() 購読者または出版社のための方法。

既知の問題と修正された問題の詳細については、以下を参照してください。 Vonage Video Express リリースノート.

ナビゲーション