Vonage Video APIによる1対1のビデオ通話

Vonage Video APIは、あなたが望むビデオ体験のほとんどを作成することができます。開発者が持つ最も一般的なユースケースの1つは、患者と医師、または顧客とクレームアジャスターのような、単純な1対1のビデオセッションの必要性です。

このチュートリアルでは

Vonage Video APIを使えば、すぐに部屋を作って参加者を中に入れることができます。私たちは、あなたがコードを書く必要がないように、私たちの既存のデモを立ち上げて実行する方法を説明しますが、我々はまた、コードがバックグラウンドで何をやっているかを説明します。

デモを見る - コードを書かずにデモをチェックする
デモの仕組み - クライアント側 - クライアント側のコードが行っていること
デモの仕組み - サーバー・サイド - サーバーサイドのコードが行っていること

前提条件

チュートリアルを完了するには

A Vonageアカウント - APIキーとシークレット

デモを見る

コードを書く前にデモをチェックしたい場合は、基本的なビデオ通話がどのように見えるかを試すためのサンプルウェブサーバーとJavaScriptコードを用意しています。すべてのコードはオープンソースで公開されているので、デモを試してみてから、そのコードを使って独自の修正を加えることができます。

Node.jsサーバーの起動

ビデオ・デモでは、認証のためのクライアント・トークンの作成や一般的なセッション管理などを行うバックエンド・サーバーが必要です。好きな言語でこれを構築することができますが、私たちは事前に構築したサーバーを用意しています。 Vonage ビデオ学習サーバー (Node.js) on Code Hub.より開発者向けドキュメント一番上のナビゲーション・バーで "Code Hub "をクリックし、下にスクロールして "Vonage Video Learning Server (Node.js) "のカードを見つける。それをクリックして開いてください。

このプロジェクトが何をするのかの説明が表示される。とりあえず、"Get code "をクリックして、Code Hubオンライン・エディターに読み込ませてみよう。Create a new development environment "をクリックしてください。ワークスペースに "Vonage Video Demo "という名前を付ける。学習サーバーはSIP経由の電話をサポートしているため、このデモには番号を割り当てる必要がある。このデモでは番号を使用しませんが、先に進み、"Assign a number "をクリックして、Vonageから既存の番号を割り当てるか、後のデモで使用するために新しい番号を購入してください。

Code Hubがアプリケーションを自動的に作成し、アプリケーションが使用する公開鍵と秘密鍵の設定も行います。ワークスペースが作成されると、Visual Studio Codeのオンライン版であるコードエディターにドロップされます。このデモの後の部分でコードを見ることができますので、ご自身のプロジェクトに合わせてこのコードを編集してください。

アプリケーションを実行するには、エディター上部の "View "をクリックし、次に "Terminal "をクリックする。これでコマンドラインを開き、コマンドを実行することができる。必要なのは vcr deploy するとコードがデプロイされます。コードがパッケージ化され、Vonage Code Hubサーバー上で実行されるため、しばらく時間がかかります。最後に出力される "インスタンスホストアドレス "をメモしておこう。

すべてが正常に機能していれば、「インスタンス・ホスト・アドレス」にアクセスし、以下のページが表示されるはずだ：

フロントエンドのテスト

バックエンドサーバーは、この1対1のデモを含む、私たちのすべてのビルド済みデモで直接動作します。次のサイトにアクセスしてください。 https://github.com/Vonage-Community/video-api-web-samples/tree/main/Basic Video Chatこれはこのデモのフロントエンド部分のソースコードです。このサンプルでは、URLを持つ2人のユーザーが音声チャットに参加できます。

このデモを実行する最も簡単な方法は、READMEにある「Stackblitzで開く」ボタンをクリックすることだ。

これでStackblitzでプロジェクトが開きます。バックエンドサーバーと同じように、コードを閲覧したり修正したりすることができます。このデモで必要なのは js/config.js ファイルを開き、Code HubインスタンスのURLを SAMPLE_SERVER_BASE_URL 変数である：

ファイルを保存したら、Stackblitzの右側にあるデモ・ビューを更新し、ブラウザがマイクとカメラの許可を求めるはずです。許可すると、サイドバーの下隅にあなたの画像が表示されるはずです。デモ・ペインの上にあるStackblitzのURLをコピーして、モバイル・デバイスや別のコンピューターで閲覧したり、友人に教えたりすれば、誰でもあなたのデモに接続できるはずです！

デモの仕組み

Vonageアプリケーションの設定

ビデオ・アプリケーションを動作させるには、クライアントとサーバーがVonageサーバーと通信する方法が必要です。Code Hub がこれを設定してくれますが、ローカルでコードを実行する場合や、Video API がどのようなものか知りたい場合は、他の API と同じように設定します。Vonageアプリケーションをセットアップして、アプリケーションのすべての設定を行い、認証に必要な項目を生成する必要があります。

に向かう。 Vonageカスタマーダッシュボードにログインしてください。ログインしたら

"ビルド "の下にある "アプリケーション "をクリックする。
"Create a new application "をクリックする。
アプリケーションに "Basic Video Demo "のような名前をつけます。
Generate public and private key（公開鍵と秘密鍵の生成）」をクリックし、ファイルをダウンロードする。 private.key.このファイルは後々のために記録しておくこと。
下にスクロールし、"Video "をオンに切り替えます。今はこれらの値を空にしておきます。
Generate new application "をクリックしてアプリケーションを作成します。

アプリケーションを作成したら、アプリケーションIDを控えておいてください。ローカルでコードを実行する場合は、バックエンドを設定するためにこれが必要になります。Code Hubを使用している場合、サーバーコードはすでにアプリケーションIDと秘密鍵にアクセスしています。

クライアント側

デモのクライアント側部分は、2つの異なる部分から構成されている。ビデオ・フィードを配置するためのいくつかのHTML要素と、ログイン情報を取得し、Vonage Videoサーバーと通信するためのJavaScriptである。

これはブラウザのデモなので、次の場所にあるJavaScript SDKを使用します。 https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jsで、それをHTMLのscriptタグに含める。 index.html.

ルームに人を追加するには、2つの要素だけが必要です。例えば、現在のユーザー、あなたを "パブリッシャー "と呼びます。そして、あなたが "subscribe "する他の参加者を入れる場所が必要です。それらを "subscriber "要素に入れます。

私たちは、以下の2つを作成する。 div のIDを1つ与える。 publisher もう一方のIDは subscriber.ページが訪問されたときや、他のユーザーがビデオ通話に参加したことを検出したときに、JavaScriptでこれらの要素を参照します。

JavaScript側では、まずビデオ通話自体の情報を取得する。ビデオ通話に接続するには、アプリケーションID、セッションID、トークンが必要です。

について アプリケーションID は、クライアントSDKがVonage側のビデオアプリのさまざまな設定を参照するために使用する識別子です。
について セッションID は、接続したい特定のビデオセッションです。1つのApplicationsは、同時に複数のビデオセッションを持つことができるからです。
について トークン は、特定のセッションに特定の権限で参加できるようにするJWT認証トークンです。

セッション ID とトークンを前もって生成することもできますが、現実の世界ではオンデマンドで生成することになります。このコードはその方法を表しています。この情報がどのように生成されるかは後ほど説明しますが、ここではデプロイしたバックエンドサーバから情報を取得します。

接続情報がすべて揃ったら、Vonage Video JavaScript SDK を呼び出す。この SDK は、フロントエンドで Vonage Video API に接続するためのすべての処理を行う。まず OT.initSession().そして、私たちは streamCreated イベント session.on().これにより、他のパブリッシャーからのストリームが作成された時に実行されるコールバックを設定することができます。この場合 session.subscribe() にプッシュする。 subscriber HTMLで設定したdiv.また sessionDisconnected イベントで他のユーザーがいつ切断したかを知ることができるが、このデモでやっているのは、ユーザーが切断したことに気づいたというログを取ることだけだ。

そして publisher オブジェクトを OT.initPublisher().どの div にアタッチするかを指定します (publisher)、いくつかの基本的なフォーマット・オプションがあります。これは、カメラとマイクを Video API に接続します。

そして、次のように呼ぶ。 session.connect() で、サーバーから取得した接続JWTトークンを使ってセッションに接続します。これだけで、2人がルームに参加できる！

サーバーサイド

Vonage Videoアプリケーションのサーバーサイド部分は、セッションの作成、認証トークンの生成、アーカイブの開始や停止などの管理タスクを処理するために使用されます。このデモでは、ユーザがルームに参加できるようにセッションとトークンを作成することだけを考えています。API 自体は REST API であり、どのように呼び出してもかまいません。 Vonage Node SDK これは、すべての認証とHTTPコールを処理します。これを自分のアプリケーションにインストールするには、次のようにする：

デモ・コードにはすでにプリインストールされています。コードをローカルで実行する場合は、以下を実行する必要がある：

をコピーして、すべての依存関係をダウンロードします。 .envcopy という名前の新しいファイルに .env.に必要事項を記入してください。 .env アプリケーションID、ディスク上の秘密鍵の場所、Vonage API Key and Secretなど。

セッションの作成とセッションへの参加

最初にすることは、生成する部屋のセッションがすでにあるかどうかを調べることです。メモリ内の辞書を roomToSessionIdDictionaryもしその部屋にすでにセッションがあれば、辞書からセッションを引き出します。次に、Vonage Video Node SDK を使用して、クライアントトークンを作成します。 vonage.video.generateClientToken()セッションIDと設定を持つオブジェクトを渡す。現時点では、ユーザーを moderator ロールを設定する。そして、設定されたアプリケーションID、セッションID、トークンをフロントエンドに返します。

セッションが存在しない場合は、次のように新しいセッションを作成します。 vonage.video.createSession().これはVonage APIにコンタクトし、ユーザーが接続できるセッションを作成する。このセッションに対する特別な設定はありませんが、ここでアーカイブルールや、ルーティングやピアツーピアのようにセッションをどのように扱うべきかを設定します。そして先ほどと同じようにトークンを作成し、すべての情報をブラウザに送り返す。

結論

このチュートリアルでは、シンプルなOne-on-Oneビデオセッションのバックエンドサーバーに何が入っているのか、ユーザーがセッションに参加し、お互いを見たり聞いたりするためのウェブクライアントの作成方法、そしてVonage Code HubとStack Blitzを使用してサンプルを素早くテストすることがいかに簡単であるかを紹介しました。