Application vidéo de base avec Svelte et Web Components

Dans ce tutoriel, vous apprendrez à intégrer une fonctionnalité vidéo de base dans une application Svelte à 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 :

  • Inclusion du Client Client SDK de Vonage dans votre projet
  • Installation des composants Web
  • Placement des composants Web
  • Générer des informations d'identification
  • Création d'une session
  • Définition de la session et du jeton pour les composants Web
  • (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 :

Partie 1 : Inclure le 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 2 : 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 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 3 : 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 :

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

Note : Dans les applications de production, ils sont extraits du serveur. Plus d'informations. Pour cette démonstration, vous pouvez déployer un serveur d'apprentissage vidéo (Nœud ou PHP) et fixer serverURL ou suivez les étapes suivantes pour les générer et les coder en dur. Pour obtenir les informations d'identification nécessaires à l'exécution de la démo :

  • 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. Screenshot of dashboard with Applications highlighted
Screenshot of dashboard with Application ID highlighted
  • Assurez-vous que la vidéo est activée
Screenshot of dashboard with Video section highlighted
  • 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".
Screenshot of The Video API Playground tool
  • Votre identifiant de session et votre jeton seront créés.
Screenshot of The Video API Playground tool generated details with the Application ID, Session ID, and Token highlighted in red boxes

Partie 5 : 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.

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

Partie 6 : Définition de la session et du jeton pour les composants Web

Nous allons maintenant définir les valeurs de la session et du jeton. Vous pouvez considérer le jeton comme votre "laissez-passer" pour entrer dans la salle.

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

Partie 7 : (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.

publisher.properties = { ... };

(voir liste complète)

subscribers.properties = { ... };

(voir liste complète)

Prochaines étapes

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