​

Video Room Embed Demo

​

What you build

​

Prerequisites

1. A scheduled video room exists in your organization. Create one under Rooms → scheduled rooms (see Video meetings). The demo joins real rooms; it does not create them.
2. A server-side endpoint that can call POST /api/v1/video/rooms/:id/join. Tokens are minted server-side with your API credentials — the browser never sees an API key. The demo page exercises this route for you; for your own page you proxy the same call through your backend.
3. The @devotel-orbit/web package installed on the site you plan to embed into (OrbitVideoRoom is exported from that package). The demo page already carries it, so this prerequisite applies to the page you ship, not the demo itself.

​

Step 1 — Pick a room and mint the join token

1. Pick a room from the picker (it lists your organization’s scheduled rooms) and optionally set a display name — that name becomes the label under your tile.
2. Click Join via SDK widget. The page calls POST /api/v1/video/rooms/:id/join — the same route your production backend will call — and the response carries both the token and the media-server endpoint (livekit_url, or its ws_url alias; either fills the widget).
3. The widget code loads only after you click Join, so opening the page costs no media bandwidth.

​

Step 2 — Mount the widget

​

Step 3 — Confirm the connection state

​

Step 4 — Copy the snippet into your page

<div id="orbit-video-embed-demo" style="height: 600px"></div>
<script type="module">
  import { OrbitVideoRoom } from "@devotel-orbit/web";
  const room = OrbitVideoRoom.init({
    container: document.getElementById("orbit-video-embed-demo"),
    token: "<server-minted token>",     // POST /api/v1/video/rooms/:id/join
    serverUrl: "<wss://media.orbit.devotel.io>", // join.livekit_url
    displayName: "<your display name>",
  });
  room.on("state", (s) => console.log("video room:", s));
</script>

​

Snippet-to-production checklist

• Server-side token mint. Your backend calls the join route and returns only the token plus endpoint to the browser. An API key never appears in page source.
• livekit_url passthrough. You forward the join response’s livekit_url (or ws_url) verbatim as the widget’s serverUrl — do not hardcode an endpoint.
• Sane display name. The name you pass reads sensibly under the participant tile; it is what other participants see.
• Cleanup on leave. Your page destroys the widget on leave and on navigation away, the same teardown the demo performs — no lingering camera or mic.

​

See also

• Embed a video-consultation button — the canonical production embed pattern (waiting room, recordings, retention).
• Video meetings — run scheduled video rooms from the dashboard.
• Video room access tokens — the token and permission model behind the join route.
• Web SDK — the @devotel-orbit/web package, including the OrbitVideoRoom config surface and event map.