OpenTok.js
Mit der OpenTok.js-Bibliothek können Sie im Web Videositzungen nutzen, die auf der Vonage Video API basieren.
- SDK-Übersicht
- API-Referenz
- Anleitungen
- Beispiele
- Anmerkungen zur Veröffentlichung
Alle Applikationen, die die Vonage Video API nutzen, bestehen aus zwei Teilen:
- Die Client-Seite, die die OpenTok-Client-SDKs und läuft im Browser oder in der mobilen App eines Nutzers
- Die Serverseite, die die OpenTok-Server-SDKs und läuft auf Ihrem Server, um Authentifizierungsinformationen an den Client weiterzugeben
Das Client SDK zur Erstellung webbasierter Applikationen, die die Vonage Video API nutzen, ist OpenTok.js. Diese JavaScript-Bibliothek bietet die meisten der Kernfunktionen für Ihre Anwendung, einschließlich:
- Verbinden mit einer Sitzung
- Veröffentlichen von Streams in einer Sitzung
- Abonnieren von Streams in einer Sitzung
Client-SDKs sind außerdem verfügbar für iOS und Android. Alle OpenTok-Client-SDKs können miteinander interagieren. Weitere Informationen zu den Grundlagen von OpenTok-Clients, -Servern, -Sitzungen und vielem mehr finden Sie auf unserer Video API-Grundlagen Seite.
Wichtige Hinweise
- Chrome M136 unter Windows – Problem bei der Erkennung von Audiogeräten. Uns ist ein Problem mit Chrome M136 unter Windows bekannt, bei dem der Browser beim Abrufen von Informationen zu Audiogeräten zeitweise langsam reagiert oder abstürzt. Dies ist ein bekanntes Problem, das in Chrome-Version 137.0.7150.0 behoben wurde; die Korrektur wurde zudem in einen in Kürze erscheinenden Patch für Chrome 136 integriert. Sollten Sie in der Zwischenzeit auf dieses Problem stoßen, empfehlen wir Ihnen, entweder auf Chrome 135 zurückzuwechseln und diese Version als Standard festzulegen oder einen alternativen Browser zu verwenden. Bitte wenden Sie sich an den Support, wenn Sie Hilfe bei der Umsetzung einer Umgehungslösung benötigen.
- In Safari 15.4 und 15.5 behobene Probleme. Die Safari-Versionen 15.4 und 15.5 (die mit iOS 15.4 und 15.5 und macOS 12.3 und 12.4 ausgeliefert werden) beheben die folgenden Probleme, die sich auf Apps auswirken können, die OpenTok.js (in Safari) verwenden:
- Audioprobleme bei der Verwendung bestimmter Modelle von Bluetooth-Headsets. Bei bestimmten Modellen von Bluetooth-Headsets kann es zu Tonausfällen kommen. Dies WebKit-Fehler ist in Safari 15.4 behoben.
- Echo-Probleme beim Umschalten von Mikrofonen in macOS Safari. Der Wechsel des Mikrofons, das von einem Herausgeber verwendet wird, konnte zu einem Echo des Herausgebers führen. Auf der Seite des Teilnehmers trat das Echo nicht auf. Dies WebKit-Fehler ist in Safari 15.5 behoben.
- Kritischer Fehler bei der Veröffentlichung von H.264-Videos in gerouteten Sitzungen in iOS 15.1. In iOS 15.1 schlägt die Veröffentlichung von H.264-Videos in gerouteten Sitzungen fehl. Dies WebKit-Fehler wurde in Safari 15.4 behoben.
- Geringe Lautstärke in Safari unter iOS. Diese WebKit-Fehler ist in Safari 15.4 behoben.
- Ende-zu-Ende-Verschlüsselung — In OpenTok.js 2.27.0 funktioniert die End-to-End-Verschlüsselung nicht mit Clients, die eine ältere Version von OpenTok.js verwenden. Wenn Sie Ihre App auf OpenTok.js 2.27.0 oder höher aktualisieren, stellen Sie sicher, dass alle Clients OpenTok.js 2.27.0 oder höher verwenden, sofern die App eine End-to-End-Verschlüsselung nutzt.
Interoperabilität
Die aktuelle Version der OpenTok.js-Bibliothek (2.35.1) ist kompatibel mit OpenTok-Apps, die mit Version 2.33 oder höher der OpenTok-Client-SDKs erstellt wurden:
- OpenTok.js
- OpenTok Android SDK
- OpenTok iOS-SDK
- OpenTok Windows SDK
- OpenTok macOS SDK
- OpenTok Linux-SDK
- OpenTok React Native SDK
Einrichtung
Um OpenTok.js in Ihre Webseite zu laden, fügen Sie das folgende Skript-Tag hinzu:
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
Installation über GitHub-Pakete
Neben der Installation über das npm-Repository sind die Client SDK-Pakete auch über NPM-Registrierung von GitHub-Paketen. Dies bietet einen alternativen Verteilungskanal für Unternehmensumgebungen, die eine GitHub-basierte Paketverwaltung erfordern.
Verfügbare Pakete
Das folgende Paket ist auf GitHub Packages veröffentlicht:
@opentok/client- Verfügbar unter GitHub Packages (OpenTok-Organisation)
Anweisungen zur Einrichtung
Um Pakete aus der NPM-Registry von GitHub Packages zu installieren, müssen Sie npm für die Authentifizierung bei GitHub konfigurieren:
1. Erstellen Sie ein GitHub Personal Access Token (PAT)
Erzeugen Sie ein persönliches Zugangs-Token mit read:packages Bereich in den Einstellungen Ihres GitHub-Accounts.
2. Konfigurieren Sie Ihr .npmrc Datei
Fügen Sie die folgende Konfiguration zu Ihrem Projekt hinzu .npmrc Datei oder Ihre Benutzerebene ~/.npmrc Datei:
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@vonage:registry=https://npm.pkg.github.com
Ersetzen Sie YOUR_GITHUB_TOKEN mit Ihrem persönlichen GitHub-Zugangs-Token.
3. Installieren Sie das Paket
Nach der Konfiguration können Sie das Paket mit dem Standardbefehl npm install installieren:
npm install @opentok/client
Hinweis zur Verfügbarkeit von Paketen
Sowohl die traditionelle npm-Registrierung als auch die GitHub-Paketregistrierung werden synchronisiert. Sie können je nach den Präferenzen Ihrer Organisation für die Paketverwaltung eine der beiden Verteilungsmethoden wählen. Die traditionelle npm-Installationsmethode (über npm install @opentok/client aus der Standardregistrierung) wird weiterhin vollständig unterstützt und erfordert keine zusätzliche Konfiguration.
Weitere Informationen zur Arbeit mit der NPM-Registry von GitHub Packages finden Sie in der GitHub Pakete Dokumentation.
Systemanforderungen
Für zuverlässiges Videostreaming in modernen Browsern sollten Sie sicherstellen, dass Ihr Gerät diese empfohlenen Spezifikationen erfüllt:
- CPU: Ein aktueller Dual-Core-Prozessor; ein Quad-Core-Prozessor (z. B. Intel Core i5 / Ryzen 5) oder besser für 1080p oder intensives Multitasking.
- GRAFIKPROZESSOR: Moderne integrierte Grafikkarte (Intel UHD/Iris Xe oder AMD Radeon oder Nvidia Graphics) für 1080p; Hardware-Decodierungsunterstützung für Videocodierung wird dringend empfohlen.
- ARBEITSSPEICHER: Mindestens 8 GB für alltägliches Streaming; 16 GB empfohlen, wenn Sie viele Tabs oder Apps geöffnet haben.
- Speicher: SSD bevorzugt für schnelles Laden und schnelles Systemverhalten.
- Netzwerk: Zuverlässige Internetkonnektivität; funktioniert über Wi-Fi, Ethernet oder Mobilfunknetz.
- Sonstiges: Für eine optimale Leistung sollte die Hardware-Beschleunigung im Browser aktiviert sein.
Diese Empfehlungen gewährleisten eine stabile Wiedergabe, eine geringere CPU-Auslastung und eine reibungslose Leistung beim Videostreaming.
Bauen lernen
Am besten lernen Sie den Umgang mit der OpenTok.js-Bibliothek, indem Sie unserem Tutorial „Grundlagen des Video-Chats“ für das Web folgen:
Sobald Sie die Grundlagen der Entwicklung mit OpenTok.js verstanden haben, können Sie sich näher informieren und erfahren, wie Sie Ihre Application mit unseren Leitfäden für Entwickler. Um bestimmte API-Klassen und -Methoden zu untersuchen, können Sie die OpenTok.js-Referenz.
Browser-Unterstützung
Die OpenTok.js-Bibliothek wird derzeit unterstützt in:
- Google Chrome (neueste Version)
- Google Chrome für Android (neueste Version)
- Google Chrome für iOS (neueste Version)
- Firefox (neueste Version)
- Firefox für Android (neueste Version)
- Beta-Unterstützung für Firefox für iOS (neueste Version)
- Microsoft Edge Versionen 79+ für Windows und macOS (Chromium-basierte Versionen von Edge)
- Safari unter macOS und iOS (aktuellste Version). Informationen zur Video-Interoperabilität und zu weiteren Themen finden Sie unter Safari-Browser-Unterstützung Seite.
- Opera (nur die neueste Version der Desktop-Version)
- Electron (neueste Version)
- Samsung Internet (neueste Version)
- WebView (android.webkit.WebView) Android-API-Level 36+
- WebView (wkwebview) iOS 18.6 oder höher
Das ist wichtig: OpenTok.js Version 2.16 war die letzte Version, die das OpenTok-Plugin für Internet Explorer unterstützte. OpenTok.js Version 2.16 wurde im Mai 2020 für die Standard-Umgebung und im Juni 2020 für die Enterprise-Umgebung als veraltet eingestuft.
Unterstützung für Async/Await und Promises
Ab Version 2.35.1 unterstützt das JS-SDK moderne async/await sowie auf Promises basierende Muster neben der bestehenden, auf Callbacks basierenden API. Diese Änderung ist vollständig abwärtskompatibel – der gesamte bestehende, auf Callbacks basierende Code funktioniert weiterhin ohne Änderungen.
Anmerkung: Im Rahmen dieser Arbeiten wurde die Fehlerbehandlung in den internen Abläufen des SDK verfeinert, sodass Fehlerinformationen nun präziser angezeigt werden. Ab Version 2.35.1 melden einige Funktionen Fehler, die zuvor unbemerkt blieben. Dabei handelt es sich nicht um neue Fehler, sondern um bereits bestehende Fehler, die nun korrekt weitergeleitet werden. Daher kann es vorkommen, dass Fehler gemeldet werden, die zuvor unbemerkt geblieben sind.
Je nach Methode stehen zwei Varianten zur Auswahl:
Methoden, die zuvor void (wie zum Beispiel session.signal(), OT.getDevices() und andere) akzeptieren nun einen optionalen Callback und geben zudem einen Promise. Die vollständige Liste finden Sie unter den Codeausschnitten:
// Callback style (still works)
session.signal({ data: 'hello' }, function(error) {
if (error) { console.error(error); }
else { console.log('Signal sent'); }
});
// Promise / async-await style (new in 2.35.1)
try {
await session.signal({ data: 'hello' });
console.log('Signal sent');
} catch (error) {
console.error(error);
}
Methoden, die zuvor ein Objekt zurückgegeben haben (wie zum Beispiel OT.initPublisher(), session.publish()und session.subscribe()) stellen ein neues .promise() Funktion der Methode selbst. Die vollständige Liste finden Sie unterhalb der Codeausschnitte:
// Callback style (still works)
const publisher = OT.initPublisher(targetElement, properties, function(error) {
if (error) { console.error(error); }
});
// Promise / async-await style (new in 2.35.1)
try {
const publisher = await OT.initPublisher.promise(targetElement, properties);
} catch (error) {
console.error(error);
}
Aktualisierte Methoden
Die folgenden Methoden wurden aktualisiert, um Promises zu unterstützen:
Funktionen, die zuvor void — Der Callback-Parameter ist nun optional, und die Funktion gibt zudem einen Promise:
| Methode | Rückgabe |
|---|---|
OT.checkScreenSharingCapability |
Promise<void> |
OT.getDevices |
Promise<Device[]> |
OT.reportIssue |
Promise<void> |
publisher.getStats |
Promise<void> |
publisher.publishCaptions |
Promise<void> |
session.disconnect |
Promise<void> |
session.forceDisconnect |
Promise<void> |
session.forceUnpublish |
Promise<void> |
session.signal |
Promise<void> |
subscriber.getStats |
Promise<void> |
subscriber.setPreferredFrameRate |
Promise<void> |
subscriber.setPreferredResolution |
Promise<void> |
Funktionen, die zuvor ein Objekt zurückgegeben haben — ein neues .promise() Die Funktion wird über die Methode selbst bereitgestellt:
| Methode | Rückgabe |
|---|---|
OT.initPublisher |
.promise() gibt zurück. Promise<Publisher> |
publisher.destroy |
.promise() gibt zurück. Promise<void> |
publisher.publishAudio |
.promise() gibt zurück. Promise<void> |
publisher.publishVideo |
.promise() gibt zurück. Promise<void> |
session.connect |
.promise() gibt zurück. Promise<Session> |
session.publish |
.promise() gibt zurück. Promise<Publisher> |
session.subscribe |
.promise() gibt zurück. Promise<Subscriber> |
subscriber.setAudioVolume |
.promise() gibt zurück. Promise<void> |
subscriber.restrictFrameRate |
.promise() gibt zurück. Promise<void> |
subscriber.subscribeToAudio |
.promise() gibt zurück. Promise<void> |
subscriber.subscribeToVideo |
.promise() gibt zurück. Promise<void> |
Die TypeScript-Definitionen wurden aktualisiert, um alle neuen Signaturen zu berücksichtigen.
Anmerkung: Eine umfassende Anleitung zur Umstellung Ihres bestehenden, auf Callbacks basierenden Codes auf Promises finden Sie unter Leitfaden zum Übergang von JS-SDK-Callbacks zu Promises.
Versionsnummern
Sie können die OpenTok.js-Bibliothek in Ihre Webseite einbinden, indem Sie eine <script> Tag:
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
Die Versionsnummer von OpenTok.js besteht aus drei Teilen:
- Die Hauptversionsnummer - Diese Nummer (die erste Zahl) wird erhöht, wenn es eine neue Version gibt, die eine API-Änderung enthält, die nicht abwärtskompatibel ist.
- Die Minor-Versionsnummer - Diese Nummer (die zweite Zahl) wird erhöht, wenn eine neue Version mit neuen Funktionen herauskommt.
- Die Patch-Nummer - Diese Nummer (die dritte) wird erhöht, wenn es eine neue Version gibt, die Fehler behebt oder die Leistung verbessert, ohne neue Funktionen hinzuzufügen.
Zum Beispiel ist v2.4.0 die Hauptversion 2, die Nebenversion 4 (von Hauptversion 2) und die Revision 0 (von v2.4). Bei der Freigabe von Revisionsversionen werden die Änderungen in die Stamm-Nebenversion aufgenommen. Wenn zum Beispiel v2.2.3 veröffentlicht wird, werden die Änderungen in v2.2 aufgenommen.
Um auf eine bestimmte Version zu verweisen, können Sie die vollständige Versionsnummer (z. B. "v2.4.0") in die src Attribut. Wir empfehlen Ihnen jedoch, nur die Hauptversionsnummer anzugeben. Vonage unterstützt offiziell die aktuelle Version der Bibliothek. Falls Sie eine ältere Version laden, bitten wir Sie, ein Upgrade durchzuführen, um von den neuesten Fehlerbehebungen und Funktionen der OpenTok-Plattform zu profitieren.
Das ist wichtig: Verwenden Sie die von uns zur Verfügung gestellten Bibliotheken immer in unveränderter Form. Dadurch wird sichergestellt, dass Sie den neuesten, aktuellen und getesteten Code verwenden. Die Vonage Video API unterstützt die Verwendung von modifizierten Bibliotheken nicht.
Weitere Informationen zu bestimmten Versionen von OpenTok.js finden Sie auf der OpenTok-Website. Versionshinweise. Um zu erfahren, wann neue Versionen von OpenTok.js verfügbar sind, besuchen Sie die Video API – Neue Versionen Seite und klicken Sie auf die Folgen Taste.
Code-Muster
Für Beispielcode besuchen Sie unsere Repository „video-api-web-samples“ auf GitHub.
Dokumentation und weitere Informationen
Siehe die OpenTok.js-API-Referenz und die OpenTok-Entwicklerhandbücher.
Eine Liste der neuen Funktionen und bekannten Probleme finden Sie in der Versionshinweise.