AngularとWeb Componentsを使った基本的なビデオアプリケーション

このチュートリアルでは、Vonage Video API Web Components を使用して、基本的なビデオ機能を Angular アプリケーションに統合する方法を学びます。

このアプリケーションを使えば、他の参加者の音声やビデオを受信しながら、自分の音声やビデオをビデオ通話に公開することができる。

自分でアプリを作らなくても、完成したプロジェクトを追いかけたい場合は、以下のサイトで入手できる。ギットハブ.

概要

このクイックスタートでは、その手順を説明します：

CUSTOM_ELEMENTS_SCHEMAのインポート
プロジェクトにVonage Video Client SDKを含める
ウェブコンポーネントのインストール
ウェブコンポーネントの配置
ウェブ・コンポーネントへの参照の取得
クレデンシャルの生成
セッションの作成
(オプション）プロパティの設定

始める前に

このチュートリアルを始める前に、まだ完了していない場合は、以下の前提条件を完了してください：

Vonageアカウント

パート1：CUSTOM_ELEMENTS_SCHEMAのインポート

このスキーマにより、Angularコンパイラは、認識できないHTML要素に遭遇するたびにエラーを投げるのではなく、アプリケーションでWeb Componentsを許可するようになります。

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

に含める @Component

schemas: [CUSTOM_ELEMENTS_SCHEMA];

パート 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

そして、あなたの main.ts プロジェクトファイル

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 #publisher [session]="session" [token]="token" [properties]="pubProperties"></video-publisher>

<video-subscribers #subscribers [session]="session" [token]="token" [properties]="subsProperties"></video-subscribers>

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

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

@ViewChild('publisher') publisherComponent: ElementRef;

@ViewChild('subscribers') subscribersComponent: ElementRef;

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

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

会員登録またはログインあなたのアカウント
の左側メニューにあるダッシュボードクリック Applications をクリックし、以前のアプリケーションを選択するか、新規アプリケーションを作成してアプリケーションIDを表示します。

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：セッションの作成

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

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

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

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

pubProperties = { ... };

参照全リスト)

subsProperties = { ... };