Einfache Videoanwendung mit Astro- und Webkomponenten

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

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:

  • 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
  • Session und Token für Webkomponenten festlegen
  • (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: 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 Ihrem Layout.astro

<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 2: 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 Ihre Astro-Komponente(n)

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

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

ODER verwenden Sie ein CDN und platzieren Sie es in Ihre Astro-Komponente(n)

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

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

Teil 3: Platzierung 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></video-publisher>

<video-subscribers></video-subscribers>

Teil 4: Verweise auf die Webkomponenten erhalten

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

const videoPublisherEl = document.querySelector('video-publisher');

const videoSubscribersEl = document.querySelector('video-subscribers');

Teil 5: Berechtigungsnachweise generieren

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 6: 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.

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

Teil 7: Session und Token für Webkomponenten festlegen

Jetzt werden wir die Werte für die Sitzung und den Token festlegen. Den Token können Sie sich als Ihren "Passierschein" für den Raum vorstellen.

videoPublisherEl.session = session;  
videoPublisherEl.token = token;
videoSubscribersEl.session = session;
videoSubscribersEl.token = token;

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.

videoPublisherEl.properties = { ... };

(siehe vollständige Liste)

videoSubscribersEl.properties = { ... };

(siehe vollständige Liste)

Nächste Schritte

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