Verwendung von Experience Composer mit der Vonage Video API

Einführung

Die Experience Composer (EC) API ist ein leistungsstarkes Tool, mit dem Sie das Layout Ihrer Website als Stream erfassen können, der in einer Vonage Video API (ehemals OpenTok) Sitzung veröffentlicht wird. Die Website muss eine öffentlich zugängliche URL sein, auf die der Experience Composer zugreift und von der er einen Stream generiert.

Unten sehen Sie zum Beispiel eine Vonage Video API-Sitzung mit mir als Gastgeber und einem Experience Composer-Stream eines YouTube-Videos, das in der Sitzung veröffentlicht wurde. Es wird die YouTube-Website zusammen mit dem Video und Audio des YouTube-Videos gestreamt.

Vonage Video API session with Experience Composer stream of Youtube

Experience Composer Anwendungsfälle

Dieses Tool eignet sich besonders für Anwendungen im Bildungsbereich, bei denen Komponenten wie ein Whiteboard oder eine Folie gemeinsam genutzt werden sollen. Diese Komponenten würden jedoch vom Archivierungstool der Vonage Video API nicht erfasst. An dieser Stelle kommt Experience Composer ins Spiel, da es den Stream des Whiteboards, der Folien, der benutzerdefinierten Layouts, der dynamischen Komponenten und anderer Webelemente in der Sitzung veröffentlicht, sodass sie in einem Archiv erfasst werden können.

Was wird die App tun?

In diesem Artikel werden zwei Applications aus den vielen Möglichkeiten beschrieben, die Entwickler mit Experience Composer haben:

1. Veröffentlichen in einer Vonage Video API-Sitzung

2. Erfassung des gesamten Layouts Ihrer Website in einem archivierten Video API-Stream von Vonage

Das Ziel meiner Beispielanwendung ist es, Videostreamern zu helfen, Zeit bei der Bearbeitung ihrer Videos zu sparen und ihnen die Möglichkeit zu geben, ihre Zeit anderweitig zu verbringen. Mit dem Experience Composer-Tool von Vonage können Streamer ihren Live-Stream und die Videoaufzeichnung ihrer Reaktion zusammen mit ihrem eigenen benutzerdefinierten Layout am selben Ort und zur selben Zeit aufzeichnen. Mit Experience Composer kann die gesamte Anwendung aufgezeichnet werden, einschließlich des Layouts des Hosts und der Stream-Videos, und nach der Aufzeichnung kann sie für das Publikum veröffentlicht werden.

Mit dieser Beispielanwendung kann der Streamer einer Vonage Video API-Sitzung beitreten und die URL seines Livestreams in das Eingabefeld für den Start eines Experience Composers senden. Auf diese Weise kann der Streamer mit seinem Video in der oberen linken Ecke als Herausgeber fungieren, während der Livestream über Experience Composer in der Mitte veröffentlicht wird.

Vonage Video API session with Experience Composer

Die Archivierung ermöglicht die Aufzeichnung eines Videostreams der Website mit Experience Composer, um sowohl den Benutzer als auch den Live-Stream sowie alle CSS-Elemente und das Layout zu erfassen. Um die Webseite zu archivieren, muss eine neue Sitzung und ein neuer Experience Composer erstellt werden, indem Sie auf die Schaltfläche "Archivierung starten" klicken. Dieser neue Experience Composer abonniert die ursprüngliche Sitzung und veröffentlicht sie in der neuen Sitzung, die archiviert wird und auf der Registerkarte "Vergangene Archive" sichtbar ist.

Erstellen eines Experience Composers zum Abonnieren Ihres Streams

Voraussetzungen

1. Ein Vonage Video API Account. Wenn Sie noch keinen Account haben, müssen Sie einen im Video API-Dashboard.

2. Außerdem müssen Sie das Add-on Experience Composer zu Ihrem Account hinzufügen und für Ihr Projekt aktivieren.

   1. Klicken Sie in Ihrem Video API-Konto im linken Menü auf Kontoeinstellungen. Fügen Sie dann Experience Composer in der Liste der Account-Add-ons hinzu.

   2. Nachdem Sie Experience Composer für Ihren Account aktiviert haben, aktivieren Sie es für Ihr Projekt, indem Sie Ihr Projekt in der Projektliste auswählen. Konfigurieren Sie Experience Composer unter Projekteinstellungen.

3. Node.js Version >= 17.7.2

4. Opentok Version >= 2.14.3

Erste Schritte

Beginnen Sie mit der Erstellung eines Ordners für den clientseitigen Code und eines Ordners für den serverseitigen Code. Ich werde mich auf den serverseitigen Aspekt der Anwendung konzentrieren; Sie können jedoch gerne auf diesen Artikel verweisen, Implementieren einer Video API Application mit React Hookszu Rate ziehen, um Ihre clientseitige Anwendung zu erstellen.

Erstellen Sie im Server-Ordner eine server.js-Datei und eine package.json. Achten Sie darauf, dass Sie beide Node.js und das Video Node SDK herunter, die Sie für Ihr Projekt verwenden möchten. Der gesamte in diesem Artikel beschriebene Code wird in der Datei server.js enthalten sein, sofern nicht anders angegeben.

Aufbau eines Express-Servers

Bevor Sie einen Experience Composer erstellen können, müssen Sie einen Server für die Anwendung erstellen.

Importieren Sie zunächst alle Abhängigkeiten und speichern Sie Ihre Projekt apiKey und apiSecret auf Ihrem Server.

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

const apiKey = YOUR_API_KEY;
const apiSecret = YOUR_API_SECRET;

Der Einfachheit halber empfehle ich die Verwendung von Express.js zu verwenden, um den Server Ihrer Anwendung zu erstellen. Sie können jedoch auch diesen Artikel lesen, 5 Wege zur Erstellung einer Node.js-APInach, um andere Möglichkeiten zur Erstellung des Servers Ihrer Anwendung kennenzulernen.

Beginnen Sie mit der Initialisierung Ihrer Express-Anwendung und der Instanziierung eines neuen opentok Objekts.

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

Erstellen Sie dann eine Vonage Video API-Sitzung durch einen Aufruf an createSession. (Beachten Sie, dass Ihre Sitzung geroutet werden muss, um sie zu archivieren).

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

Stellen Sie Ihren Server so ein, dass er auf einem unbenutzten Port läuft.

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

Jetzt müssen Sie eine GET-Anfrage erstellen, um Ihr Vonage Video zu senden apiKey, sessionId, und token an den Client zu senden.

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

Endlich können wir mit Experience Composer arbeiten!

Start eines Experience Composers

Um einen Experience Composer zu erstellen, müssen Sie eine HTTP-POST-Anfrage an die folgende URL stellen: https://video.api.vonage.com/v2/project/<API_Key>/render/

Der Header der Anfrage sollte den HTTP-Header X-OPENTOK-AUTH zusammen mit einem gültigen JSON-Web-Token enthalten.

Der Body der Anfrage sollte die data der Vonage Video API Sitzung id, tokenund andere Eigenschaften enthalten. Zu diesen Eigenschaften gehört die Eingabe-URL des Clients. Die URL muss öffentlich zugänglich sein, damit ein Experience Composer die gesamte Seite erfassen kann.

(Befolgen Sie die Experience Composer REST-Dokumentation für weitere Informationen)

(Sie müssen <API_Key> durch den API-Schlüssel Ihres Accounts und <JSON_Web_Token> durch ein gültiges JWT-Token ersetzen)

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

});

Nachdem diese HTTP-Anfrage gestellt wurde, leitet der Server die Anfrage an den Client zurück.

Jetzt haben Sie erfolgreich einen Experience Composer gestartet, der bei Ihrer Vonage Video API-Sitzung abonniert ist!

Anhalten eines Experience Composers

Um diesen Experience Composer-Stream zu beenden, senden Sie eine HTTP-Löschanforderung an die folgende URL:

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

Diese Anfrage ist der obigen POST-Anfrage sehr ähnlich, allerdings lautet die Header-Methode DELETE anstelle von POSTund der Körper der Anfrage benötigt nur die Session id und 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/');
});

Dadurch wird Ihr Experience Composer-Stream gestoppt und aus Ihrer Vonage Video API-Sitzung entfernt.

Archivierung des Layouts von Webanwendungen mit Experience Composer

Starten eines Experience Composer-Archivs

Um Ihre aktuelle Sitzung und das Layout Ihrer Website zu archivieren, erstellen Sie eine neue Sitzung und ein neues Token.

Rufen Sie die createSession und generateToken auf, und speichern Sie die neue Sitzung id und token in Ihrer Express-Anwendung.

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

Da wir nun eine neue Sitzung haben id und tokenhaben, führen Sie den gleichen HTTP-POST-Aufruf wie oben aus, um einen neuen Experience Composer zu starten. Die einzigen erforderlichen Änderungen sind das Abrufen der neuen Sitzung id und token die Sie oben gespeichert haben, abzurufen und die <host_link> in die URL ändern, unter der Sie Ihre Website freigeben wollen. (Denken Sie daran, dass der Link öffentlich zugänglich sein muss, daher würde ich empfehlen, Ihre Anwendung auf Heroku oder ngrok). Außerdem müssen Sie den Experience Composer id unter einem anderen Namen in Ihrer Express-App speichern, damit Sie Zugriff auf diesen Experience Composer haben.

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

Sie sollten in Ihrer Konsole sehen, dass Sie erfolgreich einen neuen Experience Composer in der neuen Sitzung erstellt haben. Jetzt können wir mit der Archivierung dieser Sitzung beginnen, indem wir die startArchive Funktion mit der neuen Sitzung aufrufen id. Sie müssen das zurückgegebene Archiv id in Ihrer Express-Anwendung speichern, um das Archiv bei Bedarf zu stoppen.

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

Anhalten eines Experience Composer-Archivs

Um die Archivierung Ihrer aktuellen Sitzung und Ihres Website-Layouts zu beenden, müssen Sie den Experience Composer beenden, indem Sie die gleiche HTTP-DELETE-Anforderung wie oben gezeigt durchführen.

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

Gefolgt von einem Aufruf der stopArchive Funktion.

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

Schlussfolgerung

Experience Composer hat eine Vielzahl von Applications. In diesem Tutorial haben wir gezeigt, dass es verwendet werden kann, um einen Stream einer Website wie Videos, Dokumente, Folien, Whiteboards oder andere Funktionen zu erstellen und in einer Vonage Video API-Sitzung zu veröffentlichen. Außerdem können Benutzer ihre eigene Website mit Logos, Webkomponenten und formatierten Layouts vollständig anpassen, um das gesamte Erlebnis in Form eines Experience Composer-Streams zu erfassen.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, die Anwendungsfälle des Experience Composers kennenzulernen und zu erfahren, wie Sie ihn in Ihren eigenen Projekten einsetzen können! Lassen Sie uns wissen, wie Ihnen Experience Composer gefällt, auf unserem Vonage Community Slack oder senden Sie uns eine Nachricht auf Twitter.