@nexbasira/embed

Ένα widget προγράμματος περιήγησης που αποδίδει την εμπειρία πλευράς πεδίου του NexBasira μέσα στη δική σας εφαρμογή. Τοποθετήστε ένα <div>, στρέψτε το σε ένα δημιουργημένο session URL, ακούστε για συμβάντα κύκλου ζωής. Χωρίς boilerplate iframe που πρέπει να γράψετε μόνοι σας.

Εγκατάσταση

npm install @nexbasira/embed

Ή μέσω ετικέτας <script> για χρήση χωρίς bundler — δείτε Ετικέτα script παρακάτω.

Βασική χρήση

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 είναι το one-shot υπογεγραμμένο URL που επιστρέφει το backend σας από το sessions.invite(). Ποτέ μην ενσωματώνετε ένα API secret στο URL — μόνο το field-session token, το οποίο είναι μιας χρήσης + καρφιτσωμένο σε IP/UA.

Επιτακτικές μέθοδοι

Το επιστρεφόμενο handle widget επιτρέπει στη σελίδα host να οδηγεί την εμπειρία πλευράς πεδίου προγραμματιστικά — τυπικά χρησιμοποιείται από μια εργαλειοθήκη εκτός του 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

Κάθε μέθοδος στέλνει ένα μήνυμα στο παράθυρο του iframe μέσω postMessage με το διαμορφωμένο expectedOrigin· ο εσωτερικός dispatcher του iframe τα δρομολογεί στο σχετικό control.

Συμβάντα κύκλου ζωής

Κάθε callback που περνάτε στο embed({ on... }) καλείται όταν φτάνει το αντίστοιχο postMessage από το iframe. Ο έλεγχος origin επιβάλλεται — μηνύματα από οποιοδήποτε άλλο origin αγνοούνται, οπότε μπορείτε να εμπιστευτείτε τη μορφή του payload.

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