@nexbasira/embed
En browser-widget som renderar NexBasiras fältsida-upplevelse inuti din egen app. Släpp in en <div>, peka den mot en genererad session-URL, lyssna efter livscykelhändelser. Ingen iframe-boilerplate som du själv måste skriva.
Installera
npm install @nexbasira/embedEller via <script>-tagg för icke-buntad användning — se Script-tagg nedan.
Grundläggande användning
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 är den engångssignerade URL som din backend får tillbaka från sessions.invite(). Bädda aldrig in en API-hemlighet i URL:en — bara fält-session-token, som är engångsbruk och bunden till IP/UA.
Imperativa metoder
Det returnerade widget-handtaget låter värdsidan styra fältsidans upplevelse programmatiskt — används vanligtvis av en verktygsrad utanför iframen:
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 listenersVarje metod postar ett meddelande till iframens fönster via postMessage med den konfigurerade expectedOrigin; iframens interna dispatcher dirigerar dem till rätt kontroll.
Livscykelhändelser
Varje callback du skickar till embed({ on... }) anropas när det matchande postMessage från iframen anländer. Origin-kontrollen framtvingas — meddelanden från andra origins ignoreras, så du kan lita på payloadens form.
| Callback | Utlöses när | Payload |
|---|---|---|
onReady | iframe färdigladdad + handskakning klar | — |
onSessionJoined | Fältanvändaren anslöt till rummet | sessionId |
onSessionComplete | Session stängd (operatören avslutade, eller auto-utgången) | sessionId |
onEvidenceAdded | Ny skärmdump / anteckning / whiteboard / klipp | { id, kind } |
onWhiteboardOpened | Whiteboard-panelen öppnad | — |
onWhiteboardSaved | Whiteboard exporterad till Evidence | { id } |
onParticipantJoined / onParticipantLeft | Deltagarens tillståndsändring | { id, role } |
onError | Valfritt fel på iframe-sidan | { message, code } |
Script-tagg
För konsumenter utan 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>
Bundlen fäster NexBasira.embed på window för det här mönstret.
Origin-pinning
Som standard härleder widgeten den förväntade iframe-originen från URL:en du skickade (sessionUrl) och avvisar meddelanden från andra origins. Om du hostar fältsidans upplevelse på en egen domän (Pro-nivå), skicka expectedOrigin explicit:
embed({
container: "#nb-host",
sessionUrl: "https://inspect.yourco.com/r/abc",
expectedOrigin: "https://inspect.yourco.com",
// ...
});
React-app?
Använd @nexbasira/react istället — samma widget under huven, idiomatiskt React-API (<NexBasiraSession>-komponent + useNexBasiraSession()-hook), färska closure-callbacks över omrenderingar.
Vad händer nu
- @nexbasira/react — React-wrapper
- @nexbasira/node — server-side SDK för att prägla
sessionUrl - Källkod på GitHub