Einfache Video-Applikation mit Angular und Webkomponenten

In diesem Tutorial lernen Sie, wie Sie grundlegende Videofunktionen mit Hilfe der Vonage Video API Web Components in eine Angular-Anwendung integrieren können.

Mit dieser Anwendung können Sie Ihre Audio- und Videodaten in einem Videoanruf veröffentlichen und gleichzeitig die Audio- und Videodaten anderer Teilnehmer abonnieren.

Wenn Sie mitmachen möchten, ohne die App selbst zu entwickeln, finden Sie das fertige Projekt unter GitHub.

Übersicht

Dieser Schnellstart leitet Sie an:

  • Importieren von CUSTOM_ELEMENTS_SCHEMA
  • Einbindung des Vonage Video Client SDK in Ihr Projekt
  • Installieren der Webkomponenten
  • Platzierung der Webkomponenten
  • Verweise auf die Webkomponenten erhalten
  • Berechtigungsnachweise generieren
  • Erstellen einer Sitzung
  • (Optional) Eigenschaften einstellen

Bevor Sie beginnen

Bevor Sie mit diesem Lernprogramm beginnen, sollten Sie die folgenden Voraussetzungen erfüllen, falls noch nicht geschehen:

Teil 1: Importieren von CUSTOM_ELEMENTS_SCHEMA

Dieses Schema ermöglicht es dem Angular-Compiler, Webkomponenten in Ihrer Anwendung zuzulassen, anstatt einen Fehler zu erzeugen, wenn er auf ein nicht erkanntes HTML-Element trifft.

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

einbeziehen @Component

schemas: [CUSTOM_ELEMENTS_SCHEMA];

Teil 2: Einbindung des Vonage Video Client SDK in Ihr Projekt

Das Vonage Video Client SDK ermöglicht Ihrer Anwendung die Kommunikation mit der Vonage Video API und Infrastruktur.

Platzieren Sie in Ihrer index.html

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

ODER wenn Sie die Bibliothek mit npm install --save @vonage/client-sdk-video

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

Teil 3: Installieren der Webkomponenten

In diesem Tutorium werden zwei Webkomponenten verwendet: <video-publisher> und <video-subscribers>. <video-publisher> veröffentlicht Ihr Video und Audio in dem Videoanruf, während <video-subscribers> die Video- und Audiodaten der anderen Teilnehmer abonniert und in Ihrer Anwendung anzeigt.

Installation in Ihr Projekt

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

Importieren Sie dann in Ihr main.ts Projektdatei

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

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

ODER verwenden Sie ein CDN und platzieren Sie es in Ihrer index.html-Datei

<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>

Teil 4: Platzieren der Webkomponenten

Platzieren Sie nun die Webkomponenten in Ihrem Markup an der Stelle, an der sie in Ihrer Anwendung angezeigt werden sollen.

Zum Beispiel:

<video-publisher #​publisher [session]="session" [token]="token" [properties]="pubProperties"></video-publisher>

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

Teil 5: Verweise auf die Webkomponenten erhalten

Damit Ihre Anwendung Eigenschaften für die Webkomponenten festlegen kann, müssen Sie Verweise auf diese Komponenten erhalten.

@ViewChild('publisher') publisherComponent: ElementRef;

@ViewChild('subscribers') subscribersComponent: ElementRef;

Teil 6: Erzeugung von Berechtigungsnachweisen

Hinweis: In produktiven Applications werden sie vom Server abgerufen mehr Infos. Für diese Demo können Sie entweder einen Video Learning Server (Knotenpunkt oder PHP) und setzen serverURL oder folgen Sie den nächsten Schritten, um sie zu generieren und zu codieren. So erhalten Sie die für die Ausführung der Demo erforderlichen Anmeldedaten:

Screenshot of dashboard with Application ID highlighted
  • Stellen Sie sicher, dass Video aktiviert ist
Screenshot of dashboard with Video section highlighted
  • Besuchen Sie die Die Video API Spielwiese. Geben Sie entweder die Anwendungs-ID ein oder suchen Sie sie in der Dropdown-Liste. Sie können die Standardwerte für die anderen Optionen beibehalten. Klicken Sie auf "Erstellen".
Screenshot of The Video API Playground tool
  • Ihre Sitzungs-ID und Ihr Token werden erstellt.
Screenshot of The Video API Playground tool generated details with the Application ID, Session ID, and Token highlighted in red boxes

Teil 7: Erstellen einer Sitzung

Eine Sitzung ist im Wesentlichen Ihr Videoanruf. Es ist der "Raum", in dem die Teilnehmer/Kunden miteinander in Verbindung treten und interagieren.

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

Teil 8: (Optional) Eigenschaften einstellen

Es gibt einige Eigenschaften, die für die Webkomponenten festgelegt werden können, um Standardfunktionen hinzuzufügen oder zu ändern.

pubProperties = { ... };

(siehe vollständige Liste)

subsProperties = { ... };

(siehe vollständige Liste)

Nächste Schritte

Das war's! Jetzt, wo Sie dieses Tutorial abgeschlossen haben, finden Sie hier einige weitere Ressourcen.