Einbettungen von Video-Chats

Fügen Sie Ihrer Website mit einem einfachen, einbettbaren Widget im Handumdrehen die Funktionen der Vonage Video API hinzu.

Erstellen Sie eine Video-Chat-Einbettung in Ihrem Video API Account

Dies ist ein Beispiel für die Einbettung eines Video-Chats.
Klicken Sie hier, um den Anruf zu starten, und klicken Sie anschließend auf die Schaltfläche unten, um diesen individuellen Einbettungslink für einen 1:1-Video-Chat zu teilen.

Diese Einbettung teilen

   

https://your-domain/opentok/embeds/?room=roomParam

Um einen zweiten Nutzer zum Chatraum hinzuzufügen, Kopieren Sie die obige URL und öffnen Sie sie in einem neuen Browser-Tab oder leiten Sie sie an einen Freund weiter. Der andere Nutzer muss ebenfalls darauf klicken, um den Anruf zu starten.

Übersicht

Die Video-Chat-Einbettung ist die einfachste Möglichkeit, Ihrer Website mithilfe eines einbettbaren HTML-Schnipsels schnell grundlegende OpenTok-Funktionen hinzuzufügen.

Sobald das Einbettungselement auf Ihrer Website implementiert ist, können Sie darauf klicken, um eine Verbindung zu einem „Video-Chatraum“ herzustellen. Andere Nutzer können dann in ihrem eigenen Browser auf das Einbettungselement klicken und demselben Chatraum beitreten. Sie können mit demselben Einbettungselement sogar separate Räume erstellen, indem Sie die Raumparameter.

Die Einbettung von Video-Chats wird auf allen Von der OpenTok.js-Bibliothek unterstützte Browser.

Beschränkungen

Derzeit funktionieren eingebettete Video-Chats nur im Web und bieten grundlegende Audio- und Video-Chat-Funktionen. Die Integration in mobile Apps sowie erweiterte Funktionen wie Archivierung, Bildschirmfreigabe und Text-Chat sind in der Einbettungsfunktion für Video-Chats nicht enthalten.

Um die erweiterten Funktionen von OpenTok sowie die Unterstützung für mobile Browser und Apps nutzen zu können, müssen Sie ein Projekt in Ihrem Video API-Konto und befolgen Sie unsere hilfreichen Tutorials und Entwicklerhandbücher.

Schnellzugriff:

Einbetten eines Video-Chats

  1. Gehen Sie zu Ihrem Video API-Konto und Projekt erstellen (entweder über das Seitenmenü oder über Ihre Account-Übersicht.)

  2. Wählen Sie die Einbetten Projektoption.

  3. Geben Sie Ihrem Einbettungscode einen Namen.

    Diesen Namen werden Sie später verwenden, um den Einbettungscode in Ihrem Video API Account zu finden.

  4. Geben Sie die Breite und Höhe des Einbettungscodes an.

  5. Geben Sie die Domain der Website an, auf der Sie die Einbettung verwenden möchten.

    Wenn Sie beispielsweise den Einbettungscode auf Ihrer Webseite unter example.com/test einfügen möchten, geben Sie Folgendes ein: https://example.com. Achten Sie darauf, Folgendes einzugeben: http:// oder https:// gefolgt vom Domainnamen. (Wenn Sie „localhost“ zu Testzwecken verwenden möchten, können Sie einfach Folgendes eingeben: http://localhost oder http://localhost:[port number] (für andere Ports als Port 80.)

    Das ist wichtig: Sie sollten eine HTTPS-URL (nicht HTTP) verwenden. Browser erlauben auf HTTP-Seiten keinen Zugriff auf die Kamera. Sie erlauben jedoch die Verwendung von HTTP für lokale Tests, wie zum Beispiel http://localhost oder http://localhost:8080.

  6. Wenn Sie einen Website-Baukasten wie Squarespace, Weebly oder WordPress für das Hosting der Website verwenden möchten, wählen Sie diesen im Erstellt mit Menü (optional).

  7. Klicken Sie auf die Einbettungscode erstellen Taste.

Nachdem Sie diese Schritte abgeschlossen haben, wird Ihr Einbettungscode auf der Seite generiert. Kopieren Sie diesen Code und speichern Sie ihn, damit Sie ihn auf Ihrer Website einfügen können. Sie können diesen Code jederzeit abrufen, indem Sie in Ihrem Vonage Video API-Account eine vorhandene Video-Chat-Einbettung auswählen und auf die Schaltfläche Einbettungscode kopieren Schaltfläche oben in der Einbettungsübersicht.

Iframe vs. Skript-Einbettungen

Sie haben die Wahl zwischen der Verwendung eines iframe oder Skript Einbettungscode. Siehe die nächsten beiden Abschnitte.

Einbetten eines Video-Chats in Ihre Webseite

Was Sie benötigen:

  • Zugriff auf den HTML-Code Ihrer Webseite zur Bearbeitung

  • Der eindeutige Einbettungscode aus Ihrem Video API Account (siehe Einbetten eines Video-Chats).

Einfügen und Testen des Embed-Codes auf Ihrer Webseite:

  1. Öffnen Sie den HTML-Code Ihrer Webseite in einem Editor, kopieren Sie den Einbettungscode aus Ihrem Video API-Account und fügen Sie ihn in den Hauptteil Ihres HTML-Codes ein. Wo genau Sie ihn einfügen, hängt davon ab, an welcher Stelle er erscheinen soll, er muss jedoch irgendwo zwischen den <body> und </body> Tags, die auf der Seite angezeigt werden sollen.

  2. Speichern Sie die HTML-Datei und laden Sie sie in Ihrem Browser. Sie sollten nun ein Feld mit einem Zum Starten des Anrufs hier klicken Taste.

  3. Klicken Sie auf die Schaltfläche, um sich mit dem Video-Chatraum zu verbinden. Erlauben Sie gegebenenfalls den Zugriff auf Ihre Kamera und Ihr Mikrofon. Sie sollten nun im Browser ein Bild von sich selbst sehen.

  4. Um sicherzustellen, dass der Video-Chat funktioniert, schalten Sie den Ton stumm, öffnen Sie dieselbe URL in einem anderen Tab, Browser oder Computer und klicken Sie, um den Anruf zu starten. Sie sollten nun zwei Videostreams in der Einbettung sehen.

Zusätzliche Räume schaffen

Es gibt zwei Arten von Einbettungen — iframe und Skript (siehe über (Weitere Informationen hierzu finden Sie hier). Die beiden Typen weisen die folgenden Grundformate auf:

iframe

<iframe
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&iframe=true&room=DEFAULT"
  allow="microphone; camera"
></iframe>

Skript

<div
  id="otEmbedContainer"
  style="width:[YOUR EMBED WIDTH];
  height:[YOUR EMBED HEIGHT]"
></div>
<script
  src="https://[YOUR EMBED HOST]/embed/embed/ot-embed.js?embedId=[YOUR EMBED ID]&room=DEFAULT"
></script>

In beiden Fällen ist das Ende des src Die URL ist ein Parameter room=DEFAULT. Dieser Parameter gibt den „Raum“ an, der von der Einbettung verwendet wird – wenn mehrere Benutzer auf eine Einbettung mit derselben embedId und room Parameter, starten sie eine Video-Chat-Sitzung, in der jeder Nutzer die Videostreams der anderen Nutzer sehen kann. Wenn die Räume nicht übereinstimmen, werden sie nicht demselben Raum beitreten.

Wenn Sie denselben Einbettungscode verwenden möchten, um mehrere separate Räume zu erstellen, können Sie den Parameter „room“ ändern, um einen neuen Raum anzulegen. Sie könnten beispielsweise einen Einbettungscode erstellen mit room=group1 und ein weiteres mit room=group2 — Jeder Nutzer, der den Raum „group1“ betritt, kann die Streams aller anderen Nutzer sehen, die ebenfalls den Raum „group1“ betreten haben, sieht jedoch keine Nutzer, die den Raum „group2“ betreten haben.

Beachten Sie bitte, dass die maximale Teilnehmerzahl bei einer einzelnen Zimmer ist drei.

Anwendungsfälle für mehrere Räume

Während die Raumparameter Auch wenn dies für die Erstellung einer Produktions-App mit Einbettungsfunktionen nicht erforderlich ist, gibt es mehrere Möglichkeiten, diese Funktion zu nutzen, um eine wesentlich robustere Videoanwendung zu erstellen. Hier sind einige Beispiele für die Einsatzmöglichkeiten:

  • Programmgesteuerte Raumerstellung — Wenn Sie eine Anwendung haben, die Personen dynamisch in privaten Video-Chat-Räumen miteinander verbinden muss (zum Beispiel einen Arzt und einen Patienten), könnte Ihre serverseitige Anwendung für jedes Treffen eine eindeutige „Raum“-ID generieren. Anschließend könnten Sie einen Iframe oder ein Skript-Snippet für den eingebetteten Video-Chat erstellen, wobei Sie diese ID als room Parameter – Die Nutzer würden dann die dynamisch erstellte Einbettung in ihrem Browser laden und so denselben Raum betreten wie alle anderen Nutzer mit derselben Raum-ID.
  • Von Nutzern erstellte Räume — Sie könnten den Nutzern die Möglichkeit geben, über ein Formular auf Ihrer Website einen Raumnamen anzugeben, bevor Sie einen Chatraum „erstellen“, dem andere beitreten können. Diesen Raumnamen könnten Sie dann als room Parameter. Andere Nutzer könnten dann denselben Raumnamen eingeben, um derselben Video-Chat-Sitzung beizutreten.
  • Übermittlung von Raum-IDs über eine Website-URL — wenn Sie einen Raumnamen über eine URL übergeben möchten (z. B. www.example.com?room=group1), bräuchte man lediglich etwas clientseitigen Code, um die URL zu analysieren und beim Laden der Seite durch den Nutzer ein Embed zu erstellen, wobei die ?room Parameter in die Einbettung src URL. Die Live-Beispiel Oben auf dieser Seite finden Sie ein Beispiel für diesen Anwendungsfall in der Praxis.

Unterstützte Website-Plattformen

Video-Chat-Einbettungen können derzeit in Websites integriert werden, die mit einer der folgenden Plattformen erstellt wurden:

  • WordPress-Hosting-Account (kostenpflichtig)
  • Squarespace
  • Zoho Sites

Derzeit stehen folgende Plattformen zur Verfügung nicht kompatibel mit Einbettungen:

  • Kostenloser WordPress-Account
  • Weebly
  • Wix

Außerdem funktionieren Einbettungen bei den folgenden Online-Code-Editoren nicht ordnungsgemäß:

  • Codepen.io
  • JSFiddle
  • JSBin

Beispiel-Applikation

Diese Beispiel-Webanwendung zeigt Ihnen, wie Sie mit Node.js dynamische Einbettungsräume für Video-Chats im Rahmen eines 1:1-Terminablaufs erstellen können. Dies lässt sich für Arzt-Patient- oder Lehrer-Schüler-Beziehungen sowie für jede andere 1:1-TerminplanungsApplication im Web nutzen.

Unterstützung

Falls Sie Probleme bei der Einbindung haben und auf dieser Seite keine Antwort finden, können Sie Wenden Sie sich an unser Support-Team.