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では以下のようにする：

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('-')
                }
            }
        })
    ],
})

パート 2: Vonage Video Client SDK をプロジェクトに含める

Vonage Video Client SDKを使用すると、アプリケーションはVonage Video APIおよびインフラストラクチャと通信できます。

index.htmlに配置する

<script src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk-video@latest/dist/js/opentok.min.js"></script>

または npm install --save @vonage/client-sdk-video

<script src="node_modules/@vonage/client-sdk-video/dist/js/opentok.min.js"></script>

パート3：ウェブ・コンポーネントのインストール

このチュートリアルでは、2つの Web Components を使用します： <video-publisher> そして <video-subscribers>.<video-publisher>はあなたのビデオとオーディオをビデオ通話に公開し、<video-subscribers>は他の参加者のビデオとオーディオを購読し、あなたのアプリケーションに表示します。

プロジェクトにインストールする

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

その後、プロジェクトにインポートする。

import '@vonage/video-publisher/video-publisher.js';

import '@vonage/video-subscribers/video-subscribers.js';

またはCDNを使用し、index.htmlファイルに配置する。

<script type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-publisher@latest/video-publisher.js/+esm"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/@vonage/video-subscribers@latest/video-subscribers.js/+esm"></script>

パート4：ウェブコンポーネントの配置

次に、Web Componentsをアプリケーションで表示したい場所にマークアップします。

例えば、こうだ：

<video-publisher ref="publisher"></video-publisher>

<video-subscribers ref="subscribers"></video-subscribers>

パート5：ウェブ・コンポーネントへの参照の取得

アプリケーションがWeb Componentsのプロパティを設定できるようにするには、Web Componentsへの参照を取得する必要があります。

const publisher = ref(null);
const subscribers = ref(null);

パート 6: クレデンシャルの生成

注：本番アプリケーションでは、これらの情報はサーバーから取得されます。 詳細情報.このデモでは、Video Learning Server (ノード または PHPをセットする。 serverURL または、次のステップに従って生成し、ハードコードしてください。 デモを実行するために必要な認証情報を取得する：

  • 会員登録 または ログイン あなたのアカウント
  • の左側メニューにある ダッシュボードクリック Applications をクリックし、以前のアプリケーションを選択するか、新規アプリケーションを作成してアプリケーションIDを表示します。 Screenshot of dashboard with Applications highlighted
Screenshot of dashboard with Application ID highlighted
  • ビデオが有効になっていることを確認する
Screenshot of dashboard with Video section highlighted
  • に向かう。 Video APIの遊び場。 アプリケーションIDを入力するか、ドロップダウンで見つけます。他のオプションはデフォルト値のままで構いません。Create」をクリックします。
Screenshot of The Video API Playground tool
  • セッションIDとトークンが作成されます。
Screenshot of The Video API Playground tool generated details with the Application ID, Session ID, and Token highlighted in red boxes

パート7：セッションの作成

セッションとは、基本的にビデオ通話のことです。参加者/クライアントがお互いに接続し、交流する「部屋」です。

const session = OT.initSession(applicationId, sessionId);

パート 8：Webコンポーネントのセッションとトークンの設定

次にSessionとTokenの値を設定します。Tokenは部屋への "パス "と考えることができます。

publisher.value.session = session;
publisher.value.token = token;
subscribers.value.session = session;
subscribers.value.token = token;

パート9：（オプション）プロパティの設定

ウェブ・コンポーネントには、デフォルトの機能を追加または変更するために設定できるプロパティがいくつかあります。

publisher.value.properties = { ... };

参照 全リスト)

subscribers.value.properties = { ... };

参照 全リスト)

次のステップ

以上です！このチュートリアルを終えたところで、さらにいくつかのリソースを紹介しよう。