@nexbasira/embed
Een browserwidget die de veldkant-ervaring van NexBasira in uw eigen app rendert. Plaats een <div>, wijs die naar een gegenereerde sessie-URL en luister naar levenscyclus-events. Geen iframe-boilerplate die u zelf moet schrijven.
Installeren
npm install @nexbasira/embedOf via een <script>-tag voor niet-gebundeld gebruik — zie Script tag hieronder.
Basisgebruik
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 is de eenmalige ondertekende URL die uw backend terugkrijgt van sessions.invite(). Embed nooit een API-secret in de URL — alleen het veldsessie-token, dat eenmalig + IP/UA-gebonden is.
Imperatieve methoden
Met de geretourneerde widget-handle kan de host-pagina de veldkant-ervaring programmatisch aansturen — doorgaans gebruikt door een toolbar buiten het 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 listenersElke methode plaatst een bericht naar het window van het iframe via postMessage met de geconfigureerde expectedOrigin; de interne dispatcher van het iframe routeert ze naar de relevante control.
Levenscyclus-events
Elke callback die u meegeeft aan embed({ on... }) wordt aangeroepen wanneer de bijbehorende postMessage van het iframe binnenkomt. De origin-controle wordt afgedwongen — berichten van elke andere origin worden genegeerd, dus u kunt de payload-vorm vertrouwen.
| Callback | Wordt aangeroepen wanneer | Payload |
|---|---|---|
onReady | iframe klaar met laden + handshake | — |
onSessionJoined | Veldgebruiker is de room binnengekomen | sessionId |
onSessionComplete | Sessie gesloten (operator beëindigd of automatisch verlopen) | sessionId |
onEvidenceAdded | Nieuwe snapshot / annotatie / whiteboard / clip | { id, kind } |
onWhiteboardOpened | Whiteboard-paneel geopend | — |
onWhiteboardSaved | Whiteboard geëxporteerd naar Evidence | { id } |
onParticipantJoined / onParticipantLeft | Statuswijziging deelnemer | { id, role } |
onError | Elke fout aan iframe-zijde | { message, code } |
Script tag
Voor gebruikers zonder 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>
De bundle koppelt NexBasira.embed aan window voor dit patroon.
Origin-pinning
Standaard leidt de widget de verwachte iframe-origin af uit de URL die u meegaf (sessionUrl) en weigert berichten van elke andere origin. Host u de veldkant-ervaring op een eigen domein (Pro-niveau), geef dan expectedOrigin expliciet mee:
embed({
container: "#nb-host",
sessionUrl: "https://inspect.yourco.com/r/abc",
expectedOrigin: "https://inspect.yourco.com",
// ...
});
React-app?
Gebruik @nexbasira/react in plaats daarvan — dezelfde widget eronder, idiomatische React-API (<NexBasiraSession>-component + useNexBasiraSession()-hook), verse-closure-callbacks over re-renders heen.
Wat nu
- @nexbasira/react — React-wrapper
- @nexbasira/node — server-side SDK om de
sessionUrl te genereren - Broncode op GitHub