Vonage Video Express

Avis de dépréciation

Vonage Video Express est désormais obsolète. Bien que la bibliothèque reste disponible pour les intégrations existantes, nous recommandons à tous les nouveaux projets et aux clients souhaitant migrer d'utiliser la librairie In-App Video API de référence.

Pourquoi ce changement ?

Les In-App Video API de référence fournit une base plus robuste, moderne et personnalisable pour la création d'applications vidéo multipartites. Il offre :

  • Meilleures pratiques: Mise en œuvre actualisée des SDK vidéo de base.
  • Une interface utilisateur prête pour la production: Composants hautement personnalisables pour le Web, iOS et Android.
  • Fonctionnalités avancées: Meilleure prise en charge des mises en page complexes et des capacités des navigateurs modernes.

Prochaines étapes :

Pour commencer

Vonage Video Express est une bibliothèque JavaScript qui permet de créer rapidement une application web de vidéoconférence multipartite. multipartite. Elle s'appuie sur l'API Video de Vonage pour JavaScript.

Remarques importantes :

Avant d'utiliser Video Express, veillez à activer l'extension Video Express sur votre Account.

  1. Accédez à votre Video API Account et cliquez sur Paramètres du compte dans le menu de gauche.
  2. Dans la liste des Options supplémentaires de l'Account, trouver Vidéo Express et cliquez sur Ajouter au compte. Suivez ensuite les instructions restantes pour activer l'extension.

Vonage Video Express 1.0 prend actuellement en charge 25 participants simultanés dans une salle. Si vous ajoutez plus de 25 personnes à une session, vous devrez vous assurer que les performances du réseau et du matériel des participants sont suffisantes.

Un démarrage rapide

  1. Installez le paquetage Video Express :
  • Installation à l'aide du npm paquet

    npm i --save @vonage/video-express
  • Nous pouvons également utiliser une balise de script dans la balise <head> de la page HTML, pour inclure Vonage Video Express dans notre application

    <script src="https://static.opentok.com/v1/js/video-express.js"></script>
    
  1. Actuellement, Vonage Video Express n'inclut pas d'interface utilisateur par défaut. Vous devrez donc ajouter des feuilles de style CSS pour styliser les composants de la salle dans votre application :

Pour commencer rapidement, copiez le fichier video-express-styles.css et l'inclure dans votre head section :

<link rel="stylesheet" href="/path/to/video-express-styles.css" media="screen" charset="utf-8">
  1. Ajouter un div à l'intérieur de l'élément body section. Il s'agit de la conteneur d'ambiance. Le SDK ajoutera tous ses composants DOM à l'intérieur de ce conteneur :
<body>
  <div id="roomContainer"></div>
</body>
  1. Utilisez cet extrait de code pour créer une pièce et à rejoindre la visioconférence. Pour créer l'objet « salle », vous devrez fournir votre clé API OpenTok, un identifiant de session OpenTok et un jeton pour la session :
<script type="text/javascript">
  const room = new VideoExpress.Room({
    apiKey: '', // add your OpenTok API key
    sessionId: '', // add your OpenTok Session ID
    token: '', // add your OpenTok token
    roomContainer: 'roomContainer',
  });

  room.join();
</script>

Consultez les guides de développement OpenTok sur Création de la session et Création de jetons.

Plus de ressources

Voir le Référence de l'API Video Express et guide du développeur.

Et découvrez ces exemples d'applications sur GitHub :

  • application-video-express-react-app — Une application de visioconférence multipartite développée avec Video Express et Create React App. Outre les fonctionnalités proposées par Video Express, l'application permet notamment de sélectionner le nom d'une salle et celui d'un participant, d'archiver (enregistrer) les sessions, et bien plus encore.

  • Démonstration de Vonage Video Express iOS et Android — une application qui utilise Video Express dans des vues Web (telles que WKWebView sous iOS et WebView sous Android) pour les applications mobiles.