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 Response-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 Zeichen lange 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

Die iFrame-Einbettung 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, 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 bekommt keine verständliche Fehlermeldung dazu. Übernehmen Sie die Liste oben unverändert.

Hängen Sie an die src-URL Query-Parameter an. Damit geben Sie den Namen des Teilnehmers 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. Eine Content-Security-Policy auf Ihrer eigenen Seite blockiert das Fenster. Prüfen Sie frame-src in Ihrer Policy, nicht in unserer.

Lädt das Fenster dagegen: Hat der Teilnehmer weder Kamera noch Mikrofon, dann fehlt das Attribut allow oder ist unvollständig.

Web-Komponenten

Neben Veeting Blocks gibt es einige eigenständige Web-Komponenten. Das sind HTML-Tags von uns, 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 Skriptdateien. Die erste ist der offizielle WebRTC-Adapter, der Browserunterschiede ausgleicht. Die zweite ist die Komponente selbst. Laden Sie das Komponentenskript von Ihrer eigenen Instanz, dann passt es 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>

<!-- join the meeting; until then the component renders nothing -->
<script type="text/javascript">
  customElements.whenDefined("coffee-table").then(() => {
    document.querySelector("coffee-table").join();
  });
</script>

Die Komponente bleibt leer, bis Ihre Seite ihre Methode join() aufruft. Rufen Sie sie wie im Beispiel nach dem Komponentenskript auf.

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 Zeichen lange 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 zugehörige Element setzen.
• Vergessen, join() aufzurufen. Die Komponente bleibt dann leer.
• Ein neues Projekt auf den eigenständigen Komponenten aufbauen statt auf Veeting Blocks.