Uso de Experience Composer con Video API de Vonage

Introducción

El sitio API de Experience Composer (EC) es una poderosa herramienta que te permite capturar el diseño de tu sitio web como una transmisión publicada en una sesión de la Video API de Vonage (anteriormente OpenTok). El sitio web debe ser una URL de acceso público a la que Experience Composer accederá y desde la cual generará una transmisión.

Por ejemplo, a continuación puedes ver una sesión de Video API de Vonage conmigo como anfitrión y una transmisión de Experience Composer de un video de YouTube publicado en la sesión. Está transmitiendo el sitio web de YouTube, junto con el video y el audio del video de YouTube.

Vonage Video API session with Experience Composer stream of Youtube

Casos prácticos de Experience Composer

Esta herramienta puede ser especialmente poderosa para aplicaciones educativas donde hay componentes para compartir, como una pizarra o una diapositiva. Sin embargo, estos componentes no serían capturados por la herramienta de archivo de la Video API de Vonage. Aquí es donde entra en juego Experience Composer, ya que publicará la secuencia de la pizarra, las diapositivas, los diseños personalizados, los componentes dinámicos y otros elementos web en la sesión, lo que permitirá capturarlos en un archivo.

¿Qué hará la aplicación?

En este artículo se describen dos aplicaciones de las muchas formas en que los desarrolladores pueden utilizar Experience Composer:

1. Publicación en una sesión de Video API de Vonage

2. Captura de todo el diseño de tu sitio web en una transmisión archivada de Vonage Video API

El objetivo de mi aplicación de muestra es ayudar a los streamers de Video a ahorrar tiempo editando sus videos y permitirles dedicar tiempo a otras cosas. Al usar la herramienta Experience Composer de Vonage, los streamers pueden grabar su transmisión en vivo y la grabación de video de su reacción, junto con su propio diseño personalizado en la misma ubicación al mismo tiempo. Experience Composer puede usarse para grabar toda la aplicación, incluido el diseño del anfitrión y los videos de la transmisión, y luego de la grabación, está lista para publicarse para su audiencia.

Esta aplicación de muestra permite que la persona que transmite se una a una sesión de la Video API de Vonage y envíe la URL de su transmisión en vivo en el cuadro de envío para iniciar Experience Composer. Esto permite que la persona que transmite actúe como editor con su video en la esquina superior izquierda y que la transmisión en vivo se publique en el centro a través de Experience Composer.

Vonage Video API session with Experience Composer

Archivar permite grabar una secuencia de vídeo de la página web utilizando Experience Composer para capturar tanto el usuario como la secuencia en directo, junto con todos los elementos CSS y el diseño. Para archivar la página web, es necesario crear una nueva sesión y un nuevo Experience Composer pulsando el botón Iniciar archivo EC. Este nuevo Experience Composer se suscribirá a la sesión original y publicará en la nueva sesión, que quedará archivada y visible en la pestaña Ver archivos anteriores.

Creación de un Experience Composer para suscribirse a su Stream

Requisitos previos

1. Una cuenta de Video API de Vonage. Si aún no tienes una Account, deberás crear una en el Panel de Video API.

2. Además, deberá añadir el complemento Experience Composer a su Account y habilitarlo para su proyecto.

   1. En su cuenta de Video API, haga clic en Configuración de la cuenta en el menú de la izquierda. A continuación, añade Experience Composer en la lista de complementos de la Account.

   2. Después de habilitar Experience Composer para su Account, habilítelo para su proyecto seleccionando su proyecto en la lista de proyectos. En Ajustes del proyecto, configure Experience Composer.

3. Node.js versión >= 17.7.2

4. Opentok versión >= 2.14.3

Primeros pasos

Comienza creando una carpeta para el código del lado del cliente y otra para el código del lado del servidor. Me voy a centrar en el aspecto del lado del servidor de la aplicación, sin embargo, no dude en hacer referencia a este artículo, Implementación de una Video API con React Hookspara ayudarte a crear tu aplicación cliente.

En la carpeta del servidor, crea un archivo server.js y un package.json. Asegúrate de descargar ambos archivos Node.js y el SDK de Video Node para utilizarlos en tu proyecto. Todo el código escrito en este artículo se incluirá en el archivo server.js, a menos que se especifique lo contrario.

Creación de un servidor Express

Antes de crear un Experience Composer, deberá crear un servidor para la aplicación.

En primer lugar, importa todas las dependencias y guarda los archivos apiKey y apiSecret en tu servidor.

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

const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;

Por comodidad, recomiendo utilizar Express.js para ayudar a construir el servidor de tu aplicación. Sin embargo, no dudes en consultar este artículo, 5 Maneras de Construir una API Node.jspara ver otras formas de construir el servidor de tu aplicación.

Comienza inicializando tu aplicación Express e instanciando un nuevo objeto opentok nuevo.

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

A continuación, crea una sesión de la Video API de Vonage realizando una llamada a createSession. (Ten en cuenta que para archivar tu sesión, es necesario enrutarla).

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

Configure su servidor para que funcione en un puerto no utilizado.

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

Ahora necesitas crear una solicitud GET para enviar tu Vonage Video apiKey, sessionIdy token al cliente.

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});
});

Por fin podemos empezar a utilizar Experience Composer.

Iniciar un Compositor de Experiencias

Para crear un Experience Composer, deberá realizar una solicitud HTTP POST a la siguiente URL: https://video.api.vonage.com/v2/project/<API_Key>/render/

El encabezado de la solicitud debe incluir el encabezado HTTP X-OPENTOK-AUTH junto con un token web JSON válido.

El cuerpo de la solicitud debe incluir el data de la sesión de la Video API de Vonage id, tokeny otras propiedades. Estas propiedades incluyen la URL de entrada del cliente. La URL debe ser de acceso público para que Experience Composer pueda capturar la página completa.

(Siga la documentación REST de Experience Composer para obtener más información)

(Debe sustituir <API_Key> por la clave de API de su Account y <JSON_Web_Token> por un token JWT válido)

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/'); 

});

Una vez realizada esta petición HTTP, el servidor redirigirá de nuevo al cliente.

Ahora has iniciado correctamente un Experience Composer, ¡que está suscripto a tu sesión de Video API de Vonage!

Detener un Experience Composer

Para detener este flujo de Experience Composer, envíe una solicitud HTTP Delete a la siguiente URL:

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

Esta solicitud será muy similar a la solicitud POST realizada anteriormente, sin embargo, el método de cabecera será DELETE en lugar de POSTy el cuerpo de la petición sólo requerirá la sesión id y 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/');
});

Esto debería detener tu transmisión de Experience Composer y eliminarla de tu sesión de Video API de Vonage.

Archivar el Diseño de Aplicaciones Web Usando Experience Composer

Iniciar un archivo de Experience Composer

Para archivar la sesión actual y el diseño del sitio web, cree una nueva sesión y un nuevo token.

Realice una llamada al createSession y generateToken y guarda la nueva sesión id y token en tu aplicación exprés.

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);

Ahora que tenemos una nueva sesión id y tokenrealice la misma llamada de solicitud HTTP POST que la anterior para iniciar un nuevo Experience Composer. Los únicos cambios necesarios son obtener la nueva sesión id y token que guardó anteriormente y cambiar <host_link> por la URL a la que está compartiendo su sitio web. (Recuerda que el enlace debe ser de acceso público, por lo que te recomiendo que publiques tu aplicación en Heroku o ngrok). Además, tendrás que almacenar el Experience Composer id con un nombre diferente en su aplicación express para poder acceder a este 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();

Debería ver en su consola que ha creado con éxito un nuevo Experience Composer en la nueva sesión. Ahora podemos empezar a archivar esta sesión llamando a la función startArchive con la nueva sesión id. Deberá almacenar el archivo devuelto id devuelto en su aplicación express para detener el archivo cuando sea necesario.

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);
})

Detener un archivo de Experience Composer

Para dejar de archivar la sesión actual y el diseño del sitio web, deberá detener Experience Composer realizando la misma solicitud HTTP DELETE que se muestra más arriba.

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();

Seguido de una llamada a la función stopArchive función

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

Conclusión

Experience Composer tiene una variedad de aplicaciones. En este tutorial, hemos demostrado que se puede usar para crear una secuencia de un sitio web como videos, documentos, diapositivas, pizarras u otras funciones y publicarla en una sesión de Video API de Vonage. Además, permite a los usuarios personalizar completamente su propio sitio web con logotipos, componentes web y diseños formateados para capturar la experiencia completa en forma de una secuencia de Experience Composer.

Esperamos que este tutorial te haya ayudado a conocer los casos de uso de Experience Composer y cómo puedes aplicarlo a tus propios proyectos. Cuéntanos cómo estás disfrutando de Experience Composer en nuestro Slack de la comunidad de Vonage o envíanos un mensaje a Twitter.