Vonage Video APIによるライブ放送
Vonage Video APIは、あなたが望むビデオ体験のほとんどを作成することができます。開発者が持つ一般的なユースケースの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/Live-Broadcastこれはこのデモのフロントエンド部分のソースコードです。このサンプルでは、URLを持つ2人のユーザーがデモに参加できます。
このデモを実行する最も簡単な方法は、READMEにある「Stackblitzで開く」ボタンをクリックすることだ。
これでStackblitzでプロジェクトが開きます。バックエンドサーバーと同じように、コードを閲覧したり修正したりすることができます。このデモで必要なのは js/config.js ファイルを開き、Code HubインスタンスのURLを SAMPLE_SERVER_BASE_URL 変数である：
ファイルを保存したら、Stackblitzの右側にあるデモ・ビューを更新してください。このサンプルは、ホスト・ビューと、ビデオそのものを見る2つの異なる方法を含むいくつかの部分に分かれている。ここでは、非RTMPブロードキャストに焦点を当てる。
デモの仕組み
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.
ホスト
ホスト・ビューでは、ホストのカメラと、ブロードキャストの開始、低遅延の有効化、ステータスの更新など、さまざまなオプションを制御するためのUIを表示するだけでよい。自分のカメラを表示するには <div> 要素でビデオ要素をホストする：
Hostページの残りの部分はライブ放送のためのボタンと設定です。すべてのオプションはそのままにして、ブロードキャスト・コントロールについて説明します。これらはブロードキャストフィードを開始したり停止したりするためにサーバーアプリケーションを呼び出すための簡単なボタンです。
JavaScriptでの接続は、複数の人が一緒に参加する他のセットアップと比べると最小限のものです。通常はセッションに接続して、すぐにビデオとオーディオのストリームを公開しますが、ブロードキャストの開始と停止を制御するため、2段階で行います。まず、通常のようにセッションに接続します：
ストリームに接続したら、イベント・リスナーを btn-start ボタンを押すと、ストリームが実際にパブリッシュされ、開始されます。ブロードキャストの開始（と終了）はサーバーサイドSDKによって処理されるので、ブロードキャストを開始するためにバックエンドサーバーにリクエストを行います。
この時点で、私たちのホストはブロードキャスト自体を通じて公開され、接続する他の誰でも公開されます。私たちのデモはゲストをサポートしているので、ゲストがミーティングに招待されると、彼らのストリームはVonage Video APIによって自動的にブロードキャストに追加されます。
ブロードキャストの停止はサーバーアプリケーションによって行われるので、バックエンドサーバーでそのルートを素早く呼び出せば、ブロードキャスト自体が停止する。イベントリスナーを btn-stop ボタンがクリックされたときに発火する。
視聴者 - ストリーム放送
視聴者にとっては、ホストのビデオストリームを表示する場所があればよい。視聴者は自分のストリームを公開しないので、フロントエンドのコードはかなり少なくなります。そのため <div> ホストのストリームを保持する。
視聴者は自分のストリームを公開することはないので、JavaScriptは単にストリームに接続し、ブロードキャストによってストリームが作成されるのを待つだけである：
ビューアー - HLS
HLSの実行には <video> 要素の代わりに <div>.代わりに HLS を使用したい場合は、次のようにします。 <video> 要素にソースを追加します。ほとんどのブラウザでは追加の JavaScript が必要になるので、NPM で入手可能な HLS JavaScript ライブラリも含めることにします：
このデモでは、ユーザーがホストからURLを取得し、そのURLにはクエリーパラメーターとしてブロードキャストURLが含まれる。この URL を使用して、ストリームを動画プレーヤにアタッチします。また、すべてのブラウザがすぐに HLS をサポートするわけではないので、HLS がサポートされていることを確認するための基本的なチェックも行います。
サーバーサイド
Vonage Videoアプリケーションのサーバーサイド部分は、セッションの作成、認証トークンの生成、アーカイブの開始や停止などの管理タスクを処理するために使用されます。このデモでは、ユーザがルームに参加できるようにセッションとトークンを作成することだけを考えています。API 自体は REST API であり、どのように呼び出してもかまいません。 Vonage Node SDK これは、すべての認証とHTTPコールを処理します。これを自分のアプリケーションにインストールするには、次のようにする：
npm install -s @vonage/server-sdk
デモ・コードにはすでにプリインストールされています。コードをローカルで実行する場合は、以下を実行する必要がある：
npm install
をコピーして、すべての依存関係をダウンロードします。 .envcopy という名前の新しいファイルに .env.に必要事項を記入してください。 .env アプリケーションID、ディスク上の秘密鍵の場所、Vonage API Key and Secretなど。
ホスト
ホストに moderator ロールを使うので、フロントエンドがクレデンシャルを要求するとき、適切なロールでセッションを作ります。そうでなければ、ライブ放送のホスト用のセッションと、通常のビデオユーザーで moderator の役割を果たす。
トークンの作成に関する詳細情報については、以下をご覧ください。 マンツーマン・ビデオの使用例 セッションの作成方法については、こちらをご覧ください。
ユーザーが実際に放送を開始したいときは、サーバーSDKを使って vonage.video.startBroadcast() メソッドを呼び出して、発行されたストリームをブロードキャストセッションに変換します。そして、そのデータをクライアントに返し、クライアントがブロードキャストを検索し、後でそれを制御するために必要なすべての情報を持つようにする。
ブロードキャストの終了方法はほとんど同じです。 vonage.video.stopBroadcast() メソッドを使って放送を終了する。
視聴者 - ストリーム放送
ブロードキャストでは、視聴者に適切なタイプのコネクショントークンを与えるだけでよい。それ以外のことは、クライアントサイドのコードによってブラウザ内で処理される。
ビューアー - HLS
HLS 経由で視聴する視聴者は、特別な接続情報を必要としない。そのため、トークンを生成するためのサーバーサイドのコードは必要ありません。視聴者に放送の視聴を制限したい場合は、それをアプリケーションに組み込む必要があります。
結論
このチュートリアルでは、ストリームベースの放送とHLSベースの放送の両方のバックエンドサーバーで何が行われているのか、ユーザーが放送を視聴するためのウェブクライアントの作成方法、そしてVonage Code HubとStack Blitzを使用してサンプルを素早くテストすることがいかに簡単かを紹介しました。