Video Express ist da und warum es großartig ist!

Ausdrückliche Erläuterung

Vonage verfügt über ein Jahrzehnt Erfahrung in der Videoentwicklung und hat eine einfache High-Level-API namens Video Express entwickelt, um die Entwicklung und Integration von Mehrparteien-Videos in Web-Applikationen zu beschleunigen.

Mehrparteiensystem?

Lassen Sie uns zunächst definieren, was Mehrparteiengespräche sind. Dies ist der Fall, wenn ein Videoanruf mehrere Teilnehmer hat, die sowohl ihre Audio- als auch ihre Videostreams veröffentlichen und gleichzeitig die Streams der anderen Teilnehmer abonnieren.

Früher war es üblich, dass sich Teams in einem Raum aufhielten und sich dann per Video mit einem Team in einem anderen Raum austauschten.

2 teams 2 streams

Wie Sie vielleicht in letzter Zeit selbst erlebt haben, verlagern sich die Dinge hin zu Personen, die von verschiedenen Orten aus anrufen.

6 people 36 streams

Wie Sie aus dem obigen Bild ersehen können, kann es schnell zu einer komplexen Herausforderung werden, mit all den Verbindungen der Teilnehmer Schritt zu halten.

Dies ist der Ort Video Express ins Spiel. Vielleicht sind Sie neu in der Entwicklung von Applications, die Video integrieren, oder ein erfahrener Entwickler, der sich auf andere Dinge konzentrieren möchte. Video Express hilft Ihnen, die Komplexität zu beseitigen und optimiert die Qualität, die CPU-Auslastung und das Layout! Das ist der Grund, warum es großartig ist!

Hier wird Video Express in einem Vanilla-JavaScript-Projekt das Sie sich ansehen können. Es gibt eine Schaltfläche für die schnelle Bereitstellung, so dass Sie einfach Ihren API-Schlüssel und Ihr Geheimnis in die .env-Datei eingeben können und schon haben Sie Ihr eigenes funktionierendes Beispiel. Dies ist eine einfache Implementierung, um Video Express vorzustellen.

Beseitigung der Komplexität

Im folgenden Vergleich sehen Sie den Startcode, der für einen Video-Chat benötigt wird.

Vonage Video API JavaScript Client SDK

const session = OT.initSession(this.apiKey, this.roomId); // Init session
session.on('sessionConnected', ...); // Handle session connected events
session.on('sessionDisconnected', ...); // Handle session end
session.on('streamCreated', ...); // Subscribe to newly published streams
session.on('streamDestroyed', ...); // Clean up on stream end
session.on('connectionCreated', ...); // Handle connection events (join)
session.on('connectionDestroyed', ...); // Handle disconnect events (leave)

// Build your own UI / Layout
// Active Speaker Detection
// Video / Audio Optimizations
const pub = OT.initPublisher(targetElement, options, (err) => console.error(err)); // Create a publisher
session.publish(pub, undefined, err => { // Try to publish media
 if (err) {
   reject(err);
 } else {
   resolve();
 }
});

Vonage Video Express

const room = new VideoExpress.Room({ apiKey, sessionId, token, roomContainer: 'roomContainer’ });

room.join();

Video Express kümmert sich um die Veröffentlichung und das Abonnieren aller Teilnehmer des Videoanrufs. Geben Sie einfach die ID des HTML-Elements (in diesem Beispiel "roomContainer") an, in das der "Room" eingefügt werden soll, fügen Sie ihn ein und das war's. Lesen Sie unsere Dokumentation um mehr darüber zu erfahren, was Sie tun können.

Qualitätsmanager

Quality Manager diagram

Um die bestmögliche Qualität des Videoanrufs zu erreichen, wendet Video Express automatisch verschiedene Methoden an. Dazu gehört die Maximierung der Kachelgrößen für sichtbare Videostreams und die Unterbrechung derjenigen, die nicht sichtbar sind. Außerdem werden Auflösung und Bildrate je nach Netzwerkbedingungen und CPU-Auslastung angepasst. Durch die dynamische Einstellung höherer Prioritäten für Lautsprecher und Bildschirmfreigaben können die Dinge, die im Mittelpunkt stehen müssen, die beste Qualität erreichen.

Erfahrung Manager

Um eine optimale Benutzererfahrung zu gewährleisten, optimiert Video Express die Client-Seite. Zum Beispiel wird jeder Teilnehmer nach 10 automatisch stummgeschaltet, um sehr laute Räume zu vermeiden. Wenn ein angezeigtes Video kleiner wird, wird ein kleinerer Stream angefordert, um die für eine reibungslose Wiedergabe erforderliche Bandbreite zu verringern.

Beispiel für eine unbearbeitete, nicht optimierte Video-Sitzung

Table with data of an unoptimized multiparty video session

Beispiel für eine optimierte Video-Sitzung

Table with data of an optimized multiparty video session

Layout-Manager

Layout Manager diagram

Video Express passt das Layout der Streams automatisch an die Bildschirmgröße und die Anzahl der Teilnehmer an. Bildschirmfreigaben und der aktive Sprecher erhalten eine höhere Priorität oder nehmen mehr Platz ein.

Vorschau Herausgeber

Eine weitere Funktion, die Video Express für Sie übernimmt, ist die Möglichkeit, dem Benutzer eine Vorschau seines Videos und Audios zu geben, bevor er dem Raum beitritt. Hier ist ein Beispielcode:

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia({
  targetElement: 'previewContainer',
  publisherProperties: {
    resolution: '1280x720',
    audioBitrate: 15,
  },
});

Screenshare

Die letzte Funktion von Video Express, auf die ich hinweisen möchte, ist die Handhabung der Bildschirmfreigabe.

const startScreensharing = () => {
  room.startScreensharing("myScreenshare");
}

const stopScreensharing = () => {
  room.stopScreensharing();
}

screenshareStartBtn.addEventListener("click", startScreensharing, false);

screenshareStopBtn.addEventListener("click", stopScreensharing, false);

Das war's! Mit diesen wenigen Codezeilen können Sie Ihren Bildschirm freigeben, und Video Express konfiguriert das Layout des Raums neu, um ihm Priorität einzuräumen.

Na ja...

Bereit, etwas Erstaunliches zu bauen?!

Werfen Sie einen Blick in die Video Express-Dokumentation für weitere Details.

Spielen Sie mit dem Basis-Starterprojekt.

Zeigen Sie uns, woran Sie arbeiten und geben Sie uns Feedback in unserem Gemeinschafts-Slack-Kanal.