LIVE · AUDIT-KJEDE · EU-VERTET
SYSTEM · 99,99 % OPPETID
v 1.0 ↗ LAGET I EU

@nexbasira/embed widget

Nettleser-iframe-widget for å bygge inn NexBasira sin feltside-opplevelse i din egen app.

@nexbasira/embed

En nettleser-widget som gjengir NexBasira sin feltside-opplevelse i din egen app. Slipp inn en <div>, pek den mot en generert økt-URL, lytt etter livssyklushendelser. Ingen iframe-standardkode du må skrive selv.

Installasjon

npm install @nexbasira/embed

Eller via <script>-tag for bruk uten bundling — se Script-tag nedenfor.

Grunnleggende bruk

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 er den engangs signerte URL-en backend-en din får tilbake fra sessions.invite(). Bygg aldri inn en API-hemmelighet i URL-en — bare feltøkt-tokenet, som er til engangsbruk og IP/UA-låst.

Imperative metoder

Det returnerte widget-håndtaket lar vertssiden styre feltside-opplevelsen programmatisk — brukes typisk av en verktøylinje utenfor iframe-en:

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

Hver metode sender en melding til iframe-ens vindu via postMessage med det konfigurerte expectedOrigin; iframe-ens interne dispatcher ruter dem til den relevante kontrollen.

Livssyklushendelser

Hver callback du sender til embed({ on... }) kalles når den tilhørende postMessage fra iframe-en kommer. Origin-sjekken håndheves — meldinger fra andre origins ignoreres, så du kan stole på payload-formen.

CallbackUtløses nårPayload
onReadyiframe ferdig lastet + handshake—
onSessionJoinedFeltbruker ble med i rommetsessionId
onSessionCompleteØkt lukket (operatør avsluttet, eller utløpt automatisk)sessionId
onEvidenceAddedNytt øyeblikksbilde / annotering / tavle / klipp{ id, kind }
onWhiteboardOpenedTavlepanel åpnet—
onWhiteboardSavedTavle eksportert til bevis{ id }
onParticipantJoined / onParticipantLeftEndring i deltakerstatus{ id, role }
onErrorEnhver feil på iframe-siden{ message, code }

Script-tag

For forbrukere uten en bundler:

<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>

Bunten fester NexBasira.embed på window for dette mønsteret.

Origin-låsing

Som standard utleder widgeten forventet iframe-origin fra URL-en du sendte (sessionUrl) og avviser meldinger fra andre origins. Hvis du hoster feltside-opplevelsen på et eget domene (Pro-nivå), send expectedOrigin eksplisitt:

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

React-app?

Bruk @nexbasira/react i stedet — samme widget under panseret, idiomatisk React API (<NexBasiraSession>-komponent + useNexBasiraSession()-hook), callbacks med ferske closures på tvers av re-renders.

Hva nå