ReactとWeb Componentsを使った基本的なビデオアプリケーション
このチュートリアルでは、Vonage Video API Web Components を使用して、React アプリケーションに基本的なビデオ機能を統合する方法を学びます。
このアプリケーションを使えば、他の参加者の音声やビデオを受信しながら、自分の音声やビデオをビデオ通話に公開することができる。
自分でアプリを作らなくても、完成したプロジェクトを追いかけたい場合は、以下のサイトで入手できる。 ギットハブ.
概要
このクイックスタートでは、その手順を説明します：
- プロジェクトにVonage Video Client SDKを含める
- ウェブコンポーネントのインストール
- ウェブコンポーネントの配置
- ウェブ・コンポーネントへの参照の取得
- クレデンシャルの生成
- セッションの作成
- Webコンポーネントのセッションとトークンの設定
- (オプション）プロパティの設定
始める前に
このチュートリアルを始める前に、まだ完了していない場合は、以下の前提条件を完了してください：
パート1：プロジェクトにVonage Video Client SDKを含める
Vonage Video Client SDKを使用すると、アプリケーションはVonage Video APIおよびインフラストラクチャと通信できます。
index.htmlに配置する
または npm install --save @vonage/client-sdk-video
パート2：ウェブ・コンポーネントのインストール
このチュートリアルでは、2つの Web Components を使用します： <video-publisher> そして <video-subscribers>.<video-publisher>はあなたのビデオとオーディオをビデオ通話に公開し、<video-subscribers>は他の参加者のビデオとオーディオを購読し、あなたのアプリケーションに表示します。
プロジェクトにインストールする
そして、あなたの main.ts プロジェクトファイル
またはCDNを使用し、index.htmlファイルに配置する。
パート3：ウェブ・コンポーネントの配置
次に、Web Componentsをアプリケーションで表示したい場所にマークアップします。
例えば、こうだ：
パート4：ウェブ・コンポーネントへの参照の取得
アプリケーションがWeb Componentsのプロパティを設定できるようにするには、Web Componentsへの参照を取得する必要があります。
パート 5: クレデンシャルの生成
- 会員登録 または ログイン あなたのアカウント
- の左側メニューにある ダッシュボードクリック
Applicationsをクリックし、以前のアプリケーションを選択するか、新規アプリケーションを作成してアプリケーションIDを表示します。
- ビデオが有効になっていることを確認する
- に向かう。 Video APIの遊び場。 アプリケーションIDを入力するか、ドロップダウンで見つけます。他のオプションはデフォルト値のままで構いません。Create」をクリックします。
- セッションIDとトークンが作成されます。
パート6：セッションの作成
セッションとは、基本的にビデオ通話のことです。参加者/クライアントがお互いに接続し、交流する「部屋」です。
第7回：Webコンポーネントのセッションとトークンの設定
次にSessionとTokenの値を設定します。Tokenは部屋への "パス "と考えることができます。
パート8：（オプション）プロパティの設定
ウェブ・コンポーネントには、デフォルトの機能を追加または変更するために設定できるプロパティがいくつかあります。
参照 全リスト)
参照 全リスト)
次のステップ
以上です！このチュートリアルを終えたところで、さらにいくつかのリソースを紹介しよう。
- Video API ウェブコンポーネント GitHubリポジトリ
- リアクトとウェブ・コンポーネント ブログ記事
- Vonageに参加しよう コミュニティ・スラック