Démarrer avec l'application de référence Video de Vonage pour React

Nous voulons que vous puissiez commencer à travailler avec nos API le plus rapidement possible, mais parfois, cela peut sembler être une tâche décourageante. Alors que certaines API ne nécessitent qu'une ou deux lignes de code (je vous regarde), l'API Messages API), d'autres API, de par leur nature même, nécessitent une configuration plus poussée. L'API Video de Vonage peut être l'une des API les plus intimidantes.

Ne craignez rien ! Nous avons non seulement des des exemples de backends et exemple de code frontalmais vous voudrez peut-être voir ou commencer avec une application plus complète. Pour cela, nous avons notre Application de référence Video de Vonage pour React. C'est une application qui est conçue pour être prête à utiliser hors de la boîte afin que vous puissiez apprendre à construire votre propre application ou qui peut être utilisée comme base pour vos propres besoins.

Nous proposons deux façons différentes de vérifier l'application de référence en seulement quelques minutes. À la fin de cet article, vous aurez une version en cours d'exécution de notre Application de référence pour React, soit dans notre produit d'hébergement Cloud Runtime, soit sur votre machine locale.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Exécution sur Vonage Cloud Runtime

Vous pouvez utiliser la plateforme Cloud Runtime de Vonage pour gérer l'exécution de l'application et fournir un hébergement pour l'application pendant que vous regardez avec l'Applications de référence si vous ne voulez pas ou ne pouvez pas exécuter l'application sur votre machine locale. Ceci lance un éditeur dans le navigateur et un système pour déployer votre code. Comme il s'agit d'un éditeur dans le navigateur, il est recommandé d'utiliser Chrome ou un navigateur basé sur Chrome.

Pour exécuter l'application dans le moteur d'exécution Cloud :

1. Rendez-vous sur l'application de référence de l'API vidéo de Application de référence de l'API Video de Vonage pour React sur Cloud Runtime.

2. Cliquez sur "Se connecter pour commencer", si vous n'êtes pas déjà connecté.

3. Cliquez sur l'onglet "Obtenir un code" juste en dessous de l'en-tête de la page.

4. Cliquez sur le bouton "Créer un nouvel environnement de développement".

5. Sélectionnez la région et entrez un nom d'espace de travail, comme "video-reference-demo", puis cliquez sur "Continuer".

6. Cloud Runtime créera pour vous un espace de travail avec un éditeur de code et mettra en place toute l'authentification pour votre projet.

7. Cliquez sur "View" dans la barre de navigation en haut, puis sur "Terminal" pour afficher le terminal de l'espace de travail.

8. Exécutez l'application avec yarn deploy-vcr.

L'éditeur de code de Cloud Runtime peut vous demander d'activer les cookies tiers, et s'il détecte qu'ils sont bloqués, vous pouvez obtenir un pop-up expliquant comment les activer. Cela est dû à l'éditeur web Visual Studio Code lui-même, et le fait de ne pas activer les cookies tiers peut avoir un impact sur l'utilisation de Cloud Runtime. Si cela pose un problème de confidentialité pour vous, veuillez vérifier comment exécuter le code localement ou sur un serveur.

Cloud Runtime va packager le projet, le soumettre à la plateforme d'hébergement et construire l'application. Cette opération peut prendre quelques minutes. Une fois l'opération terminée, vous verrez quelque chose de similaire à ce qui suit :

/-------
| L'instance a été déployée !
| L'instance a été déployée !
| Nom du service de l'instance : neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app
| Adresse de l'hôte de l'instance : https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud
\-------

La toute fin sera une URL vers votre instance en cours d'exécution, dans ce cas, il s'agit de https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud. Vous pouvez copier cette URL, ouvrir un nouvel onglet ou une nouvelle fenêtre et la coller dans la barre d'adresse. Vous devriez voir l'écran de démarrage de l'application de référence :

Vonage Video Reference App for React Landing Page

Vous pouvez maintenant commencer à utiliser l'application de référence pour découvrir toutes les fonctionnalités qu'elle contient et même évaluer si elle peut servir de base à votre projet. Vous pouvez créer une nouvelle salle et vérifier le type de fonctionnalités disponibles pour les réunions vidéo, et même inviter des personnes à se joindre à vous. Presque toutes les fonctionnalités principales de notre plateforme vidéo sont disponibles.

Vous pouvez revenir à Cloud Runtime et examiner le code. Cela vous permettra de personnaliser l'application en fonction de vos propres besoins, ou simplement de voir comment fonctionnent les différentes parties du code.

Si vous apportez des modifications au code, il vous suffit d'exécuter la commande yarn deploy-vcr pour déployer vos modifications sur la plateforme d'hébergement. Notez que l'édition d'un fichier ne sera pas immédiatement disponible, vous devrez déployer le code avant qu'il ne soit utilisable dans le navigateur.

Si vous souhaitez revenir à la vue du code pour le modifier ou le redéployer, vous pouvez vous rendre dans vos Espaces de travail et vous verrez une carte pour votre espace de travail :

Example Instance Card for the Reference App in Cloud Runtime

Vous pouvez accéder au code lui-même en cliquant sur la tuile, mais si vous voulez simplement voir l'instance en cours, vous pouvez cliquer sur le menu kebab (les 3 cercles dans le coin supérieur droit) et cliquer sur "Copier l'URL".

La course au niveau local

Pour fonctionner localement, vous aurez besoin des éléments suivants déjà préinstallés :

• Node.js v22

• Fil

• Git

• Un terminal de ligne de commande

• Une application Vonage et sa clé privée associée

Ces instructions supposent qu'un terminal local soit installé et que vous ayez une connaissance de base de l'utilisation de l'interpréteur de commandes. Les exemples de commandes devraient fonctionner avec un terminal Linux, WSL ou macOS. Si vous utilisez Powershell ou CMD, vous devrez peut-être modifier les commandes.

Vous pouvez créer une Application Vonage via le tableau de bord de Vonage ou en utilisant le CLI de Vonage.

Une fois tous les pré-requis installés :

1. Rendez-vous sur le site de In-App Video Dépôt GitHub

2. Cliquez sur le bouton vert "Code", et dans le menu déroulant qui apparaît, cliquez sur l'icône "Copier" à côté de l'adresse. Si vous êtes connecté à GitHub, il se peut qu'une adresse SSH s'affiche, ou si vous êtes déconnecté, il se peut qu'une adresse HTTPS s'affiche. L'une ou l'autre fonctionnera.

3. Sur votre PC, ouvrez une fenêtre de terminal.

4. Accédez au répertoire dans lequel vous souhaitez installer l'application de référence.

5. Clonez le projet d'application Reference en utilisant git clone et l'adresse que nous venons de copier :

git clone git@github.com:Vonage/vonage-video-react-app.git

1. Changer de répertoire dans le répertoire vonage-video-react-app/ dans le répertoire

2. Copier les fichiers de configuration par défaut, nous utilisons cp dans les machines UNIX.

cp backend/.env.example backend/.env

cp frontend/.env.example frontend/.env

1. Ouvrez le fichier backend/.env/ et modifiez les deux lignes suivantes en utilisant votre ID d'application et votre clé privée. Elles doivent se trouver vers le haut du fichier.

VONAGE_APP_ID=''

VONAGE_PRIVATE_KEY=''

1. Dans la racine du projet cloné, installez les dépendances :

fil

1. Exécutez le serveur de développement :

yarn dev

1. Une fois que l'application a fini de démarrer, elle vous donne une adresse "locale" à visiter. En supposant que rien d'autre n'est en cours d'exécution sur votre machine, vous devriez être en mesure de visiter http://localhost:5173/ et voir l'écran de création de salle :

Explorer et expérimenter

Quelle que soit la façon dont vous décidez d'installer et d'utiliser l'Application de référence, vous avez la liberté d'explorer et d'expérimenter avec le code. Vous pouvez vérifier comment mettre en œuvre diverses options frontales avec React et comment configurer un serveur backend qui gère toutes les fonctions de gestion pour vous.

Conclusion

Envie de discuter avec nous de l'application de référence ? Rejoignez notre communauté de développeurs sur Slackou suivez-nous sur X (anciennement Twitter), ou abonnez-vous à notre lettre d'information aux développeurs. Restez en contact, partagez vos progrès et tenez-vous au courant des dernières nouvelles, astuces et événements pour les développeurs !