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