Skip to main content

​
Video Room Embed Demo

The Video Room Embed Demo page mounts the published @devotel-orbit/web OrbitVideoRoom widget against one of your live video rooms, inside the dashboard. It runs the same code path a visitor’s browser runs after you ship the embed button: mint a server-side join token, hand it to the widget, watch the tile grid paint. When the join succeeds, the page shows the exact snippet a developer pastes into their own page — so you verify the integration in your tenant before a single snippet leaves the editor. Use it as a smoke test. A successful join here proves three things at once: your room exists and accepts joins, the join-token mint returns both a token and a media-server URL, and the widget renders the conferencing UI end to end.

​
Where the demo lives

Open Developer → Video Room Embed Demo in the dashboard, or navigate directly to /developer/video-embed-demo. The page carries two controls (room picker and display name), the widget stage, and — after a successful join — the copy-paste embed snippet.

​
1 — Pick a room and mint a join token

The room picker lists the scheduled video rooms in your organization (Rooms → scheduled rooms). Choose one, optionally set a display name, then click Join via SDK widget:
  1. The page asks your backend for a join token with POST /api/v1/video/rooms/:id/join — the same route the production embed uses. The token joins under your dashboard identity; the display name becomes the label under your tile.
  2. The join response carries both the token and the media-server WebSocket endpoint (livekit_url, or its ws_url alias — either fills the widget).
  3. The widget loads only after you click Join, so opening the page costs no media bandwidth.
If a join fails, the page surfaces a mapped error (“Couldn’t mint a join token” or “video room connection dropped”) rather than a raw transport string — retry, or pick a different room.

​
2 — Watch the widget paint

On success the widget mounts into the SDK widget card and paints its own tile grid and control bar — mute, camera, screen share, device picker, and leave. The page badge tracks the widget state (connecting, connected, error, disconnected). This is the same OrbitVideoRoom class and the same admin-free participant path that your website visitors will use. The page tears the widget down on leave, re-join, or navigation away — no lingering camera or mic.

​
3 — Copy the generated snippet

Once joined, the Embed snippet a developer copies card renders the assembly verbatim:
Copy it and wire the placeholders on your backend: mint a fresh token per click (never put an API key in the page), pass the join response’s livekit_url as serverUrl, and give the container any id you like.

​
4 — Before you paste the snippet

Verify these against the demo before shipping:
  • The room you will embed against exists and a join returns both token and livekit_url/ws_url.
  • The widget paints tiles and controls exactly as the demo shows.
  • Your backend mints the token server-side and returns only the token + endpoint to the browser.
  • The display name you pass reads sensibly under the participant tile.
For the full production pattern — waiting room with host admit, recordings on your storage, and a tenant-controlled retention window — follow the embed video consultation button guide.

​
Who can reach it

Access matches the SDK Live Demo softphone page: the dashboard’s owner, admin, and developer roles can open it — the roles that already build or embed developer-facing integrations. Every other role sees an access-denied notice, the same gate the softphone demo enforces.

​
See also