iFrame und Web Komponenten

Übersicht

Sie können ein Veeting-Meeting auf zwei Arten in Ihre eigene Anwendung holen: Entweder betten Sie den ganzen Meetingraum als iFrame ein, oder Sie setzen einzelne Teile davon als Komponenten auf Ihre Seite. Diese Seite zeigt beides und sagt Ihnen, wann Sie was nehmen.

• Mit einem iFrame holen Sie den vollständigen Meetingraum samt dem Screen «Sitzung beitreten» mit wenigen Zeilen HTML auf Ihre Seite. Das geht am schnellsten, und damit fahren Sie in den meisten Fällen richtig.
• Mit Veeting Blocks bekommen Sie die einzelnen Komponenten (Video, Chat, Whiteboard, Teilnehmer und mehr) und ordnen sie in Ihrem eigenen Layout an. Nehmen Sie Blocks, wenn das Meeting wie ein Teil Ihres Produkts wirken soll und nicht wie ein Fenster darin.

Beides steuern Sie zur Laufzeit über dieselbe JavaScript-API.

Verwendung mit einem KI-Assistenten

Wenn Sie mit einem KI-Coding-Assistenten arbeiten, können Sie den folgenden Text in Ihren Assistenten kopieren und mit einem Satz ergänzen, der beschreibt, was Sie programmieren möchten.

Der Prompt verweist auf unsere Entwicklerdokumentation, die wir für Coding-Assistenten in einer separaten, token-optimierten KI-Version ausliefern.

Lies zuerst diese Seite, bevor Du Code schreibst:
https://www.veeting.com/de/developer-documentation/iframe-and-web-components

Sie beschreibt, wie man Veeting Rooms einbettet. Halte Dich an
diese fünf Regeln:

1. Die iFrame-Einbettung muss pro Instanz freigeschaltet sein.
   Bleibt das Fenster leer, prüfe zuerst den Antwort-Header
   X-Frame-Options, bevor Du den Code für fehlerhaft hältst.
2. Das allow-Attribut am iFrame ist Pflicht, sonst gibt es weder
   Kamera noch Mikrofon. Übernimm es exakt von dieser Seite.
3. Die einbettende Seite muss über HTTPS ausgeliefert werden.
4. Verwende in einer Meeting-URL oder einem meeting-id-Attribut
   die Nummer mit den Bindestrichen, nicht die 24-stellige id.
5. Frage mich, ob ich den ganzen Raum als iFrame oder einzelne
   Komponenten will. Für Komponenten nimm Veeting Blocks.

Was ich bauen möchte:

Den Meetingraum als iFrame einbetten

Zuerst: iFrame-Einbettung freischalten lassen

Diese Funktion ist standardmässig ausgeschaltet. Deshalb sehen die meisten beim ersten Versuch ein leeres Fenster. Jede Instanz hat ein Feature Flag allowIFrameEmbedding. Solange es aus ist, antwortet der Meetingraum mit dem Header X-Frame-Options: SAMEORIGIN. Der Browser weigert sich dann, den Raum in einer Seite auf einer anderen Domain darzustellen.

Bitten Sie uns oder Ihren Reseller darum, das Flag für Ihre Instanz einzuschalten. Die Einstellung liegt auf dem Server, von Ihrer eigenen Seite aus können Sie sie nicht umschalten.

Das Markup

Sie brauchen keine besondere Einbettungs-URL. Nehmen Sie die normale URL des Meetingraums, also genau die, die Ihre Teilnehmer auch direkt öffnen:

<iframe src="https://<DOMAIN-NAME>/meeting/<MEETING-ID>"
  allow="microphone;camera;encrypted-media;fullscreen;autoplay;display-capture;layout-animations;">
</iframe>

Das Attribut allow ist Pflicht. Fehlt es, sperrt der Browser dem Meetingraum den Zugriff auf Kamera und Mikrofon. Der Teilnehmer tritt dann ohne Medien bei und sieht dazu keine verständliche Fehlermeldung. Übernehmen Sie die Liste oben unverändert.

Hängen Sie an die src-URL Query-Parameter an. Damit geben Sie den Namen vor, überspringen den Screen «Sitzung beitreten», wählen ein Layout, blenden Abschnitte aus und einiges mehr. Was Sie über eine URL steuern können, steuern Sie im iFrame genauso.

Wenn das Fenster leer bleibt

Hier die Ursachen, nach Wahrscheinlichkeit geordnet:

1. allowIFrameEmbedding ist aus. Öffnen Sie die URL des Meetingraums direkt und schauen Sie sich die Response-Header an. Steht dort X-Frame-Options: SAMEORIGIN, haben Sie die Ursache gefunden.
2. Sie liefern Ihre Seite über HTTP aus. Der Meetingraum lässt sich nur von HTTPS-Origins aus einbetten.
3. Das Attribut allow fehlt oder ist unvollständig. Der Raum lädt dann zwar, aber Kamera und Mikrofon bleiben aus.
4. Eine Content-Security-Policy auf Ihrer eigenen Seite blockiert das Fenster. Prüfen Sie frame-src in Ihrer Policy, nicht in unserer.

Web-Komponenten

Neben Veeting Blocks gibt es einige eigenständige Web-Komponenten. Das sind eigene HTML-Tags, mit denen Sie einen Teil der Meeting-Funktionen ohne iFrame und ohne Build-Schritt einbetten. Konfigurieren können Sie sie ausschliesslich über HTML-Attribute.

Was soll ich nehmen? Für neue Projekte nehmen Sie Veeting Blocks. Blocks deckt weit mehr vom Meetingraum ab, wir entwickeln es weiter, und es bringt eine vollwertige JavaScript-API mit. Die eigenständigen Komponenten bleiben für bestehende Integrationen erhalten.

Eine Komponente besteht aus zwei Teilen: einem HTML-Element und einem Skript, das es zum Leben erweckt. Setzen Sie das Skript hinter das Element.

Das Element

Sie konfigurieren das Element über Attribute. Hier am Beispiel der Komponente Coffee Table:

<coffee-table api-host="https://<DOMAIN-NAME>"
  participant-name="Joe Doe"
  meeting-id="3973-0113-4384-0768"
  css-url="https://<URL to an external CSS file, optional>"></coffee-table>

Die Skripte

Sie brauchen zwei davon. Das erste ist der offizielle WebRTC-Adapter, der Browserunterschiede ausgleicht. Das zweite ist die Komponente selbst. Laden Sie diese von Ihrer eigenen Instanz, dann passt sie immer zu Ihrer Plattformversion.

<!-- WebRTC adapter, for browser compatibility -->
<script type="text/javascript"
  src="https://webrtc.github.io/adapter/adapter-latest.js">
</script>

<!-- the web component itself -->
<script type="text/javascript"
  src="https://<DOMAIN-NAME>/component/coffee-table/elements.js">
</script>

Häufige Fehler

• Ein iFrame einbetten, bevor allowIFrameEmbedding eingeschaltet ist, und dann das leere Fenster für einen Fehler im eigenen Code halten.
• Das Attribut allow weglassen. Der Teilnehmer tritt dann ohne Kamera und Mikrofon bei.
• Die einbettende Seite über HTTP ausliefern.
• Die 24-stellige id des Meetings an meeting-id übergeben. Dort gehört die Nummer mit den Bindestrichen hin.
• Das Komponentenskript von einer anderen Instanz laden als der, die in api-host steht.
• Das Komponentenskript vor das Element setzen, das es zum Leben erwecken soll.
• Ein neues Projekt auf den eigenständigen Komponenten aufbauen statt auf Veeting Blocks.