Como usar o Experience Composer com a Video API da Vonage

Introdução

A API do Experience Composer (EC) é uma ferramenta poderosa que permite capturar o layout do seu site como um stream publicado em uma sessão da Video API do Vonage (anteriormente OpenTok). O site precisa ser um URL acessível ao público, ao qual o Experience Composer acessará e a partir do qual gerará um stream.

Por exemplo, abaixo você pode ver uma sessão da Video API da Vonage comigo como anfitrião e uma transmissão do Experience Composer de um vídeo do YouTube publicado na sessão. Ela está transmitindo o site do YouTube, juntamente com o vídeo e o áudio do vídeo do YouTube.

Vonage Video API session with Experience Composer stream of Youtube

Conheça os casos de uso do Composer

Essa ferramenta pode ser especialmente útil para aplicações educacionais nas quais há componentes a serem compartilhados, como um quadro branco ou slides. No entanto, esses componentes não seriam capturados pela ferramenta de arquivamento da Video API da Vonage. É aí que o Experience Composer entra em cena, pois ele publica o fluxo do quadro branco, dos slides, dos layouts personalizados, dos componentes dinâmicos e de outros elementos da web na sessão, permitindo que sejam capturados em um arquivo.

O que o aplicativo fará?

Este artigo descreverá duas aplicações entre as diversas maneiras pelas quais os desenvolvedores podem utilizar o Experience Composer:

1. Publicação em uma sessão da Video API da Vonage

2. Capturar todo o layout do seu site em um fluxo arquivado da Video API da Vonage

O objetivo do meu aplicativo de exemplo é ajudar os streamers de vídeo a economizar tempo na edição de seus vídeos e permitir que dediquem esse tempo a outras atividades. Ao utilizar a ferramenta Experience Composer da Vonage, os streamers podem gravar sua transmissão ao vivo e a reação em vídeo, juntamente com seu próprio layout personalizado, no mesmo local e ao mesmo tempo. O Experience Composer pode ser usado para gravar todo o conteúdo, incluindo o layout do apresentador e os Videos da transmissão, e, após a gravação, o material fica pronto para ser publicado para o público.

Este aplicativo de exemplo permite que o streamer participe de uma sessão da Video API da Vonage e envie a URL de sua transmissão ao vivo na caixa de envio para iniciar o Experience Composer. Isso permite que o streamer atue como editor, com seu vídeo no canto superior esquerdo, e que a transmissão ao vivo seja publicada no centro por meio do Experience Composer.

Vonage Video API session with Experience Composer

O arquivamento permite gravar um fluxo de Video do site usando o Experience Composer para capturar tanto o usuário quanto a transmissão ao vivo, juntamente com todos os elementos CSS e o layout. Para arquivar a página da web, será necessário criar uma nova sessão e um novo Experience Composer clicando no botão “Iniciar arquivamento do EC”. Esse novo Experience Composer se inscreverá na sessão original e publicará na nova sessão, que será arquivada e ficará visível na guia “Exibir arquivos anteriores”.

Criando um Experience Composer para se inscrever no seu stream

Pré-requisitos

1. Um Account da Video API da Vonage. Caso ainda não tenha um Account, você precisará criar um no Painel da Video API.

2. Além disso, você precisará adicionar o complemento Experience Composer à sua Account e ativá-lo para o seu projeto.

   1. Na sua conta da Video API, clique em “Configurações da conta” no menu à esquerda. Em seguida, adicione o Experience Composer à lista de complementos da conta.

   2. Agora, depois de ativar o Experience Composer na sua Account, ative-o para o seu projeto selecionando-o na lista de projetos. Na seção “Configurações do projeto”, configure o Experience Composer.

3. Node.js versão >= 17.7.2

4. Opentok versão >= 2.14.3

Introdução

Comece criando uma pasta para o código do lado do cliente e outra para o código do lado do servidor. Vou me concentrar no aspecto do lado do servidor do aplicativo; no entanto, fique à vontade para consultar este artigo, Implementar um aplicativo de Video API com React Hooks, para ajudar na construção de sua aplicação do lado do cliente.

Na pasta do servidor, crie um arquivo server.js e um package.json. Certifique-se de baixar os dois Node.js e o SDK do Video Node para usar em seu projeto. Todo o código apresentado neste artigo será incluído no arquivo server.js, a menos que seja especificado de outra forma.

Criação de um servidor Express

Antes de criar um Experience Composer, você precisará criar um servidor para o aplicativo.

Primeiro, importe todas as dependências e salve o arquivo apiKey e apiSecret no seu servidor.

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

const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;

Por uma questão de praticidade, recomendo usar Express.js para ajudar a construir o servidor do seu aplicativo. No entanto, fique à vontade para conferir este artigo, 5 maneiras de criar uma API em Node.js, para conhecer outras maneiras de criar o servidor do seu aplicativo.

Comece inicializando seu aplicativo Express e instanciando um novo opentok objeto.

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

Em seguida, crie uma sessão da Video API da Vonage fazendo uma chamada para createSession. (Observe que, para arquivar sua sessão, ela precisa ser roteada).

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

Configure seu servidor para funcionar em uma porta não utilizada.

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

Agora você precisa criar uma solicitação GET para enviar seu Vonage Video apiKey, sessionId, e token para o 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});
});

Finalmente, podemos começar a usar o Experience Composer!

Iniciando o Experience Composer

Para criar um Experience Composer, você precisará enviar uma solicitação HTTP POST para a seguinte URL: https://video.api.vonage.com/v2/project/<API_Key>/render/

O cabeçalho da solicitação deve incluir o cabeçalho HTTP X-OPENTOK-AUTH juntamente com um JSON Web Token válido.

O corpo da solicitação deve incluir o data da sessão da Video API da Vonage id, token, e outras propriedades. Essas propriedades incluem a URL de entrada do cliente. A URL precisa ser acessível ao público para que um Experience Composer possa capturar a página inteira.

(Acesse a documentação do Experience Composer REST para obter mais informações)

(É preciso substituir <API_KEY> pela chave de API do seu Account e <JSON_WEB_TOKEN> por um 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/'); 

});

Após a realização dessa solicitação HTTP, o servidor redirecionará de volta para o cliente.

Agora você iniciou com sucesso um Experience Composer, que está conectado à sua sessão da Video API da Vonage!

Interrompendo um Experience Composer

Para interromper essa transmissão do Experience Composer, envie uma solicitação HTTP DELETE para a seguinte URL:

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

Essa solicitação será muito semelhante à solicitação POST feita acima; no entanto, o método do cabeçalho será DELETE em vez de POST, e o corpo da solicitação exigirá apenas o parâmetro de sessão id e 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/');
});

Isso deve interromper o fluxo do Experience Composer e removê-lo da sua sessão da Video API da Vonage.

Arquivar o layout do aplicativo web usando o Experience Composer

Criando um arquivo do Experience Composer

Para arquivar sua sessão atual e o layout do site, crie uma nova sessão e um novo token.

Ligue para o createSession e generateToken funções e salve a nova sessão id e token no seu aplicativo 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);

Agora que temos uma nova sessão id e token, faça a mesma chamada de solicitação HTTP POST como acima para iniciar um novo Experience Composer. As únicas alterações necessárias são obter a nova sessão id e token que você salvou acima e alterar a <host_link> para uma URL na qual você está compartilhando seu site. (Lembre-se de que o link precisa ser acessível ao público; por isso, recomendo publicar seu aplicativo no Heroku ou ngrok). Além disso, você precisará armazenar o Experience Composer id com um nome diferente em seu aplicativo Express para que você tenha acesso a ele.

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

Você deve ver no console que criou com sucesso um novo Experience Composer na nova sessão. Agora podemos começar a arquivar essa sessão chamando a startArchive função com a nova sessão id. Você precisará armazenar o arquivo retornado id em seu aplicativo Express para interromper o arquivamento quando necessário.

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

Interrompendo um arquivo do Experience Composer

Para interromper o arquivamento da sua sessão atual e do layout do site, você precisará interromper o Experience Composer enviando a mesma solicitação HTTP DELETE mostrada acima.

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 por uma chamada à stopArchive função.

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

Conclusão

O Experience Composer possui diversas aplicações. Neste tutorial, mostramos que ele pode ser usado para criar um fluxo de um site — como vídeos, documentos, slides, quadros brancos ou outros recursos — e publicá-lo em uma sessão da Video API da Vonage. Além disso, ele permite que os usuários personalizem totalmente seu próprio site com logotipos, componentes da web e layouts formatados para capturar a experiência completa na forma de uma transmissão do Experience Composer.

Esperamos que este tutorial tenha ajudado você a conhecer os casos de uso do Experience Composer e como ele pode ser aplicado aos seus próprios projetos! Conte para a gente o que você está achando do Experience Composer na nossa Slack da Comunidade Vonage ou envie-nos uma mensagem no Twitter.