@nexbasira/embed

Prohlížečový widget, který vykreslí terénní rozhraní NexBasira uvnitř vaší vlastní aplikace. Vložte <div>, nasměrujte jej na vytvořenou URL relace a naslouchejte událostem životního cyklu. Žádný iframe boilerplate, který byste museli psát sami.

Instalace

npm install @nexbasira/embed

Nebo přes tag <script> pro použití bez bundleru — viz Script tag níže.

Základní použití

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 je jednorázová podepsaná URL, kterou váš backend získá zpět z sessions.invite(). Nikdy nevkládejte tajný klíč API do URL — pouze token terénní relace, který je jednorázový a vázaný na IP/UA.

Imperativní metody

Vrácený handle widget umožňuje hostitelské stránce programově řídit terénní rozhraní — typicky používáno panelem nástrojů mimo iframe:

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

Každá metoda odešle zprávu do okna iframu přes postMessage s nakonfigurovaným expectedOrigin; interní dispatcher iframu je směruje k příslušnému ovládacímu prvku.

Události životního cyklu

Každý callback, který předáte do embed({ on... }), je vyvolán, když dorazí odpovídající postMessage z iframu. Kontrola originu je vynucena — zprávy z jakéhokoli jiného originu jsou ignorovány, takže můžete tvaru payloadu důvěřovat.

<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",
  // ...
});