Archivage vidéo avec l'API Video de Vonage et React

Introduction

L'enregistrement d'une vidéo n'est pas toujours aussi simple que d'appuyer sur la touche d'enregistrement différents projets nécessitent des sorties différentes. Dans ce projet, l'ingénieur en solutions de Vonage Misha Behei présente une application de démonstration qui gère les quatre principales façons d'archiver des sessions vidéo.

TL;DR Consultez le repo.

Modes d'enregistrement multiples, mise en œuvre simplifiée

L'API Video de Vonage offre plusieurs façons d'enregistrer une session vidéo, comme l'archivage audio seulement, l'archivage composé et l'archivage de flux individuels. L'API vidéo de Vonage présente les différentes façons d'archiver tout en présentant l Experience Composer.

Conditions préalables

Avant de commencer, assurez-vous d'avoir

• Node.js installé

• Un compte Video API de Vonage

• Une compréhension de base de React et TypeScript

• Git installé localement

Pour la partie frontale de l'application, il utilise les éléments suivants :

• React UI (cadre d'interface utilisateur) écrit avec TypeScript

• Vite (outil de construction et serveur de développement)

• Interface utilisateur matérielle (bibliothèque de composants d'interface utilisateur)

• SDK JavaScript de l'API Video de Vonage

Pour le backend, il a utilisé Node.js avec Express, écrit en TypeScript (serveur).

Comment ça marche

Cette application utilise l'API Video de Vonage pour démontrer différentes façons d'enregistrer des sessions vidéo. En termes simples, elle permet aux utilisateurs de choisir s'ils veulent faire l'une ou l'autre des choses suivantes :

• Enregistrer uniquement l'audio

• Regrouper tous les participants dans une seule Video

• Séparer les vidéos de chaque participant

• Créez un enregistrement personnalisé avec des éléments interactifs.

Les modes d'archivage

Cette application web d'une seule page présente trois modes d'archivage distincts parallèlement à la fonctionnalité Experience Composer.

Archives audio uniquement

Les archives audio uniquement capturent le flux audio sans composition vidéo. Lorsqu'un utilisateur clique sur Lancer une archive audio uniquementl'application initialise un seul éditeur vidéo. Malgré la publication de la vidéo, seul l'audio est enregistré en raison de la configuration de l'archive audio uniquement.

Archives composées

Les archives composées enregistrent un seul fichier vidéo contenant tous les participants dans une vue unifiée. Lorsqu'un utilisateur clique sur Démarrer l'archive composée, l'application initialise un éditeur vidéo et demande des autorisations de partage d'écran. L'enregistrement qui en résulte combine les séquences de la webcam et de la capture d'écran en un seul fichier.

Archives individuelles

Les archives individuelles séparent les flux vidéo de chaque participant. En cliquant sur Démarrer l'archive individuelle initialise deux éditeurs vidéo : l'un avec le flou d'arrière-plan activé et l'autre sans. Par défaut, le nuage de l'API Video de Vonage fournit des téléchargements sous la forme d'un fichier ZIP unique contenant tous les enregistrements. Ce projet inclut un traitement supplémentaire qui extrait automatiquement le fichier Video et permet aux utilisateurs de lire les fichiers vidéo individuels séparément.

Compositeur d'expérience

Experience Composer génère des vidéos créées sur mesure avec des éléments interactifs et une image de marque. Pour accéder à Experience Composer et l'enregistrer, il faut une URL accessible au public. Pour ce projet, j'ai créé et déployé une application complémentaire, un simple jeu de football qui attribue aléatoirement des buts à l'équipe qui joue à domicile ou à celle qui joue à l'extérieur. Lorsqu'un utilisateur clique sur Démarrer Experience Composer, l'Experience Composer accède à l'URL du jeu et l'enregistre tandis que l'application initialise simultanément un éditeur vidéo. Bien que l'Experience Composer ne soit pas techniquement une fonctionnalité d'archivage, il crée un nouveau flux qui est publié dans la session et est enregistré par la fonctionnalité d'archivage en même temps que l'éditeur vidéo.

Au bas de la page, vous trouverez une liste des archives récentes affichant l'état de l'archive (disponible/expiré/arrêté), le nom de l'archive (qui comprend un fait aléatoire intéressant) et l'identifiant de l'archive avec un lien vers l'inspecteur d'archives de Vonage. Vous pouvez également écouter ou télécharger des enregistrements directement à partir de cette liste.

Notez que les archives de l'API Video de Vonage ne sont disponibles que pendant 72 heures, sauf si un godet de stockage S3 est configuré. Après cette période, l'état des archives passe de disponible à expiréce qui fait que l'enregistrement n'est plus accessible.

Exécution du projet

Si vous voulez l'essayer vous-même, clonez le fichier repo.

Vous aurez besoin de deux .env fichiers

Créer le fichier .env dans le répertoire backend/ et ajoutez les valeurs suivantes :

OPENTOK_API_KEY=your_api_key_here

OPENTOK_API_SECRET=your_api_secret_here

PORT=3345

Créer le fichier .env dans le répertoire frontend/ et ajoutez la valeur VITE_OPENTOK_API_KEY valeur.

Installez les dépendances pour le frontend et le backend en exécutant :

npm install

Pour exécuter la démo de manière autonome à partir de la ligne de commande, exécutez:

npm run dev

Le serveur dorsal sera démarré à l'adresse suivante localhost:3345, et le frontend sera exécuté à localhost:5173.

Conclusion

Et c'est tout ! Ce projet démontre les capacités d'archivage de l'API Video de Vonage, en montrant comment les développeurs peuvent adapter les solutions d'enregistrement à leurs besoins spécifiques, qu'il s'agisse de capturer des sessions audio uniquement, de créer des enregistrements unifiés ou de séparer des flux individuels. L'intégration d'Experience Composer montre comment ajouter une marque personnalisée et des éléments interactifs aux enregistrements. Essayez la démo vous-même pour mieux comprendre comment ces fonctionnalités peuvent être incluses dans vos propres projets.