Application vidéo de base avec Vue et Web Components

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

• Réglage de compilerOptions.isCustomElement
• 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
• 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 :

• un Account Vonage

Partie 1 : Définir compilerOptions.isCustomElement

Ce schéma permet au compilateur Vue 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. Cela peut varier en fonction de la manière dont vous compilez votre application, comme il est indiqué dans la section la documentation. Pour cette démo, Vite sera utilisé pour la compilation, donc dans votre vite.config.js, cela devrait ressembler à ceci :

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.includes('-')
                }
            }
        })
    ],
})

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 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 ref="publisher"></video-publisher>

<video-subscribers ref="subscribers"></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.

const publisher = ref(null);
const subscribers = ref(null);

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.

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

Partie 8 : 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.value.session = session;
publisher.value.token = token;
subscribers.value.session = session;
subscribers.value.token = token;

Partie 9 : (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.value.properties = { ... };

(voir liste complète)

subscribers.value.properties = { ... };

(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
• Vue et composants Web article de blog
• Rejoignez-nous dans l'espace Vonage Communauté Slack