@nexbasira/embed
Selainwidget, joka renderöi NexBasiran kenttäpuolen kokemuksen omassa sovelluksessasi. Pudota <div>, osoita se muodostettuun istunto-URL:iin, kuuntele elinkaaritapahtumia. Ei iframe-boilerplatea, joka sinun pitäisi kirjoittaa itse.
Asennus
npm install @nexbasira/embedTai <script>-tagilla ei-bundatussa käytössä — katso Script-tagi alla.
Peruskäyttö
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 on kertakäyttöinen allekirjoitettu URL, jonka taustajärjestelmäsi saa sessions.invite():sta. Älä koskaan upota API-salaisuutta URL:iin — vain kenttäistunnon token, joka on kertakäyttöinen + IP/UA-sidottu.
Imperatiiviset metodit
Palautettu widget-kahva antaa isäntäsivun ohjata kenttäpuolen kokemusta ohjelmallisesti — tyypillisesti iframen ulkopuolella olevan työkalupalkin käyttämä:
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 listenersJokainen metodi lähettää viestin iframen ikkunaan postMessage:n kautta määritetyllä expectedOriginilla; iframen sisäinen dispatcher reitittää ne kyseessä olevaan ohjaukseen.
Elinkaaritapahtumat
Jokainen embed({ on... }):lle välittämäsi callback kutsutaan, kun vastaava postMessage iframesta saapuu. Origin-tarkistus pakotetaan — viestit miltä tahansa muulta originilta ohitetaan, joten voit luottaa hyötykuorman muotoon.
| Callback | Laukeaa kun | Hyötykuorma |
|---|---|---|
onReady | iframe latautui + kättely valmis | — |
onSessionJoined | Kenttäkäyttäjä liittyi huoneeseen | sessionId |
onSessionComplete | Istunto suljettu (operaattori päätti tai automaattivanheni) | sessionId |
onEvidenceAdded | Uusi tilannekuva / merkintä / valkotaulu / leike | { id, kind } |
onWhiteboardOpened | Valkotaulupaneeli avattu | — |
onWhiteboardSaved | Valkotaulu vietiin todisteeksi | { id } |
onParticipantJoined / onParticipantLeft | Osallistujan tilamuutos | { id, role } |
onError | Mikä tahansa iframe-puolen virhe | { message, code } |
Script-tagi
Kuluttajille ilman bundleria:
<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>
Bundle liittää NexBasira.embed:n windowiin tätä kuviota varten.
Origin-sidonta
Oletuksena widget johtaa odotetun iframe-originin välittämästäsi URL:stä (sessionUrl) ja hylkää viestit miltä tahansa muulta originilta. Jos isännöit kenttäpuolen kokemusta mukautetulla domainilla (Pro-taso), välitä expectedOrigin eksplisiittisesti:
embed({
container: "#nb-host",
sessionUrl: "https://inspect.yourco.com/r/abc",
expectedOrigin: "https://inspect.yourco.com",
// ...
});
React-sovellus?
Käytä @nexbasira/react sen sijaan — sama widget alla, idiomaattinen React-API (<NexBasiraSession>-komponentti + useNexBasiraSession()-hook), tuoreet sulkeuma-callbackit uudelleenrenderöintien yli.
Mitä seuraavaksi
- @nexbasira/react — React-kääre
- @nexbasira/node — palvelinpuolinen SDK
sessionUrl:in muodostamiseen - Lähdekoodi GitHubissa