Utilisation d'Experience Composer avec l'API Video de Vonage

Introduction

L'API Experience Composer (EC) API est un outil puissant qui vous permet de capturer la mise en page de votre site Web sous forme de flux publié dans une session Vonage Video API (anciennement OpenTok). Le site Web doit être une URL accessible au public à laquelle l'Experience Composer accèdera et à partir de laquelle il générera un flux.

Par exemple, vous pouvez voir ci-dessous une session Video API de Vonage dont je suis l'hôte et un flux Experience Composer d'une vidéo YouTube publiée dans la session. Le site Web de YouTube est diffusé en continu, ainsi que la vidéo et l'audio de la vidéo YouTube.

Vonage Video API session with Experience Composer stream of Youtube

Cas d'utilisation de Experience Composer

Cet outil peut être particulièrement puissant pour les applications éducatives où il y a des éléments à partager tels qu'un tableau blanc ou une diapositive. Cependant, ces éléments ne seraient pas capturés par l'outil d'archivage de Video API de Vonage. C'est là qu'intervient Experience Composer, qui publiera le flux du tableau blanc, des diapositives, des mises en page personnalisées, des composants dynamiques et d'autres éléments Web dans la session, ce qui permettra de les capturer dans une archive.

Que fera l'application ?

Cet article décrit deux Applications des nombreuses façons dont les développeurs peuvent utiliser Experience Composer :

1. Publication dans une session API Video de Vonage

2. Capture de l'ensemble de la mise en page de votre site Web dans un flux archivé de Video API de Vonage.

L'objectif de mon exemple d'application est d'aider les diffuseurs de vidéos à gagner du temps dans l'édition de leurs vidéos et de leur permettre de passer du temps ailleurs. En utilisant l'outil Experience Composer de Vonage, les diffuseurs peuvent enregistrer leur flux en direct et l'enregistrement vidéo de leur réaction, ainsi que leur propre mise en page personnalisée au même endroit et en même temps. Experience Composer peut être utilisé pour enregistrer l'ensemble de l'application, y compris la mise en page de l'hôte et les vidéos du flux, et après l'enregistrement, il est prêt à être publié pour leur public.

Cet exemple d'application permet au diffuseur de rejoindre une session Vonage Video API et d'envoyer l'URL de son livestream dans la boîte de soumission pour démarrer un Experience Composer. Cela permet au streamer d'agir en tant qu'éditeur avec sa vidéo dans le coin supérieur gauche, et le livestream d'être publié au centre via Experience Composer.

Vonage Video API session with Experience Composer

L'archivage permet d'enregistrer un flux vidéo du site Web à l'aide d'Experience Composer pour capturer à la fois l'utilisateur et le flux en direct, ainsi que tous les éléments CSS et la mise en page. Pour archiver la page web, il faut créer une nouvelle session et un nouveau composant d'expérience en cliquant sur le bouton Démarrer l'archivage CE. Ce nouveau Experience Composer s'abonnera à la session d'origine et publiera dans la nouvelle session qui sera archivée et visible dans l'onglet Voir les archives passées.

Créer un compositeur d'expérience pour s'abonner à votre flux de données

Conditions préalables

1. Un Video API Account de Vonage. Si vous n'avez pas encore de compte, vous devrez en créer un dans le tableau de bord Video API.

2. En outre, vous devrez ajouter le module complémentaire Experience Composer à votre Account et l'activer pour votre projet.

   1. Dans votre Video API Account, cliquez sur Paramètres du compte dans le menu de gauche. Ajoutez ensuite Experience Composer dans la liste des modules complémentaires du compte.

   2. Après avoir activé Experience Composer pour votre Account, activez-le pour votre projet en sélectionnant votre projet dans la liste des projets. Sous Paramètres du projet, configurez Experience Composer.

3. Node.js version >= 17.7.2

4. Opentok version >= 2.14.3

Pour commencer

Commencez par créer un dossier pour le code côté client et un dossier pour le code côté serveur. Je vais me concentrer sur l'aspect côté serveur de l'application ; cependant, n'hésitez pas à faire référence à cet article, Mettre en œuvre une application API Video avec des hooks Reactpour vous aider à construire votre application côté client.

Dans le dossier du serveur, créez un fichier server.js et un package.json. Veillez à télécharger les deux fichiers Node.js et le Video Node SDK à utiliser pour votre projet. Tout le code écrit dans cet article sera inclus dans le fichier server.js, sauf indication contraire.

Création d'un serveur Express

Avant de pouvoir créer un Experience Composer, vous devrez créer un serveur pour l'application.

Tout d'abord, importez toutes les dépendances et stockez les fichiers apiKey et apiSecret dans votre serveur.

const https = require('https');
const express = require('express');
const OpenTok = require('opentok');

const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;

Pour des raisons de commodité, je recommande d'utiliser Express.js pour vous aider à construire le serveur de votre application. Cependant, n'hésitez pas à consulter cet article, 5 façons de construire une API Node.jspour découvrir d'autres façons de construire le serveur de votre application.

Commencez par initialiser votre application Express et instanciez un nouvel objet opentok objet.

const app = express()
var opentok = new OpenTok(apiKey, apiSecret);

Créez ensuite une session Video API de Vonage en faisant un appel à createSession. (Notez que pour archiver votre session, elle doit être acheminée).

opentok.createSession({mediaMode:"routed"},function (err, session) {
 if (err) return console.log(err);
 app.set('sessionId', session.sessionId);
});

Configurez votre serveur pour qu'il fonctionne sur un port inutilisé.

app.listen(process.env.PORT || 3001, function () {
 console.log('Server listening on PORT 3001');
});

Vous devez maintenant créer une requête GET pour envoyer votre Video de Vonage apiKey, sessionId, et token au client.

app.get('/api', (req, res) => {
 var sessionId = app.get('sessionId');

 var token = opentok.generateToken(sessionId);
 app.set('token', token);

 res.json({apiKey:apiKey, sessionId:sessionId, token:token});
});

Enfin, nous pouvons commencer à utiliser Experience Composer !

Création d'un compositeur d'expérience

Pour créer un Experience Composer, vous devez envoyer une requête HTTP POST à l'URL suivante : https://video.api.vonage.com/v2/project/<API_Key>/render/

L'en-tête de la demande doit inclure l'en-tête HTTP X-OPENTOK-AUTH ainsi qu'un jeton Web JSON valide.

Le corps de la demande doit inclure le data de la session de l'API Video de Vonage. id, tokenet d'autres propriétés. Ces propriétés comprennent l'URL d'entrée du client. L'URL doit être accessible au public afin qu'un Experience Composer puisse capturer la page entière.

(Suivre la documentation Documentation REST d'Experience Composer pour plus d'informations)

(Nécessité de remplacer le <API_Key> par la clé API de votre Account et <JSON_Web_Token> par un jeton JWT valide).

app.post('/store-data',(req, res) => {
 //retrieve URL from user input
 let URL= req.body.ecidURL;             
 var ECID = '';

 const data = JSON.stringify({
     "sessionId": (app.get('sessionId')),
     "token": (app.get('token')),
     "url": (URL),
     "maxDuration": 1800,
     "resolution": "1280x720",
     "properties": {
       "name": "Live Stream"
     }
 });

 const options = {
   hostname: 'api.opentok.com',
   port: 443,
   path: '/v2/project/<API_Key>/render',
   method: 'POST',
   headers: {
     'X-OPENTOK-AUTH':<JSON_Web_Token>,
     'Content-Type': 'application/json'
   },
 };

 var body =[];
 const request = https.request(options, response => {
  
   response.on('data', (chunk) => {
     body.push(chunk);
   }).on('end', () => {
     body = Buffer.concat(body).toString();
     var InfoObj = JSON.parse(body);
     ECID = InfoObj.id;
     app.set('experienceComposerId', ECID);
   });
 });

 request.on('error', error => {
   console.error(error);
 });
  request.write(data);
 request.end();
  res.redirect('http://localhost:3000/'); 

});

Une fois cette requête HTTP effectuée, le serveur redirige vers le client.

Vous avez maintenant démarré avec succès un Experience Composer, qui est abonné à votre session Video API de Vonage !

Arrêter un Experience Composer

Pour arrêter ce flux Experience Composer, envoyez une requête HTTP Delete à l'URL suivante :

https://video.api.vonage.com/v2/project/<API_Key>/render/<ExperienceComposerId>/

Cette demande sera très similaire à la demande POST ci-dessus, mais la méthode d'en-tête sera DELETE au lieu de POSTet le corps de la requête ne nécessitera que la session id et token.

app.get('/stopEC', (req, res)=>{
 var experienceComposerId = '';
 experienceComposerId = app.get('experienceComposerId')

 const data = JSON.stringify({
   "sessionId": (app.get('sessionId')),
   "token": (app.get('token')),
   }
});
 const options = {
   hostname: 'api.opentok.com',
   port: 443,
   path: `/v2/project/47525941/render/` + String(experienceComposerId),
   method: 'DELETE',
   headers: {
     'X-OPENTOK-AUTH':(projectJWT),
     'Content-Type': 'application/json'
   },
 };
 const request = https.request(options, response => {
   console.log(`statusCode: ${response.statusCode}`);

   response.on('data', d => {
     process.stdout.write(d);
   });
 });
 request.write(data);
 request.end();
 res.redirect('http://localhost:3000/');
});

Cela devrait arrêter votre flux Experience Composer et le supprimer de votre session Video API de Vonage.

Archiver la mise en page d'une application Web à l'aide d'Experience Composer

Démarrer une archive Experience Composer

Pour archiver votre session actuelle et la présentation du site web, créez une nouvelle session et un nouveau jeton.

Faites un appel au createSession et generateToken et enregistrer la nouvelle session id et token dans votre application express.

opentok.createSession({mediaMode:"routed"},function (err, sessionECArchive) {
  if (err) return console.log(err);
  app.set('sessionIdECArchive', sessionECArchive.sessionId);
 });
 var tokenECArchive = opentok.generateToken(sessionIdECArchive, option);
 app.set('tokenECArchive', tokenECArchive);

Maintenant que nous avons une nouvelle session id et tokennous effectuons le même appel de requête HTTP POST que précédemment pour démarrer un nouvel Experience Composer. Les seuls changements nécessaires sont l'obtention de la nouvelle session id et token que vous avez sauvegardées ci-dessus et de changer le <host_link> à l'URL vers laquelle vous partagez votre site web. (N'oubliez pas que le lien doit être accessible au public, je vous recommande donc de publier votre application sur Heroku ou ngrok). De plus, vous devrez stocker l'Experience Composer id sous un nom différent dans votre application express afin d'avoir accès à cet Experience Composer.

app.post('/startArchivingEC', function(req, res){
 var ECIDArchive = '';

 const data = JSON.stringify({
     "sessionId": (app.get('sessionIdECArchive')),
     "token": (app.get('tokenECArchive')),
     "url": (host_link),
     "maxDuration": 1800,
     "resolution": "1280x720",
     "properties": {
       "name": "Live Stream"
     }
 });

 const options = {
   hostname: 'api.opentok.com',
   port: 443,
   path: '/v2/project/47525941/render',
   method: 'POST',
   headers: {
     'X-OPENTOK-AUTH':(projectJWT),
     'Content-Type': 'application/json'
   },
 };

 var body =[];
 const request = https.request(options, response => {
   response.on('data', (chunk) => {
     body.push(chunk);
   }).on('end', () => {
     body = Buffer.concat(body).toString();
     console.log(body);
     var InfoObj = JSON.parse(body);
     ECID = InfoObj.id;
     console.log(ECIDArchive);
     app.set('ECIDArchive', ECIDArchive);
   });
 });

 request.on('error', error => {
   console.error(error);
 });
  request.write(data);
 request.end();

Vous devriez voir dans votre console que vous avez créé avec succès un nouveau Experience Composer dans la nouvelle session. Nous pouvons maintenant commencer à archiver cette session en appelant la fonction startArchive avec la nouvelle session id. Vous devrez stocker l'archive retournée id dans votre application express afin d'arrêter l'archivage lorsque cela est nécessaire.

setTimeout(() => {
   opentok.startArchive(app.get('sessionIdECArchive'), function (
     err,
     archive
   ) {
     if (err) {
       return console.log(err);
     } else {
       console.log("new archive:" + archive.id);
       app.set('archiveIdEC', archive.id);
     }
   }) }, 5000);
 res.redirect(host_link);
})

Arrêt d'une archive Experience Composer

Pour arrêter l'archivage de votre session actuelle et de la présentation du site web, vous devez arrêter l'Experience Composer en effectuant la même requête HTTP DELETE que celle présentée ci-dessus.

app.post('/stopArchivingEC', function(req, res){
  var ECIDArchive = '';
  ECIDArchive = app.get('ECIDArchive');
  console.log('ECID:    ');
  console.log(ECIDArchive);

  const data = JSON.stringify({
    "sessionId": (app.get('sessionIdECArchive')),
    "token": (app.get('tokenECArchive'))
  });

  const options = {
    hostname: 'api.opentok.com',
    port: 443,
    path: `/v2/project/47525941/render/` + String(ECIDArchive),
    method: 'DELETE',
    headers: {
      'X-OPENTOK-AUTH':(projectJWT),
      'Content-Type': 'application/json'
  },
 };
 
 const request = https.request(options, response => {
   console.log(`statusCode: ${response.statusCode}`);

   response.on('data', d => {
     process.stdout.write(d);
   });
 });
 request.write(data);
 request.end();

Suivi d'un appel à la fonction stopArchive fonction.

opentok.stopArchive(app.get('archiveIdEC'), function (err, archive) {
   if (err) return console.log(err);
   console.log("Stopped archive:" + archive.id);
 });
 res.redirect(host_link);
})

Conclusion

Experience Composer a une grande variété d'Applications. Dans ce tutoriel, nous avons montré qu'il peut être utilisé pour créer un flux d'un site Web tel que des vidéos, des documents, des diapositives, des tableaux blancs ou d'autres fonctionnalités et le publier dans une session Video API de Vonage. En outre, il permet aux utilisateurs de personnaliser entièrement leur propre site Web avec des logos, des composants Web et des mises en page formatées pour capturer l'expérience complète sous la forme d'un flux Experience Composer.

Nous espérons que ce tutoriel vous a aidé à découvrir les cas d'utilisation d'Experience Composer, et comment il peut être appliqué à vos propres projets ! Faites-nous savoir comment vous appréciez Experience Composer sur notre Communauté Vonage Slack ou envoyez-nous un message sur Twitter.