@nexbasira/embed

Ein Browser-Widget, das die NexBasira-Feldseite innerhalb Ihrer eigenen App rendert. Setzen Sie ein <div> ein, richten Sie es auf eine geprägte Sitzungs-URL aus, hören Sie auf Lifecycle-Events. Kein iframe-Boilerplate, den Sie selbst schreiben müssen.

Installation

npm install @nexbasira/embed

Oder via <script>-Tag für nicht-gebundelte Nutzung — siehe Script-Tag unten.

Grundlegende Nutzung

import { embed } from "@nexbasira/embed";

const widget = embed({
  container: "#nb-host",          // selector or HTMLElement
  sessionUrl: invite.url,          // minted by your backend via the Node/Python SDK
  width: "100%",
  height: "720px",
  onReady: () => console.log("iframe loaded"),
  onSessionJoined: (id) => console.log("field user joined", id),
  onEvidenceAdded: (ev) => console.log("evidence", ev),
  onSessionComplete: (id) => router.push(`/inspections/${id}`),
});

sessionUrl ist die signierte Einmal-URL, die Ihr Backend von sessions.invite() zurückerhält. Betten Sie niemals ein API-Secret in die URL ein — nur das Feldsitzungs-Token, das einmalig nutzbar + IP/UA-gebunden ist.

Imperative Methoden

Das zurückgegebene widget-Handle lässt die Host-Seite die Feldseite programmatisch steuern — typischerweise von einer Toolbar außerhalb des iframe genutzt:

widget.requestSnapshot();    // operator-side trigger; field captures a frame
widget.openWhiteboard();
widget.closeWhiteboard();
widget.switchCamera();        // toggle front / rear on supported devices
widget.mute();
widget.unmute();
widget.endSession();
widget.destroy();             // tear down the iframe + remove listeners

Jede Methode postet eine Nachricht an das Window des iframe via postMessage mit dem konfigurierten expectedOrigin; der interne Dispatcher des iframe leitet sie an die relevante Steuerung weiter.

Lifecycle-Events

Jeder Callback, den Sie an embed({ on... }) übergeben, wird aufgerufen, wenn die passende postMessage vom iframe eintrifft. Die Origin-Prüfung wird erzwungen — Nachrichten von jeder anderen Origin werden ignoriert, sodass Sie der Payload-Form vertrauen können.

<script src="https://unpkg.com/@nexbasira/embed@latest/dist/index.umd.js"></script>
<div id="nb-host" style="width: 100%; height: 720px"></div>
<script>
  const widget = NexBasira.embed({
    container: "#nb-host",
    sessionUrl: "<minted-by-your-backend>",
    onSessionComplete: (id) => alert("done: " + id),
  });
</script>

embed({
  container: "#nb-host",
  sessionUrl: "https://inspect.yourco.com/r/abc",
  expectedOrigin: "https://inspect.yourco.com",
  // ...
});