基本的なWebクライアントの設定

このチュートリアルでは、Vonage Video API ウェブアプリ用の基本的なクライアントを設定する手順を順を追って説明します。

概要

Vonage Video API を使用するすべてのアプリケーションには、以下の両方が必要です。クライアントそしてサーバーコンポーネント。クライアントサイドのコードは、エンドユーザーのブラウザに読み込まれ、OpenTokの機能の大部分を処理するもので、これには以下が含まれます。接続に対するセッション, 出版オーディオ・ビデオストリームをセッションに追加し購読を他のクライアントのストリームに追加する。クライアント、サーバー、セッションの詳細については、以下を参照のこと。ビデオAPIの基礎.

このチュートリアルでは、以下の機能を活用します。 OpenTok.js、OpenTokのWeb用クライアントサイドライブラリを活用して、リアルタイムの双方向ビデオアプリケーションを迅速かつ簡単に構築できます。

所要時間の目安：20分

このチュートリアルをスキップしたい？ 以下のリンクから、完成したWebクライアントのコードにジャンプできます。 基本的なビデオチャット のフォルダにあります。 WebサンプルアプリのリポジトリをGitHubにアップした。このレポには、コードを実行し探索するためのドキュメントを含むREADMEが含まれている。

必要条件

このチュートリアルを完成させるために必要なもの：

有効なVonage Video APIアカウント - お持ちでない場合は、以下のことが可能です。無料体験を申し込む
ウェブカメラとマイク
Google Chrome、Firefox、またはその他のブラウザ対応ブラウザ
コードエディター

ステップ 1：プロジェクトフォルダと HTML テンプレートの作成

このプロジェクトでは、HTMLファイル、JavaScriptファイル、およびCSSファイルを作成することになります。

コードを書き始める前に、これらのファイルを格納する新しいプロジェクトフォルダをコンピュータに作成してください（以下の例は マイプロジェクト ただし、好きな名前をつけていい）。それから /js そして /css の空白ファイルと一緒に インデックス.html, app.jsそして app.css を以下のような構造で表している：
コピー
```
/myproject
    /js
        app.js
    /css
        app.css
    index.html
```
プロジェクトをセットアップしたら、コード・エディターでメイン・プロジェクト・フォルダーを開き、その中にある インデックス.html ファイル。
以下のコードをコピーしてください（（コピーボタン）をクリックし、コードエディタ内の index.html ファイルに追加してください：

<html> <head> <title> OpenTok Getting Started </title> <link href="css/app.css" rel="stylesheet" type="text/css"> <script src="https://static.opentok.com/v2/js/opentok.min.js"></script> </head> <body> <div id="videos"> <div id="subscriber"></div> <div id="publisher"></div> </div> <script type="text/javascript" src="js/app.js"></script> </body> </html>

上記のコードには OpenTok.js ライブラリに加え、先ほど作成したJSファイルやCSSファイルも含まれています。このコードにはまた、 出版社 そして 契約者 これらのクラスは、後でレイアウトをカスタマイズするために使用します。

このサンプルでは、OpenTok.js を static.opentok.com から直接読み込んでいます。OpenTok.js は NPM パッケージとしても利用可能です。NPM パッケージの使用方法については、以下を参照してください。 https://www.npmjs.com/package/@opentok/client.

ステップ 2：認証の設定

ブランクを引き上げる app.js 残りのステップのほとんどは、このファイルにコードを追加することになる。

OpenTokセッションに接続するには、クライアントは認証情報（つまり、 APIキー, セッションIDそして トークン.本番アプリケーションでは、これらの認証情報はサーバー、ですが、作業を効率化するため、ひとまず値を直接記述することにします。

まず、以下のコードブロックをコピーして、app.jsファイルに追加する：

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // (optional) add server code here initializeSession();
上記のコードを、以下の値を手動で指定するように修正する必要があります。 apiKey, sessionId そして token.これを行うには Video APIアカウント, 新しいOpenTok APIプロジェクトを作成するか、既存のOpenTok APIプロジェクトを使用し、プロジェクトページに移動して、ページを下へスクロールして プロジェクトツール セクション — そこから、セッション ID とトークンを手動で生成できます。生成したセッション ID とトークン、およびプロジェクトの API キーを使用して、 YOUR_API_KEY, YOUR_SESSION_ID そして YOUR_TOKEN 上記のコードで（引用符は必ず残しておいてください。）

重要だ： テストや開発中は、引き続きAccountからセッションIDやトークンの値を取得できますが、本番環境に移行する前にサーバーを設定する必要があります。詳細については、オプションガイドを参照してください。サーバーのセットアップこのチュートリアルの最後で。

セッションに関する詳細については、トークン、およびサーバーについては、こちらをご覧くださいビデオAPIの基礎.

ステップ 3: セッションへの接続とパブリッシャーの作成

お気づきかもしれないが initializeSession() メソッドが呼び出されます。このメソッドはセッション・オブジェクトを初期化し、セッションに接続します。

以下のコードをコピーし、app.js ファイル内の既存のコードの下に貼り付けてください：

// Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

パブリッシャーの作成

このアプリケーションは OpenTok を初期化します publisher オブジェクトを OT.initPublisher(). このメソッドには、3つのオプションのパラメータがあります：

パブリッシャー動画が置き換えるDOM要素――この場合は publisher div
出版社の特性――この場合は insertMode, heightそして width 属性
3番目のパラメータ（このコードには含まれていません）は、補完ハンドラを指定します

これらのオプションの詳細については、 OT.initPublisher() 参考資料。

セッションの初期化と接続

について OT.initSession() このメソッドは、OpenTok API キーとセッション ID の 2 つのパラメータを受け取ります。OpenTok を初期化して、それを返します。 session オブジェクトがある。

について connect() のメソッドを使用する。 session このオブジェクトは、クライアントアプリケーションを OpenTok セッションに接続します。セッション内で音声・映像ストリームを送受信する前（あるいは、セッションに対して何らかの操作を行う前）に、接続を行う必要があります。この connect() このメソッドは2つのパラメータを受け取ります。1つ目は、 token および完了ハンドラ関数 function(error).

セッションへの接続が確立されたら、次のようにしてセッションにデータを公開します。 session.publish(publisher).

クライアントが OpenTok セッションへの接続に失敗した場合、connect イベントのコンプリートハンドラにエラーオブジェクトが渡されます。この場合、 console.error().

ステップ 4: サブスクライバーの初期化

最後に、私たちはクライアントに次のようなことを望んでいる。 サブスクライブ セッション内で、お互いのストリームにアクセスする（または閲覧する）。

あなたの現在の app.js ファイルでは、次のようなコメントが必要です。 // Subscribe to a newly created stream.以下のコードをコピーして、そのコメントの直下に追加してください：

session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); });

セッション内で新しいストリームが作成されると、Session オブジェクトは streamCreated イベント。クライアントがストリームを検出した際、そのストリームを購読させたいのですが、上記のコードではこれを session.subscribe() メソッド。このメソッドは4つのパラメータを受け取ります：

クライアントが購読している Stream オブジェクト — event.stream
サブスクライバー動画が置き換えるDOM要素、またはそのDOM要素のID（任意）――この場合は subscriber div
サブスクライバービューの外観をカスタマイズするためのプロパティのセット（オプション）。この場合は、 insertMode, heightそして width 属性
が実行された際に呼び出される完了ハンドラ関数（オプション）は、 subscribe() メソッドが正常に完了するか、失敗するか

これらのオプションの詳細については、 Session.subscribe() 参考資料。

ステップ5：ブラウザでコードをテストする

この時点で app.js ファイルは次のようになるはずだ（少し調整して）：

// replace these values with those generated in your Video API account var apiKey = "YOUR_API_KEY"; var sessionId = "YOUR_SESSION_ID"; var token = "YOUR_TOKEN"; // Handling all of our errors here by alerting them function handleError(error) { if (error) { alert(error.message); } } // (optional) add server code here initializeSession(); function initializeSession() { var session = OT.initSession(apiKey, sessionId); // Subscribe to a newly created stream session.on('streamCreated', function(event) { session.subscribe(event.stream, 'subscriber', { insertMode: 'append', width: '100%', height: '100%' }, handleError); }); // Create a publisher var publisher = OT.initPublisher('publisher', { insertMode: 'append', width: '100%', height: '100%' }, handleError); // Connect to the session session.connect(token, function(error) { // If the connection is successful, initialize a publisher and publish to the session if (error) { handleError(error); } else { session.publish(publisher, handleError); } }); }

完成したコードでは、以下の値をハードコードで置き換える必要があります。 YOUR_API_KEY, YOUR_SESSION_ID そして YOUR_TOKEN - まだの方は認証の設定以上。

問題がなければ、Chrome や Firefox で index.html ファイルを開いて、コードをテストしてみてください。

ページを読み込んだ際、ブラウザがウェブカメラやマイクにアクセスすることを許可する必要がある場合があります。その後、ページ上に自分自身の映像（またはウェブカメラが捉えている映像）が表示されるはずです。
もしそれがうまくいったなら、 音声をミュートする 次に、元のタブを開いたまま別のタブを開き、同じURLを読み込んでください。これで、画面を下にスクロールすると、2つ目の動画が表示されるはずです。どちらかの動画を右クリックして「要素を検査」を選択すると、そのうちの1つの動画が subscriber div、もう一方は publisher div.

トラブルシューティングのヒント ページに動画が表示されない場合は、ブラウザのツールで「コンソール」タブを開き（Macではcommand+option+i、WindowsではCTRL+i）、エラーがないか確認してください。最も可能性の高い問題は、APIキー、セッションID、またはトークンが正しく設定されていないことです。認証情報をハードコーディングしているため、トークンの有効期限が切れている可能性もあります。

ステップ6：CSSを少しカスタマイズする

ここまでで、OpenTok を使用した完全に動作するクライアントが完成しました。この最後のステップでは、「ピクチャー・イン・ピクチャー」レイアウトを実現するための、基本的な CSS カスタマイズについて解説します。

空白のapp.cssファイルをコードエディターで開き、以下のコードを追加する：

body, html { background-color: gray; height: 100%; } #videos { position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } #subscriber { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; } #publisher { position: absolute; width: 360px; height: 240px; bottom: 10px; left: 10px; z-index: 100; border: 3px solid white; border-radius: 3px; }

CSSを保存したら、2つの別々のブラウザ・タブでインデックスを再び開いてください。2つのビデオ・ストリームが表示されるはずですが、1つはより小さく、より大きなビデオ・ストリームの中に入れ子になっています。

上のCSSを見ると、これは #publisher div.この「ピクチャ・イン・ピクチャ」レイアウトは、ビデオチャットでは一般的な方法ですが、CSSを自由に調整して、これらのdivのサイズや位置を好きなだけ弄ってください。

おめでとうございます！基本的なウェブクライアントのセットアップ」チュートリアルを終了しました。
ここで開発したコードを、アプリケーションのクライアント・サイドに適用するために、引き続き弄ったり調整したりすることができる。 サーバーコンポーネント を参照）。サーバーの設定下記参照）。

次のステップ

ここでの作業が終わったら、以下の役立つリソースを活用して、OpenTokアプリケーションの構築と機能強化を続けてください：

サーバーの設定

上記のチュートリアルでは、皆さんに認証情報をハードコードする。しかし、本番環境のアプリケーションでは、 sessionId そして token コード内の値は、アプリケーションサーバーによって生成され、クライアントに渡される必要があります。 本番環境のアプリに認証情報をハードコーディングすべきではない理由をいくつか挙げます：

トークンは（生成時に指定された）一定時間が経過すると有効期限が切れるため、定期的に新しいトークンを生成する必要があります
新しいセッションを動的に作成することはできないため、アプリを利用するすべてのユーザーは1つの「ルーム」に閉じ込められた状態になってしまいます。

ハードコーディングされた値を使ってアプリケーションのテストを続けることもできますが、サーバーをセットアップする段階になったら、その方法にはいくつかあります：

サーバーオプション 1 — ワンクリックで Heroku 上にシンプルな REST サーバーを起動する

これはおそらく、サーバーを立ち上げて稼働させる最も手っ取り早い方法ですが、機能には制限があります。以下の「Heroku」ボタンをクリックするだけで、Herokuのウェブサイトに遷移し、OpenTokのAPIキーとAPIシークレットの入力を求められます。これらの値は、プロジェクトページで取得できます。 Video APIアカウント. HerokuのAccountをお持ちでない場合は、登録する必要があります（無料です）。

コードを詳しく見てみたいですか？ 上のボタンをクリックすると、 learning-opentok-php GitHubのリポジトリ。リポジトリにアクセスして、コードや追加のドキュメントを確認してください。また、リポジトリをフォークして、デプロイ前に変更を加えることも可能です。

Node.jsの方がお好みですか？ をご覧ください。 learning-opentok-node Node.js を使用した同機能のリポジトリ（Heroku デプロイボタンを含む）。

Herokuにサーバー（PHPまたはNode.js）をデプロイしたら、クライアント側のコードに数行追加する必要があります。あなたの app.js ファイルを開くと、コメントが表示されるはずです // (optional) add server code here.

以下のコードをコピーして、それを用いて置き換えてください // (optional) add server code here そして、その initializeSession() app.js ファイル内で次のように呼び出します：

// (optional) add server code here var SERVER_BASE_URL = 'https://YOURAPPNAME.herokuapp.com'; fetch(SERVER_BASE_URL + '/session').then(function(res) { return res.json() }).then(function(res) { apiKey = res.apiKey; sessionId = res.sessionId; token = res.token; initializeSession(); }).catch(handleError);

以下を置き換える必要があります https://YOURAPPNAME.herokuapp.com 実際のHerokuアプリのURLをここに入力してください。このURLは、Herokuのウェブサイトにあるアプリページで確認できます。

上記のコードでは、Ajax を使用して /セッション エンドポイント (https://YOURAPPNAME.herokuapp.com/session)、これにより、セッションID、トークン、およびAPIキーがJSONデータとしてフォーマットされたHTTPレスポンスが返されるはずであり、その内容はその後、対応する変数に代入されます。

これは /session エンドポイントは常に同じセッションIDを返しますが、呼び出されるたびに新しいトークンを生成します。これにより、各クライアントは一意のトークンを受け取ることになります。

サーバーオプション 2 — サーバー SDK を使用して一から構築する

オプション 1 では、クライアントへの認証情報の送信に REST エンドポイントを使用していますが、これは OpenTok を使用してサーバーを実装する多くの方法のうちの 1 つにすぎません。より高度なカスタマイズをご希望の場合は、OpenTok のサーバー SDK のドキュメントお好みのサーバーサイド言語用（利用可能な言語は PHP, Node.js, ジャワ, .NET, パイソンそしてルビー). このドキュメントでは、セットアップの手順や、セッションやトークンを生成するために必要なさまざまな方法、およびその他のサーバーサイド機能について解説しています。

サーバーオプション 3 — Web 用のクライアント・サーバー型サンプルアプリのうちの 1 つを使用する

各サーバーサイド言語（PHP、Node.js、Java、.NET、Python、Ruby）について、クライアント・サーバー間のコードがすべて実装された基本的なサンプルアプリを開発しました。これらにはクライアント側のコードも含まれているため、このチュートリアルで設定したクライアント側のコードは必要ありません。

ご希望の言語のサンプルアプリをご覧になるには、当社のコードサンプルページそして、以下の項目にあるサーバーサイド言語の中から1つを選択してください Web用のシンプルなクライアント・サーバーシステム.