Application vidéo de base avec Angular et les composants web.

Dans ce tutoriel, vous apprendrez à intégrer des fonctionnalités vidéo de base dans une application Angular à l'aide des composants Web de l'API Video de Vonage.

Grâce à l'application, vous pourrez publier votre audio et votre vidéo dans un appel vidéo tout en vous abonnant à l'audio et à la vidéo des autres participants.

Si vous souhaitez suivre le processus sans construire l'application vous-même, le projet complet est disponible à l'adresse suivante GitHub.

Vue d'ensemble

Ce quickstart vous guide à travers :

• Importation de CUSTOM_ELEMENTS_SCHEMA
• Inclusion du Client Client SDK de Vonage dans votre projet
• Installation des composants Web
• Placement des composants Web
• Obtenir des références aux composants Web
• Générer des informations d'identification
• Création d'une session
• (Facultatif) Définition des propriétés

Avant de commencer

Avant de commencer ce tutoriel, il convient de remplir les conditions préalables suivantes, si ce n'est pas déjà fait :

• un Account Vonage

Partie 1 : Importation de CUSTOM_ELEMENTS_SCHEMA

Ce schéma permet au compilateur Angular d'autoriser les composants Web dans votre application au lieu de lancer une erreur chaque fois qu'il rencontre un élément HTML non reconnu.

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

inclure dans @Component

schemas: [CUSTOM_ELEMENTS_SCHEMA];

Partie 2 : Inclusion du Vonage Client Client SDK dans votre projet

Le Client SDK de Vonage Video permet à votre application de communiquer avec l'API et l'infrastructure de Vonage Video.

Placez dans votre index.html

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

OU si vous installez la bibliothèque en utilisant npm install --save @vonage/client-sdk-video

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

Partie 3 : Installation des composants Web

Dans ce tutoriel, deux composants Web seront utilisés : <video-publisher> et <video-subscribers>. <video-publisher> publie votre vidéo et votre audio dans l'appel vidéo, où <video-subscribers> s'abonne à la vidéo et à l'audio de tout autre participant et les affiche dans votre application.

Installer dans votre projet

npm i @vonage/video-publisher

npm i @vonage/video-subscribers

Importez ensuite dans votre main.ts dossier de projet

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

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

OU utiliser un CDN et placer dans votre fichier 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>

Partie 4 : Placement des composants Web

Placez maintenant les composants Web dans votre balisage à l'endroit où vous souhaitez les voir apparaître dans votre application.

Par exemple :

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

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

Partie 5 : Références aux composants Web

Pour que votre application puisse définir des propriétés sur les composants Web, vous devez obtenir des références à ces derniers.

@ViewChild('publisher') publisherComponent: ElementRef;

@ViewChild('subscribers') subscribersComponent: ElementRef;

Partie 6 : Générer des informations d'identification

• S'inscrire à ou Se connecter à votre Account.
• Dans le menu de gauche de l'écran tableau de bord, cliquez Applications et sélectionnez une application précédente ou créez-en une nouvelle pour afficher l'identifiant de l'application.

• Assurez-vous que la vidéo est activée

• Rendez-vous sur le site Le terrain de jeu de Video API. Saisissez l'identifiant de l'Applications ou trouvez-le dans le menu déroulant. Vous pouvez laisser les valeurs par défaut pour les autres options. Cliquez sur "Créer".

• Votre identifiant de session et votre jeton seront créés.

Partie 7 : Création d'une session

Une session est essentiellement un appel vidéo. C'est la "salle" où les participants/clients se connectent et interagissent les uns avec les autres.

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

Partie 8 : (Facultatif) Définition des propriétés

Certaines propriétés peuvent être définies sur les composants Web afin d'ajouter ou de modifier les fonctionnalités par défaut.

pubProperties = { ... };

(voir liste complète)

subsProperties = { ... };

(voir liste complète)

Prochaines étapes

C'est tout ! Maintenant que vous avez terminé ce tutoriel, voici quelques ressources supplémentaires.

• Composants Web de l'API Video de Vonage Repo GitHub
• Angular et les composants Web article de blog
• Rejoignez-nous dans l'espace Vonage Communauté Slack