WebクライアントSDK
Vonage Video API を使用する Web ベースのアプリケーションを構築するための Client SDK は次のとおりです。 OpenTok.js.このJavaScriptライブラリは、アプリのコア機能のほとんどを提供する：
- セッションへの接続
- セッションへのストリームの公開
- セッション内でストリームを購読する
Vonage Video API Web SDK のリファレンスは次のとおりです。 これ.
Vonage Video APIを使用するアプリケーションはすべて2つの部分で構成されています：
- Vonage VideoクライアントSDKを使用し、ユーザーのブラウザまたはモバイルアプリ上で動作するクライアント側
- サーバー側は VonageビデオサーバーSDK サーバ上で実行され、認証情報をクライアントに渡す。
すべてのVonage VideoクライアントSDKは、相互に連携することができます。Vonage Videoのクライアント、サーバー、セッションなどの基本については、当社の Video API概要 ページを参照されたい。
重要な注意事項
- Web SDKを更新しました。 現在は
https://video.standard.vonage.com/v2/js/opentok.min.js. - Windows 上の Chrome M136 – オーディオデバイスの検出に関する問題。 Windows 版 Chrome M136 において、オーディオデバイスの情報を取得する際に、ブラウザの応答が遅くなったり、動作しなくなったりすることが断続的に発生する問題が確認されています。この問題は Chrome 137.0.7150.0 で修正されており、この修正は今後リリースされる Chrome 136 のパッチにも組み込まれています。 それまでの間、この問題が発生した場合は、Chrome 135にロールバックして固定するか、別のブラウザを使用することをお勧めします。回避策の実施についてサポートが必要な場合は、サポートまでお問い合わせください。
- Safari 15.4および15.5で修正された問題。 Safariのバージョン15.4および15.5（iOS 15.4および15.5、macOS 12.3および12.4に同梱）では、（Safariで）OpenTok.jsを使用するアプリに影響を及ぼす可能性のある以下の問題が修正されています：
- 特定のモデルのBluetoothヘッドセットを使用した際のオーディオの問題。 Bluetoothヘッドセットの特定のモデルでは、音声が途切れることがあります。これは WebKitのバグ はSafari 15.4で修正されました。
- macOS Safariでマイクを切り替えるとエコーが発生する問題。 パブリッシャーが使用するマイクを切り替えると、パブリッシャーの音声がエコーすることがありました。加入者側ではエコーは発生しませんでした。これは WebKitのバグ はSafari 15.5で修正されました。
- iOS 15.1のルーティングセッションでH.264ビデオを公開する重大なバグ。 iOS 15.1では、ルーティングされたセッションでのH.264ビデオの公開に失敗していました。これは WebKitのバグ Safari 15.4で修正されました。
- iOS版Safariの音量が小さい。 これは WebKitのバグ はSafari 15.4で修正されました。
- エンド・ツー・エンドの暗号化 — OpenTok.js 2.27.0 では、以前のバージョンの OpenTok.js を使用しているクライアントとの間でエンドツーエンド暗号化が機能しません。 アプリを OpenTok.js 2.27.0 以降にアップグレードする際、アプリでエンドツーエンド暗号化を使用している場合は、すべてのクライアントが OpenTok.js 2.27.0 以降を使用していることを確認してください。
相互運用性
現在のバージョンのOpenTok.jsライブラリは、Vonage VideoクライアントSDKのバージョン2.32以上で書かれたVonage Videoアプリと相互運用できます：
- OpenTok.js (ウェブ)
- アンドロイドSDK
- iOS SDK
- Windows SDK
- macOS SDK
- Linux SDK
- リアクト・ネイティブSDK
インストール
ウェブページにOpenTok.jsを読み込むには、以下のスクリプト・タグを追加します：
<script src="https://video.standard.vonage.com/v2/js/opentok.min.js"></script>
を使用してインストールすることもできます。 Vonage/クライアントSDKビデオ npm パッケージ。
をご覧ください。 リファレンスガイド をクリックすると、OpenTok.js SDK で利用可能なすべてのメソッドが表示されます。
GitHubパッケージによるインストール
npmレジストリからのインストールに加えて、Vonage Video API Client SDKパッケージは、以下の方法でも入手可能です。 GitHub PackagesのNPMレジストリ.これは、GitHubベースのパッケージ管理を必要とするエンタープライズ環境に、別の配布チャネルを提供する。
利用可能なパッケージ
以下のパッケージはGitHub Packagesに公開されています：
@vonage/client-sdk-video- 下記にて入手可能 GitHub パッケージ (Vonage org)
セットアップ方法
GitHub PackagesのNPMレジストリからパッケージをインストールするには、GitHubと認証するようにnpmを設定する必要があります：
1.GitHub Personal Access Token (PAT) を作成する。
で個人アクセストークンを生成する。 read:packages スコープを GitHub アカウントの設定に追加します。
2.あなたの .npmrc ファイル
プロジェクトの .npmrc ファイルまたはユーザーレベルの ~/.npmrc ファイル：
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry= https://npm.pkg.github.com
交換 YOUR_GITHUB_TOKEN に GitHub パーソナルアクセストークンを追加します。
3.パッケージをインストールする
いったん設定したら、標準のnpm installコマンドを使ってパッケージをインストールできる：
パッケージの在庫について
従来の npm レジストリと GitHub Packages レジストリの両方が同期されます。組織のパッケージ管理の好みに応じて、どちらかの配布方法を選ぶことができます。伝統的な npm インストール方法 ( npm install @vonage/client-sdk-video デフォルトのレジストリから）完全にサポートされたままであり、追加の設定は必要ない。
GitHub Packages の NPM レジストリの使い方については GitHub Packages ドキュメント.
システム要件
最新のブラウザで信頼性の高いビデオストリーミングを行うには、お使いのデバイスが以下の推奨スペックを満たしていることをご確認ください：
- CPU：最近のデュアルコアプロセッサ、1080pや重いマルチタスクにはクアッドコア（例：Intel Core i5 / Ryzen 5）以上。
- GPU1080p対応の最新統合グラフィックス（Intel UHD/Iris XeまたはAMD RadeonまたはNvidia Graphics）。ビデオコーディングのハードウェアデコーディング対応を強く推奨。
- RAM：日常的なストリーミングには最低8GB、多くのタブやアプリを開く場合は16GBを推奨。
- ストレージ：高速ロードとシステム応答性のためにSSDを推奨。
- ネットワーク信頼性の高いインターネット接続。Wi-Fi、イーサネット、携帯電話で動作。
- その他最適なパフォーマンスを得るためには、ブラウザのハードウェアアクセラレーションを有効にする必要があります。
これらの推奨事項により、ビデオストリーミング時の安定した再生、CPU使用率の低下、スムーズなパフォーマンスが保証されます。
ものづくりの学び
OpenTok.js の使い方を学ぶには、当社の ビデオチャットの基本チュートリアル.
OpenTok.js を使った開発の基本を理解したら、さらに詳しい情報を入手し、当社のサービスを利用して Applications をカスタマイズする方法を学ぶことができます。 開発者ガイド. 特定のAPIクラスやメソッドについて調べるには、 OpenTok.js リファレンス.
ブラウザサポート
OpenTok.jsライブラリは現在、以下の言語でサポートされています：
- グーグル・クローム（最新版）
- Android版Google Chrome（最新リリース版）
- iOS版Google Chrome（最新バージョン）
- Firefox（最新バージョン）
- Android版Firefox（最新リリース版）
- iOS版Firefoxのベータサポート（最新リリース版）
- Windows および macOS 用 Microsoft Edge バージョン 79 以上（Chromium ベースの Edge バージョン）
- macOSおよびiOSのSafari 11+。ビデオの相互運用性やその他の問題については サファリ・ブラウザ対応 ページを参照されたい。
- Opera (デスクトップ版の最新リリースのみ)
- エレクトロン（最新バージョン）
- サムスンインターネット（最新バージョン）
- WebView Android API レベル36以上
- iOS 18.6+でのWebView
Safariのサポート
アップルはmacOSのSafari 11とiOS 11のSafariでWebRTCのサポートを追加し、Safari上でOpenTok.jsアプリを使用できるようになった。
さらに、Safari 12.1はH.264に加えてVP8ビデオコーデックをサポートします。Safari 12.1のVP8サポートはmacOS 10.14.4で出荷され、macOS 10.13.6と10.12.6でも利用可能です。また、最新のiOS 12.2リリースでも利用可能です。
SafariでVP8ビデオコーデックを使用するには、バージョン2.16.0以降のOpenTok.jsを使用する必要があります。
ビデオコーデックのサポートについては、以下を参照してください。 開発者ガイド.
制限事項
以下は Safari での OpenTok.js の制限事項です：
- スクリーン共有ビデオの公開は、iOSのSafari、およびmacOSのSafari 12以前ではサポートされていません。macOSのSafari 13以上ではサポートされています。
- Safariは、http:(安全でない)またはfile:(ファイルシステム)URIスキームを使用してロードされたページでのカメラアクセス(またはストリームパブリッシング)をサポートしていません。https:（セキュア）でページを提供する必要があります。ただし、HTTPをサポートするフラグを切り替えることができます（テスト用）。
- Safariはlocalhostでのカメラアクセスをサポートしていません。0.0.0.0:xx（xxは80などのポート番号）を使用する必要があります。
- 開発者ツールが開かれている場合、Safari ではエンドツーエンド暗号化が機能しません。この問題はバージョン 2.35.1 で修正されました。
古いバージョン
古いバージョンのSafariはH.264ビデオコーデックのみを使用しているため、VP8ビデオコーデックをサポートしていません。
で ルーティングセッション （Media Router を使用するセッションの場合）、古いバージョンの Safari で動画の公開および購読を行えるようにするには、優先コーデックが H.264 に設定されたプロジェクトを使用する必要があります。プロジェクトの優先動画コーデックは、Video API アカウントの「プロジェクト」ページで設定してください。
においてである。 ルーティングセッション (OpenTokメディア・ルータを使用するセッション)で、優先ビデオ・コーデックを(H.264ではなく)VP8に設定したプロジェクトでは、古いバージョンのSafariを使用しているクライアントはVonageビデオ・プラットフォームを使用できますが、ビデオはサポートされません。
Async/Await および Promise のサポート
バージョン 2.35.1 以降、JS SDK は最新の async/await また、既存のコールバックベースのAPIに加え、プロミスベースのパターンも導入されます。この変更は完全な下位互換性を備えており、既存のコールバックベースのコードはすべて、修正を加えることなく引き続き動作します。
注： この作業の一環として、SDKは内部フローにおけるエラーの制御精度を高め、エラー情報をより正確に表示するようになりました。 バージョン 2.35.1 以降、一部の関数では、以前はエラーが黙って処理されていたものが報告されるようになりました。これらは新たな障害ではなく、以前から存在していたエラーが正しく伝播されるようになったため、以前は気づかれなかったケースでもエラーが報告されるようになる可能性があります。
方法に応じて、2つのパターンが用意されています：
以前は値を返していたメソッド void など session.signal(), OT.getDevices() （およびその他）は、オプションのコールバックを受け入れるようになり、また Promise. コードスニペットの下にある完全なリストをご覧ください：
// Callback style (still works)
session.signal({ data: 'hello' }, function(error) {
if (error) { console.error(error); }
else { console.log('Signal sent'); }
});
// Promise / async-await style (new in 2.35.1)
try {
await session.signal({ data: 'hello' });
console.log('Signal sent');
} catch (error) {
console.error(error);
}
以前はオブジェクトを返していたメソッド など OT.initPublisher(), session.publish()そして session.subscribe()) 新しいものを明らかにする .promise() そのメソッド自体の機能について。コードスニペットの下にある完全なリストを参照してください：
// Callback style (still works)
const publisher = OT.initPublisher(targetElement, properties, function(error) {
if (error) { console.error(error); }
});
// Promise / async-await style (new in 2.35.1)
try {
const publisher = await OT.initPublisher.promise(targetElement, properties);
} catch (error) {
console.error(error);
}
更新された手法
以下のメソッドが、Promise をサポートするように更新されました：
以前は値を返していた関数 void — コールバックパラメータはオプションとなり、この関数はまた、 Promise:
| 方法 | リターン |
|---|---|
OT.checkScreenSharingCapability |
Promise<void> |
OT.getDevices |
Promise<Device[]> |
OT.reportIssue |
Promise<void> |
publisher.getStats |
Promise<void> |
publisher.publishCaptions |
Promise<void> |
session.disconnect |
Promise<void> |
session.forceDisconnect |
Promise<void> |
session.forceUnpublish |
Promise<void> |
session.signal |
Promise<void> |
subscriber.getStats |
Promise<void> |
subscriber.setPreferredFrameRate |
Promise<void> |
subscriber.setPreferredResolution |
Promise<void> |
以前はオブジェクトを返していた関数 — 新しい .promise() 関数は、そのメソッド自体で公開されています：
| 方法 | リターン |
|---|---|
OT.initPublisher |
.promise() 収益 Promise<Publisher> |
publisher.destroy |
.promise() 収益 Promise<void> |
publisher.publishAudio |
.promise() 収益 Promise<void> |
publisher.publishVideo |
.promise() 収益 Promise<void> |
session.connect |
.promise() 収益 Promise<Session> |
session.publish |
.promise() 収益 Promise<Publisher> |
session.subscribe |
.promise() 収益 Promise<Subscriber> |
subscriber.setAudioVolume |
.promise() 収益 Promise<void> |
subscriber.restrictFrameRate |
.promise() 収益 Promise<void> |
subscriber.subscribeToAudio |
.promise() 収益 Promise<void> |
subscriber.subscribeToVideo |
.promise() 収益 Promise<void> |
すべての新しいシグネチャを反映するよう、TypeScriptの定義が更新されました。
注： 既存のコールバックベースのコードをPromiseに移行する方法に関する包括的な手順については、以下の JS SDK：コールバックからPromiseへの移行ガイド.
バージョン番号
WebページにOpenTok.jsライブラリをインクルードするには <script> タグを付けている：
<script src="https://video.standard.vonage.com/v2/js/opentok.min.js"></script>
OpenTok.jsのバージョン番号は3つの部分で構成されています：
- メジャーバージョン番号 - この番号（最初の番号）は、後方互換性のないAPIの変更を含む新しいバージョンが出たときにインクリメントされる。
- マイナーバージョン番号 - この番号（2番目の番号）は、新しい機能が追加された新しいバージョンがあるときにインクリメントされます。
- パッチ番号 - この番号（3番目）は、新しい機能が追加されることなく、バグが修正されたり、パフォーマンスが改善されたりする新しいバージョンが出たときにインクリメントされます。
たとえば、v2.4.0はメジャーバージョン2、マイナーバージョン4（メジャーバージョン2の）、リビジョン0（v2.4の）です。リビジョンがリリースされると、変更はルートマイナーリビジョンに含まれます。例えば、v2.2.3がリリースされると、その変更はv2.2に含まれます。
特定のリビジョンを参照するには、完全なバージョン番号（"v2.4.0 "など）を src 属性で指定します。ただし、メジャーバージョン番号のみを指定することをお勧めします。Vonage はライブラリの現行バージョンを公式にサポートしています。古いバージョンを読み込んでいる場合は、Vonageビデオ・プラットフォームの最新のバグ修正や機能を利用するためにアップグレードすることをお勧めします。
重要だ： 私たちが提供するライブラリは、常に修正せずに使用してください。これにより、最新のテスト済みコードを使用することができます。Vonage Video APIは修正されたライブラリの使用をサポートしていません。
コードサンプル
サンプルコードについては video-api-web-samples リポジトリ をGitHubで公開している。
ドキュメントおよび詳細情報
参照 Vonage Video Web SDK API リファレンス.
新機能と既知の問題のリストについては リリースノート.