OpenTok.js
OpenTok.js ライブラリを使用すると、Web上で Vonage Video API を基盤としたビデオセッションを利用できます。
Vonage Video APIを使用するアプリケーションはすべて2つの部分で構成されています：
- クライアント側は OpenTok クライアント SDK そして、ユーザーのブラウザやモバイルアプリ上で動作します
- サーバー側は OpenTok サーバー用 SDK サーバ上で実行され、認証情報をクライアントに渡す。
Vonage Video API を使用する Web ベースのアプリケーションを構築するための Client SDK は次のとおりです。 OpenTok.js.このJavaScriptライブラリは、アプリのコア機能のほとんどを提供する：
- セッションへの接続
- セッションへのストリームの公開
- セッション内でストリームを購読する
また、以下のプラットフォーム向けにもクライアントSDKが利用可能です。 iOS そして アンドロイド. すべてのOpenTokクライアントSDKは、相互に連携することができます。OpenTokのクライアント、サーバー、セッションなどの基本については、当社の ビデオAPIの基礎 ページを参照されたい。
重要な注意事項
- 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 ライブラリの現在のバージョン 2.35.1 は、OpenTok クライアント SDK のバージョン 2.33 以降で作成された OpenTok アプリと相互運用可能です：
- OpenTok.js
- OpenTok Android SDK
- OpenTok iOS SDK
- OpenTok Windows SDK
- OpenTok macOS SDK
- OpenTok Linux SDK
- OpenTok React Native SDK
インストール
ウェブページにOpenTok.jsを読み込むには、以下のスクリプト・タグを追加します：
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
GitHubパッケージによるインストール
npmレジストリからのインストールに加え、Client SDKパッケージは以下からも入手可能です。 GitHub PackagesのNPMレジストリ.これは、GitHubベースのパッケージ管理を必要とするエンタープライズ環境に、別の配布チャネルを提供する。
利用可能なパッケージ
以下のパッケージはGitHub Packagesに公開されています：
@opentok/client- 下記にて入手可能 GitHub Packages（OpenTok 組織）
セットアップ方法
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 install @opentok/client
パッケージの在庫について
従来の npm レジストリと GitHub Packages レジストリの両方が同期されます。組織のパッケージ管理の好みに応じて、どちらかの配布方法を選ぶことができます。伝統的な npm インストール方法 ( npm install @opentok/client デフォルトのレジストリから）完全にサポートされたままであり、追加の設定は必要ない。
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 ライブラリの使い方を学ぶには、Web 向けの「基本ビデオチャット」チュートリアルに従うのが一番です：
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（最新リリース版）。動画の相互運用性やその他の問題に関する詳細については、 サファリ・ブラウザ対応 ページを参照されたい。
- Opera (デスクトップ版の最新リリースのみ)
- エレクトロン（最新バージョン）
- サムスンインターネット（最新バージョン）
- WebView (android.webkit.WebView) Android API レベル 36 以上
- WebView (ウェブビュー) iOS 18.6以降
重要だ： OpenTok.js バージョン 2.16 は、Internet Explorer 向けの OpenTok プラグインをサポートした最後のバージョンでした。OpenTok.js バージョン 2.16 は、Standard 環境では 2020 年 5 月、Enterprise 環境では 2020 年 6 月に非推奨となりました。
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://static.opentok.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では、ライブラリの最新バージョンを公式にサポートしています。古いバージョンを読み込んでいる場合は、OpenTokプラットフォームの最新のバグ修正や機能を活用できるよう、アップグレードをお願いいたします。
重要だ： 私たちが提供するライブラリは、常に修正せずに使用してください。これにより、最新のテスト済みコードを使用することができます。Vonage Video APIは修正されたライブラリの使用をサポートしていません。
OpenTok.js の特定のバージョンに関する詳細については、OpenTok の リリースノート. OpenTok.js の新バージョンがリリースされたことを確認するには、以下のページにアクセスしてください。 Video API - 新機能 ページに移動し、[ フォロー ボタンをクリックする。
コードサンプル
サンプルコードについては video-api-web-samples リポジトリ をGitHubで公開している。
ドキュメントおよび詳細情報
参照 OpenTok.js API リファレンス そして OpenTok 開発者ガイド.
新機能と既知の問題のリストについては リリースノート.