Mehrparteien-Video mit der Vonage Video API
Mit der Video API von Vonage können Sie so gut wie jedes gewünschte Videoerlebnis erstellen. Ein häufiger Anwendungsfall für Entwickler sind mehrere Benutzer in einem einzigen Raum, z. B. bei einem Meeting mit einem Team. In vielen Fällen müssen diese Videositzungen aufgezeichnet werden. Mit der Vonage Video API ist beides ganz einfach möglich.
In diesem Lernprogramm
Mit der Vonage Video API können Sie schnell einen Raum zusammenstellen und Teilnehmer hineinsetzen. Wir gehen darauf ein, wie Sie eine Demo mit unseren bestehenden Demos zum Laufen bringen, so dass Sie keinen Code schreiben müssen, aber wir werden auch erklären, was der Code im Hintergrund tut.
- Siehe die Demo - Probieren Sie die Demo aus, ohne Code zu schreiben
- Wie die Demo funktioniert - Die Client-Seite - Was der Code auf der Client-Seite macht
- So funktioniert die Demo - Die Serverseite - Was der serverseitige Code macht
Voraussetzungen
Um das Tutorial abzuschließen, benötigen Sie:
- A Vonage-Konto - für Ihren API-Schlüssel und Ihr Geheimnis
Siehe die Demo
Wenn Sie die Demo ausprobieren möchten, bevor wir den Code schreiben, haben wir einen Beispiel-Webserver und JavaScript-Code, um zu testen, wie ein einfacher Videoanruf aussieht. Der gesamte Code ist quelloffen und öffentlich zugänglich, so dass Sie die Demo ausprobieren und dann den Code verwenden können, um Ihre eigenen Änderungen vorzunehmen.
Starten Sie den Node.js-Server
Die Video-Demo erfordert einen Backend-Server, der Dinge wie die Erstellung von Client-Tokens für die Autorisierung und die allgemeine Sitzungsverwaltung übernimmt. Sie können dies in jeder beliebigen Sprache erstellen, aber wir haben einen vorgefertigten Server, den Sie für den Anfang verwenden können, und zwar unter Vonage Video Learning Server (Node.js) auf Code Hub. Von der Dokumentation für EntwicklerKlicken Sie in der oberen Navigationsleiste auf "Code Hub" und scrollen Sie dann nach unten, um die Karte für "Vonage Video Learning Server (Node.js)" zu finden. Klicken Sie darauf, um sie zu öffnen.
Sie erhalten eine Beschreibung dessen, was dieses Projekt tut. Klicken wir zunächst auf "Code abrufen", damit wir ihn in den Code Hub Online-Editor laden können. Klicken Sie auf "Create a new development environment". Nennen Sie den Arbeitsbereich "Vonage Video Demo", da wir dieses Backend für mehrere Demos verwenden können. Dieser Demo muss eine Nummer zugewiesen werden, da der Lernserver Telefonanrufe über SIP unterstützt. Wir werden diese Funktion in dieser Demo nicht verwenden. Klicken Sie auf "Nummer zuweisen", um eine vorhandene Nummer von Vonage zuzuweisen, oder erwerben Sie eine neue Nummer, die Sie bei späteren Demos verwenden können.
Code Hub wird automatisch eine Anwendung für Sie erstellen, einschließlich der Einrichtung der öffentlichen und privaten Schlüssel, die unsere Anwendung verwenden wird. Sobald der Arbeitsbereich erstellt ist, werden Sie in den Code-Editor weitergeleitet, der eine Online-Version von Visual Studio Code ist. Sie können die weiteren Teile dieser Demo verfolgen, um den Code zu sehen, und Sie können diesen Code nach Bedarf für Ihre eigenen Projekte bearbeiten.
Um die Anwendung auszuführen, klicken Sie oben im Editor auf "Ansicht" und dann auf "Terminal". Dadurch wird eine Befehlszeile geöffnet, in der wir Befehle ausführen können. Alles, was wir tun müssen, ist Folgendes einzugeben vcr deploy und der Code wird bereitgestellt. Dies wird einige Augenblicke dauern, da der Code verpackt und auf den Vonage Code Hub Servern ausgeführt wird. Notieren Sie sich die "Instanz-Host-Adresse", die am Ende ausgegeben wird.
Wenn alles richtig funktioniert, sollten Sie die "Instance-Host-Adresse" aufrufen können und die folgende Seite angezeigt bekommen:
Testen Sie das Frontend
Der Backend-Server funktioniert direkt mit allen unseren vorgefertigten Demos, einschließlich dieser Einzel-Demo. Gehen Sie rüber zu https://github.com/Vonage-Community/video-api-web-samples/tree/main/Archivingdas ist der Quellcode für den Front-End-Teil dieser Demo. Dieses Beispiel ermöglicht es mehreren Benutzern mit der URL, einem Voice-Chat beizutreten und Aufzeichnungen der Sitzung namens Archive zu erstellen.
Der einfachste Weg, diese Demo zu starten, ist ein Klick auf die Schaltfläche "Open in Stackblitz" in der README.
Dadurch wird das Projekt in Stackblitz geöffnet. Wie beim Backend-Server können Sie hier den Code durchsuchen und ändern, wenn Sie möchten. Für diese Demo müssen wir nur das Projekt js/config.js Datei und fügen Sie die URL der Code Hub-Instanz in die SAMPLE_SERVER_BASE_URL variabel:
Sobald Sie die Datei gespeichert haben, können Sie die Demo-Ansicht auf der rechten Seite von Stackblitz aktualisieren und Ihr Browser sollte Sie auffordern, Ihr Mikrofon und Ihre Kamera zuzulassen. Sobald Sie dies zulassen, sollte Ihr Bild in der unteren Ecke der Seitenleiste erscheinen. Wenn Sie die Stackblitz-URL oberhalb des Demo-Fensters kopieren und auf Ihrem mobilen Gerät oder einem anderen Computer aufrufen oder einem Freund geben, sollte jeder, der sich anmeldet, mit Ihrer Demo verbunden werden!
So funktioniert die Demo
Konfigurieren einer Vonage-Applikation
Damit unsere Videoanwendung funktioniert, müssen unser Client und unser Server mit den Vonage-Servern kommunizieren können. Code Hub konfiguriert dies für uns, aber wenn Sie den Code lokal ausführen oder wissen möchten, was das bedeutet, wird eine Video-App wie eine andere API konfiguriert. Wir müssen eine Vonage Application einrichten, die die gesamte Konfiguration für unsere Anwendung enthält und uns dabei hilft, die notwendigen Elemente für die Authentifizierung zu generieren.
Gehen Sie zu Ihrem Vonage Kunden Dashboard und melden Sie sich an. Sobald Sie eingeloggt sind:
- Klicken Sie auf "Applications" unter "Build".
- Klicken Sie auf "Eine neue Anwendung erstellen".
- Geben Sie der Anwendung einen Namen, z. B. "Basic Video Demo".
- Klicken Sie auf "Öffentlichen und privaten Schlüssel generieren", woraufhin Sie eine Datei namens
private.key. Bewahren Sie diese Datei für später auf. - Scrollen Sie nach unten und schalten Sie "Video" ein. Wir lassen diese Werte vorerst leer.
- Klicken Sie auf "Neue Anwendung generieren", um die Anwendung zu erstellen.
Sobald die Anwendung erstellt ist, notieren Sie sich die Application ID. Wenn Sie den Code lokal ausführen, benötigen wir diese zur Konfiguration des Backends. Wenn Sie Code Hub verwenden, hat der Servercode bereits Zugriff auf die Application ID und den Private Key.
Die Kundenseite
Der client-seitige Teil der Demo besteht aus zwei verschiedenen Teilen - einigen HTML-Elementen, um die Video-Feeds einzubinden, und einigen JavaScript-Elementen, um Anmeldeinformationen abzurufen und mit den Vonage Video-Servern zu kommunizieren.
Da es sich um eine Browser-Demo handelt, verwenden wir das JavaScript-SDK, das sich unter https://unpkg.com/@vonage/client-sdk-video@latest/dist/js/opentok.jsund fügen es in ein Skript-Tag in unserem HTML-Code ein. index.html.
Um Personen zu einem Raum hinzuzufügen, benötigen wir nur zwei Elemente - einen Platz für den aktuellen Benutzer, z. B. Sie, den wir "Herausgeber" nennen. Dann brauchen wir einen Platz für alle anderen Personen, die einem Raum beitreten und die Sie "abonnieren" werden. Wir werden sie in einem "Abonnenten"-Element unterbringen.
Wir werden zwei div Elemente und geben einem eine ID von publisher und die andere eine ID von subscriber. Wir verweisen auf diese Elemente im JavaScript, wenn die Seite besucht wird und wenn wir feststellen, dass ein anderer Benutzer den Videoanruf getätigt hat.
Wir haben auch zwei Schaltflächen zum Starten und Stoppen der Archive sowie einen Platzhalter erstellt, in den die URL des Archivs eingetragen wird, sobald es fertig gerendert ist.
Handhabung Video
Auf der JavaScript-Seite werden wir zunächst einige Informationen über den Videoaufruf selbst erhalten. Um eine Verbindung mit dem Videoanruf herzustellen, benötigen wir eine Application ID, eine Session ID und ein Token.
- Die Applikation ID ist ein Bezeichner, den das Client SDK verwendet, um verschiedene Einstellungen für unsere Video-App auf der Vonage-Seite zu referenzieren.
- Die Sitzungs-ID ist eine bestimmte Videositzung, zu der wir eine Verbindung herstellen möchten, da eine einzelne Applikation mehrere gleichzeitige Videositzungen haben kann.
- Die Token ist ein JWT-Authentifizierungstoken, mit dem Sie einer bestimmten Sitzung mit bestimmten Rechten beitreten können.
Sie können die Sitzungs-ID und das Token zwar im Voraus generieren, aber in der Realität werden Sie diese bei Bedarf erzeugen. Unser Code stellt dar, wie Sie das tun würden. Wir werden in Kürze zeigen, wie die Informationen erstellt werden, aber wir werden diese Informationen vom Backend-Server abrufen, den wir bereitgestellt haben.
// src/app.js
// ...
} else if (SAMPLE_SERVER_BASE_URL) {
// Make a GET request to get the Vonage Video Application ID, session ID, and token from the server
fetch(SAMPLE_SERVER_BASE_URL + '/session')
.then((response) => response.json())
.then((json) => {
applicationId = json.applicationId;
sessionId = json.sessionId;
token = json.token;
// Initialize a Vonage Video Session object
initializeSession();
}).catch((error) => {
handleError(error);
alert('Failed to get Vonage Video sessionId and token. Make sure you have updated the config.js file.');
});
}
Sobald wir alle Verbindungsinformationen haben, können wir das Vonage Video JavaScript SDK aufrufen, das die Verbindung zur Vonage Video API am Frontend herstellt. Zuerst holen wir uns ein Sitzungsobjekt mit OT.initSession(). Wir beginnen dann mit dem Abhören der streamCreated Veranstaltung mit session.on(). Dies ermöglicht es uns, einen Callback zu setzen, der ausgeführt wird, wenn ein Stream von einem anderen Publisher erstellt wird. In diesem Fall verwenden wir session.subscribe() um eine Verbindung zu dem eingehenden Ereignis herzustellen und es in die subscriber div, das wir in der HTML-Datei eingerichtet haben. Wir achten auch auf die sessionDisconnected Ereignis, um zu wissen, wann der andere Benutzer die Verbindung trennt, aber in dieser Demo protokollieren wir nur, dass er gegangen ist.
Dann erstellen wir die publisher Objekt mit OT.initPublisher(). Wir sagen ihm, an welches div es anhängen soll (publisher), und einige grundlegende Formatierungsoptionen. Dadurch werden Ihre Kamera und Ihr Mikrofon mit der Video API verbunden.
Wir rufen dann session.connect() um sich mit der Sitzung zu verbinden, wobei das JWT-Token verwendet wird, das wir vom Server erhalten haben. Das ist alles, was zwei Personen brauchen, um einem Raum beizutreten!
// src/app.js
function initializeSession() {
const session = OT.initSession(applicationId, sessionId);
// Subscribe to a newly created stream
session.on('streamCreated', (event) => {
const subscriberOptions = {
insertMode: 'append',
width: '100%',
height: '100%'
};
session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
});
session.on('sessionDisconnected', (event) => {
console.log('You were disconnected from the session.', event.reason);
});
// initialize the publisher
const publisherOptions = {
insertMode: 'append',
width: '100%',
height: '100%',
resolution: '1280x720'
};
const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
// Connect to the session
session.connect(token, (error) => {
if (error) {
handleError(error);
} else {
// If the connection is successful, publish the publisher to the session
session.publish(publisher, handleError);
}
});
}
Handhabung Archiv
Die eigentliche Archivverwaltung wird auf der Serverseite der Anwendung durchgeführt, aber wir brauchen eine Möglichkeit, dem System mitzuteilen, dass es die Archive starten und stoppen soll. Nehmen wir die Schaltflächen, die wir dem HTML-Code hinzugefügt haben, sowie die <span> um später eine URL darin abzulegen. Wenn wir schon dabei sind, blenden wir auch die Schaltfläche "Stopp" aus, da wir sie erst beim Start eines Archivs anzeigen müssen.
// src/app.js
const archiveStartBtn = document.querySelector('#start');
const archiveStopBtn = document.querySelector('#stop');
const archiveLinkSpan = document.querySelector('#archiveLink');
archiveStopBtn.style.display = "none";
Wir werden einige HTTP-Anfragen an unseren Backend-Server senden, um die Archivierung zu starten und zu stoppen. Wir werden eine Funktion an die Klick-Ereignisse unserer Start- und Stopp-Schaltflächen anhängen. Die Serveranwendung wird Code für die Kommunikation mit der Vonage Video API enthalten, um die Archive selbst zu manipulieren.
// src/app.js
async function startArchiving(){
console.log('start archiving');
try {
archive = await postData(SAMPLE_SERVER_BASE_URL +'/archive/start',{sessionId});
console.log('archive started: ', archive);
if (archive.status !== 'started'){
handleError(archive.error);
} else {
console.log('successfully started archiving: ',archive);
}
}
catch(error){
handleError(error);
}
}
async function stopArchiving(){
console.log('stop archiving');
try {
archive = await postData(`${SAMPLE_SERVER_BASE_URL}/archive/${archive.id}/stop`,{});
console.log('archive stopped: ', archive);
if (archive.status !== 'stopped'){
handleError(archive.error);
} else {
console.log('successfully stopped archiving: ',archive);
}
}
catch(error){
handleError(error);
}
}
archiveStartBtn.addEventListener('click', startArchiving, false);
archiveStopBtn.addEventListener('click', stopArchiving, false);
Zuletzt müssen wir noch auf die JavaScript-Ereignisse rund um die Archivierung achten. Diese sind ein archiveStarted Ereignis und ein archiveStopped Ereignis. Dadurch erfährt das SDK, dass diese Vorgänge ausgeführt werden, und wir können unsere Benutzeroberfläche entsprechend den Vorgängen anpassen. Es ist besser, dies mit dem SDK im Gegensatz zu den oben erstellten Ereignis-Listener-Funktionen zu handhaben, da wir sofort wissen, wenn die Vonage Video API selbst die Aktionen durchgeführt hat.
// src/app.js
session.on('archiveStarted', (event) => {
archive = event;
console.log('Archive started ' + archive.id);
archiveStartBtn.style.display = 'none';
archiveStopBtn.style.display = 'inline';
archiveLinkSpan.innerHTML = '';
});
session.on('archiveStopped', (event) => {
archive = event;
console.log('Archive stopped ' + archive.id);
archiveStartBtn.style.display = 'inline';
archiveStopBtn.style.display = 'none';
archiveLinkSpan.innerHTML = `<a href="${SAMPLE_SERVER_BASE_URL}/archive/${archive.id}/view" target="_blank">View Archive</a>`;
});
Wenn die Archivierung beginnt, blenden wir die Schaltfläche "Start" aus und zeigen die Schaltfläche "Stop" an. Wenn die Archivierung endet, blenden wir die Schaltfläche "Stopp" aus und füllen unsere <span> mit der URL zum Anzeigen des Archivs. Diese URL ist Teil des Backend-Servers, den wir zuvor eingerichtet haben, und ist nicht die URL, unter der das Archiv selbst gespeichert ist. Hierfür müssen Sie die serverseitigen Ereignisse beobachten.
Die Server-Seite
Der serverseitige Teil jeder Vonage Video-Anwendung dient der Erstellung von Sitzungen, der Erzeugung von Authentifizierungstoken und administrativen Aufgaben wie dem Starten und Stoppen von Archiven. In dieser Demo geht es nur um die Erstellung von Sitzungen und Token, damit Benutzer dem Raum beitreten können. Obwohl die API selbst eine REST-API ist und nach Belieben aufgerufen werden kann, empfehlen wir Ihnen die Verwendung der Vonage Node SDK die alle Authentifizierungs- und HTTP-Aufrufe für Sie erledigt. Sie können es in Ihrer eigenen Anwendung mit installieren:
npm install -s @vonage/server-sdk
Im Democode ist es bereits vorinstalliert. Wenn Sie den Code lokal ausführen, müssen Sie ihn ausführen:
npm install
um alle Abhängigkeiten herunterzuladen, und kopieren Sie dann .envcopy in eine neue Datei mit dem Namen .env. Sie müssen die geforderten Informationen in folgende Felder eintragen .env wie die Application ID, den Speicherort des privaten Schlüssels auf der Festplatte und Ihren Vonage API-Schlüssel und -Geheimnis.
Erstellung einer Sitzung und Beitritt zur Sitzung
Als Erstes schauen wir nach, ob es bereits eine Sitzung für den Raum gibt, den wir erstellen. Wir halten ein In-Memory-Wörterbuch in roomToSessionIdDictionaryund wenn der Raum bereits eine Sitzung hat, ziehen wir die Sitzung einfach aus dem Wörterbuch. Anschließend verwenden wir das Vonage Video Node SDK, um ein Client-Token zu erstellen, indem wir vonage.video.generateClientToken()und übergibt ihm die Sitzungs-ID und ein Objekt mit einer Konfiguration. Im Moment ist alles, was wir tun, den Benutzer auf eine moderator Rolle für diese einfache Demo. Anschließend werden die konfigurierte Application ID, Session ID und das Token an das Frontend zurückgegeben.
Wenn die Sitzung nicht existiert, wird eine neue Sitzung mit vonage.video.createSession(). Dadurch wird die Vonage-API kontaktiert und eine Sitzung erstellt, mit der sich die Benutzer verbinden können. Wir haben keine spezifischen Einstellungen für diese Sitzung, aber hier würden wir Dinge wie Archivierungsregeln einrichten und wie die Sitzung behandelt werden soll, wie Routing oder Peer-to-Peer. Dann erstellen wir wie zuvor ein Token und senden all diese Informationen zurück an den Browser.
// routes/index.js
async function createSession(response, roomName, sessionProperties = {}, role = 'moderator') {
let sessionId;
let token;
console.log(`Creating ${role} creds for ${roomName}`);
if (roomToSessionIdDictionary[roomName]) {
sessionId = roomToSessionIdDictionary[roomName];
// generate token for user
token = vonage.video.generateClientToken(sessionId, { role })
response.setHeader('Content-Type', 'application/json');
response.send({
applicationId: appId,
sessionId: sessionId,
token: token
});
} else {
try {
// Create the session
const session = await vonage.video.createSession(sessionProperties);
roomToSessionIdDictionary[roomName] = session.sessionId;
// generate token for user
token = vonage.video.generateClientToken(session.sessionId, { role });
response.setHeader('Content-Type', 'application/json');
response.send({
applicationId: appId,
sessionId: session.sessionId,
token: token
});
} catch(error) {
console.error("Error creating session: ", error);
response.status(500).send({ error: 'createSession error:' + error });
}
}
}
Handhabung Archiv
Wie die meisten Verwaltungs- und Administrationsfunktionen der Vonage Video API wird auch die Verwaltung von Archiven über die REST API und unsere Server SDKs abgewickelt. Wir nehmen die clientseitigen Anfragen zum Starten und Stoppen eines Archivs, ordnen sie einer Route in unserem Backend-Server zu und rufen vonage.video.startArchive() um ein Archiv zu starten, und vonage.video.stopArchive() um ein laufendes Archiv anzuhalten.
Wenn wir ein Archiv starten, werden wir die erzeugten Archivinformationen an den Client zurückgeben. Auf diese Weise weiß er, welches Archiv er später stoppen muss. Wenn wir das Archiv anhalten, senden wir auch seinen Status zurück, falls der Client etwas aktualisieren muss.
Diese Anrufe erzeugen letztendlich die archiveStarted und archiveStopped SDK-Ereignisse, auf die wir achten.
// routes/index.js
router.post('/archive/start', async function (req, res) {
console.log('attempting to start archive');
const json = req.body;
const sessionId = json.sessionId;
try {
const archive = await vonage.video.startArchive(sessionId, { name: findRoomFromSessionId(sessionId) });
console.log("archive: ", archive);
res.setHeader('Content-Type', 'application/json');
res.send(archive);
} catch (error){
console.error("error starting archive: ",error);
res.status(500).send({ error: 'startArchive error:' + error });
}
});
router.post('/archive/:archiveId/stop', async function (req, res) {
const archiveId = req.params.archiveId;
console.log('attempting to stop archive: ' + archiveId);
try {
const archive = await vonage.video.stopArchive(archiveId);
res.setHeader('Content-Type', 'application/json');
res.send(archive);
} catch (error){
console.error("error stopping archive: ",error);
res.status(500).send({ error: 'stopArchive error:', error });
}
});
Um das Archiv anzuzeigen, müssen wir sicherstellen, dass das Archiv selbst verfügbar ist. Wenn der Benutzer auf den Link im Frontend klickt, um das Archiv anzuzeigen, wird eine Route auf dem Backend-Server gefiltert, der prüfen kann, ob das Archiv tatsächlich bereit ist. Wenn der Status availableleiten wir auf die eigentliche Speicher-URL für das Video um. Anschließend kann der Browser das archivierte Video nativ anzeigen, da die meisten gängigen Browser das MP4-Format unterstützen.
// routes/index.js
router.get('/archive/:archiveId/view', async function (req, res) {
const archiveId = req.params.archiveId;
console.log('attempting to view archive: ' + archiveId);
try {
const archive = await vonage.video.getArchive(archiveId);
if (archive.status === 'available') {
res.redirect(archive.url);
} else {
res.render('view', { title: 'Archiving Pending' });
}
} catch (error){
console.log("error viewing archive: ",error);
res.status(500).send({ error: 'viewArchive error:' + error });
}
});
Schlussfolgerung
In diesem Tutorial haben Sie gesehen, was in den Backend-Server für eine Mehrparteien-Videositzung eingeht, wie man einen Web-Client erstellt, mit dem Benutzer einer Sitzung beitreten und sich gegenseitig sehen und hören können, wie man eine Videositzung aufzeichnet und anschaut und wie einfach es ist, den Vonage Code Hub und Stack Blitz zum schnellen Testen von Beispielen zu verwenden.