Использование Experience Composer с Vonage Video API

Введение

Experience Composer (EC) API — это мощный инструмент, который позволяет вам записывать макет вашего веб-сайта в виде потока, опубликованного в сеансе Vonage Video API (ранее OpenTok). Веб-сайт должен быть общедоступным URL-адресом, к которому будет обращаться Experience Composer и из которого он будет генерировать поток.

Например, ниже вы можете увидеть сеанс Vonage Video API со мной в качестве хоста и поток Experience Composer для видео YouTube, опубликованного в сеансе. Он транслирует веб-сайт YouTube, а также видео и аудио из видео YouTube.

Примеры использования Composer

Этот инструмент может быть особенно мощным для образовательных приложений, где есть компоненты для совместного использования, такие как доска или слайд. Однако эти компоненты не будут захвачены инструментом архивации Vonage Video API. Именно здесь появляется Experience Composer, поскольку он будет публиковать поток доски, слайдов, пользовательских макетов, динамических компонентов и других веб-элементов в сеансе, что позволяет записывать их в архив.

Что будет делать приложение

В этой статье описываются два приложения из множества способов, которыми разработчики могут использовать Experience Composer:

Публикация в сеанс Vonage Video API
Захват всего макета вашего веб-сайта в архивном потоке Vonage Video API

Цель моего примера приложения — помочь видеостримерам сэкономить время на редактировании своих видео и позволить им проводить время в другом месте. Используя инструмент Vonage Experience Composer, стримеры могут записывать свою прямую трансляцию и видеозапись своей реакции вместе со своим собственным макетом в одном и том же месте в одно и то же время. Experience Composer можно использовать для записи всего приложения, включая макет хоста и потоковое видео, и после записи оно готово к публикации для своей аудитории.

Этот пример приложения позволяет стримеру присоединиться к сеансу Vonage Video API и отправить URL-адрес своей прямой трансляции в поле отправки для запуска Experience Composer. Это позволяет стримеру выступать в роли издателя со своим видео в верхнем левом углу, а прямую трансляцию публиковать в центре через Experience Composer.

Архивация позволяет записывать видеопоток веб-сайта с помощью Experience Composer, чтобы захватить как пользователя, так и прямую трансляцию, а также все элементы CSS и макет. Чтобы заархивировать веб-страницу, необходимо создать новый сеанс и создать Experience Composer, нажав кнопку Start Archiving EC. Этот новый компоновщик опыта подпишется на исходный сеанс и опубликует новый сеанс, который будет заархивирован и виден на вкладке «Просмотр прошлых архивов».

Создание компоновщика опыта для подписки на ваш поток

Предпосылки

Аккаунт Vonage Video API. Если у вас еще нет учетной записи, вам необходимо создать ее в Video API Dashboard.
Кроме того, вам нужно будет добавить надстройку Experience Composer в свою учетную запись и включить ее для своего проекта.
В своей учетной записи API видео нажмите «Настройки учетной записи» в меню слева. Затем добавьте Experience Composer в список надстроек учетной записи.
Теперь, после включения Experience Composer для своей учетной записи, включите его для своего проекта, выбрав свой проект в списке проектов. В настройках проекта настройте Experience Composer.
Версия Node.js ›= 17.7.2
Версия Опенток ›= 2.14.3

Начиная

Начните с создания папки для клиентского кода и папки для серверного кода. Я сосредоточусь на аспекте приложения на стороне сервера; тем не менее, не стесняйтесь ссылаться на эту статью Внедрение приложения Video API с помощью React Hooks, чтобы помочь вам создать приложение на стороне клиента.

В папке сервера создайте файл server.js и package.json. Обязательно загрузите Node.js и Video Node SDK, чтобы использовать их в своем проекте. Весь код, написанный в этой статье, будет включен в файл server.js, если не указано иное.

Создание экспресс-сервера

Прежде чем вы сможете создать Experience Composer, вам необходимо создать сервер для приложения.

Во-первых, импортируйте все зависимости и сохраните apiKey и apiSecret вашего проекта на своем сервере.

const https = require('https');
const express = require('express');
const OpenTok = require('opentok');
const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;

Для удобства я рекомендую использовать Express.js, чтобы помочь построить сервер вашего приложения. Тем не менее, не стесняйтесь ознакомиться с этой статьей 5 способов создания API Node.js, чтобы узнать о других способах создания сервера вашего приложения.

Начните с инициализации приложения Express и создания экземпляра нового объекта opentok.

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

Затем создайте сеанс Vonage Video API, выполнив вызов createSession. (Обратите внимание, что для того, чтобы заархивировать сеанс, его необходимо маршрутизировать).

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

Настройте свой сервер для работы на неиспользуемом порту.

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

Теперь вам нужно создать запрос GET, чтобы отправить видео Vonage apiKey, sessionId и token клиенту.

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

Наконец-то мы можем начать использовать Experience Composer!

Запуск компоновщика опыта

Чтобы создать Experience Composer, вам нужно будет сделать HTTP-запрос POST по следующему URL-адресу: https://api.opentok.com/v2/project/<API_Key>/render/

Заголовок запроса должен включать HTTP-заголовок X-OPENTOK-AUTH вместе с допустимым веб-токеном JSON.

Тело запроса должно включать data id, token и другие свойства сеанса Vonage Video API. Эти свойства включают входной URL-адрес от клиента. URL-адрес должен быть общедоступным, чтобы компоновщик опыта мог захватить всю страницу.

(Для получения дополнительной информации см. документацию Experience Composer REST)

(Необходимо заменить ‹API_Key› ключом API вашей учетной записи и ‹JSON_Web_Token› действительным токеном JWT)

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

После того, как этот HTTP-запрос будет сделан, сервер перенаправит обратно клиенту.

Теперь вы успешно запустили Experience Composer, который подписан на ваш сеанс Vonage Video API!

Остановка компоновщика опыта

Чтобы остановить этот поток Experience Composer, отправьте HTTP-запрос на удаление по следующему URL-адресу:

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

Этот запрос будет очень похож на запрос POST, сделанный выше, однако метод заголовка будет DELETE вместо POST, а для тела запроса потребуется только сеанс id и 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/');
});

Это должно остановить ваш поток Experience Composer и удалить его из сеанса Vonage Video API.

Архивация макета веб-приложения с помощью Experience Composer

Запуск архива Experience Composer

Чтобы заархивировать текущий сеанс и макет веб-сайта, создайте новый сеанс и токен.

Вызовите функции createSession и generateToken и сохраните новый сеанс id и token в своем экспресс-приложении.

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

Теперь, когда у нас есть новые сеансы id и token, выполните тот же вызов HTTP-запроса POST, что и выше, чтобы запустить новый компоновщик опыта. Единственные необходимые изменения — это получение нового сеанса id и token, которые вы сохранили выше, и изменение <host_link> на URL-адрес, на который вы делитесь своим веб-сайтом. (Помните, что ссылка должна быть общедоступной, поэтому я бы рекомендовал опубликовать ваше приложение на Heroku или ngrok). Кроме того, вам нужно будет сохранить компоновщик опыта id под другим именем в вашем экспресс-приложении, чтобы у вас был доступ к этому компоновщику опыта.

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

Вы должны увидеть в своей консоли, что вы успешно создали новый компоновщик опыта в новом сеансе. Теперь мы можем начать архивировать этот сеанс, вызвав функцию startArchive с новым сеансом id. Вам нужно будет сохранить возвращенный архив id в своем экспресс-приложении, чтобы при необходимости остановить архив.

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

Остановка архива компоновщика опыта

Чтобы прекратить архивирование текущего сеанса и макета веб-сайта, вам необходимо остановить компоновщик опыта, выполнив тот же HTTP-запрос DELETE, как показано выше.

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

Затем следует вызов функции stopArchive.

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

Заключение

Experience Composer имеет множество приложений. В этом руководстве мы показали, что его можно использовать для создания потока веб-сайта, такого как видео, документы, слайды, доски или другие функции, и публикации его в сеансе Vonage Video API. Кроме того, он позволяет пользователям полностью настраивать свой собственный веб-сайт с помощью логотипов, веб-компонентов и форматированных макетов, чтобы получить полный опыт в форме потока Experience Composer.

Надеемся, что это руководство помогло вам изучить варианты использования Experience Composer и то, как его можно применить к вашим собственным проектам! Дайте нам знать, как вам нравится Experience Composer, в нашем Vonage Community Slack или отправьте нам сообщение в Twitter.

Первоначально опубликовано на https://developer.vonage.com/en/blog/experience-composer-sample-application-with-vonage-video-api