Boom Media ยท UI Samples for Review ยท Not Live Software

๐ŸŽ›๏ธ Camera Streams โ€” Admin Dashboard Mockups

How adding & controlling camera streams looks on BOTH sides: the Displayee admin (feature owner) and the BOO dashboard (reseller/client view via Displayee API) ยท July 13, 2026
These are visual samples for review before building into Displayee/app. Live demo running now: Tapo cam โ†’ go2rtc โ†’ browser (http://localhost:1984). Architecture & phases: decision doc.

1 ยท Displayee Admin โ€” new "Cameras" tab

Lives in the existing dashboard next to Media / Playlists / Screens / Videos. Reuses the pairing + player patterns already shipped.

  displayee.online / dashboard / cameras
๐Ÿ“ Media ๐ŸŽž๏ธ Playlists ๐Ÿ–ฅ๏ธ Screens ๐ŸŽฌ Videos ๐Ÿ“น Cameras ๐Ÿ“… Schedules โš™๏ธ Settings
Client: Gurapos ยท Location: Main St

Cameras

โŸณ Rescan bridge  ๏ผ‹ Add Camera
๐Ÿ”Œ Bridge: GURAPOS-BR-01 ONLINE  v1.9.4 ยท uptime 6d 4h ยท LAN 192.168.30.5 ยท outbound SRT โœ“
Logs  Update
โ–ถโ— LIVE2026-07-13 17:47
Living RoomOn signage
โ–ถโ— LIVE2026-07-13 17:47
Kitchen
โ–ถโ— LIVE2026-07-13 17:47
Register
โš OFFLINE
PatioCheck cam
CameraSourceSubstreamStatusViewersAudio
Living RoomTapo C210 ยท rtsp://โ€ฆ/stream2640ร—360 ยท H.264 ยท 512kLIVE2๐Ÿ”‡ OffManage
KitchenNVR ch3 ยท subtype=1704ร—480 ยท H.264 ยท 768kLIVE0๐Ÿ”‡ OffManage
RegisterNVR ch1 ยท subtype=1704ร—480 ยท H.264 ยท 768kLIVE1๐Ÿ”‡ OffManage
PatioNVR ch7 ยท subtype=1โ€”OFFLINE 2hโ€”๐Ÿ”‡ OffManage

"Add Camera" wizard (4 steps)

STEP 1 ยท DISCOVERBridge scans the site LAN for RTSP/ONVIF devices (like the VLAN scan that found the Tapo). Found devices listed with brand fingerprint; or "Enter RTSP URL manually."
STEP 2 ยท CONNECTEnter camera/recorder credentials. Presets per brand fill the URL pattern (Tapo /stream2 ยท Amcrest/Dahua subtype=1 ยท Hik /202 ยท VIGI /stream2 ยท XMEye variants). Credentials stay on the bridge โ€” never sent to cloud.
STEP 3 ยท TESTBridge pulls 5 s and shows a snapshot + codec report. Warns if H.265 (offers "use substream" fix) or bitrate > 1.5 Mbps.
STEP 4 ยท NAME & PLACEName it, pick the location, optionally assign to a screen/playlist tile right away. Done โ†’ tile goes live.

Camera "Manage" drawer โ€” the controls

Living Room LIVE

Bridge GURAPOS-BR-01 ยท added Jul 13, 2026
Stream quality (what viewers get)Substream 640ร—360 โ–พ
Audio
Locked off by default โ€” FL all-party consent law. Enabling requires owner attestation.
Show on signage screens
Continuous stream โ†’ Bunny CDN fan-out
Dashboard live view
On-demand only โ€” stream stops when no one watches
Snapshot refresh (thumbnail wall)Every 60 s โ–พ
Who can view
Owner ยท Managers ยท Custom list (reuses video-library member roles)
Owner + Managers โ–พ
Partner API access
Allows BOO (and other Boom apps) to embed this camera
Copy embed code  Restart stream  Remove camera

2 ยท BOO Admin โ€” enabling the add-on for a client

BOO doesn't own cameras (boundaries rule) โ€” it resells and embeds. The BOO admin just switches the add-on on; everything real happens in Displayee.

  BOO admin / clients / gurapos / add-ons
๐Ÿช Clients ๐Ÿ“‹ Orders ๐Ÿงพ Menus ๐Ÿงฉ Add-ons ๐Ÿ’ณ Billing

Gurapos โ€” Add-ons

Plan: BOO Pro ยท since 2024
๐Ÿ“น Security Camera Streaming Powered by Displayee
Live cameras in the client dashboard + on menu-board screens
TierUp to 8 cameras โ€” $99/mo โ–พ
Displayee link statusCONNECTED 4 cameras ยท bridge online
Show camera widget in client dashboard
BillingAdded to Stripe subscription โœ“
Toggling ON calls Displayee's partner API to link the org; camera setup itself happens in Displayee (or by the installer). BOO never stores stream credentials.

3 ยท BOO Client Dashboard โ€” what Gurapos sees

A "My Cameras" widget rendered from Displayee's partner API. Click a tile โ†’ full live view (sub-second WebRTC).

  BOO client portal / dashboard
๐Ÿ“Š Overview ๐Ÿ“‹ Orders ๐Ÿงพ Menu ๐Ÿ“น Cameras โญ Reviews

My Cameras ยท live ยท powered by Displayee

โ–ถโ— LIVE
Registerโคข
โ–ถโ— LIVE
Kitchenโคข
โ–ถโ— LIVE
Diningโคข
โš OFFLINE
Patioโคข
Client-side controls are deliberately minimal: watch, fullscreen, report-a-problem. All configuration lives with the Displayee org owner / installer.

4 ยท How the two sides talk โ€” Displayee partner API

Same pattern as the existing api/partner/screens route in Displayee. BOO is just the first consumer; Dashee could embed the same widget later.

BOO portal page Displayee (owns everything camera) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ GET /api/partner/cameras?org=gurapos โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ auth: partner key + org link returns: [{ id, name, status, โ—€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ snapshot_url, embed_url }] render tiles from snapshot_url user clicks tile โ—€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ embed_url = displayee.online/cam/{id}?token=SHORT-LIVED-JWT iframe loads โ†’ WebRTC (WHEP) from MediaMTX โ†’ sub-second live video MediaMTX auth-callback verifies the JWT per stream ยท per org
# New Displayee surface (P1 build, in the real repo โ€” not the GDrive copy):
supabase/migrations/012_cameras.sql   โ†’ di_bridges, di_cameras (RLS per org, like di_video_*)
src/app/api/cameras/*                 โ†’ CRUD + stream-token (signs the short-lived JWT)
src/app/api/partner/cameras/route.ts  โ†’ the BOO-facing endpoint above
src/app/dashboard/cameras/page.tsx    โ†’ ยง1 UI
src/app/cam/[id]/page.tsx             โ†’ token-guarded embed page (pattern: /g/[id])
src/components/CameraPlayer.tsx       โ†’ WHEP client (~60 lines) with MSE fallback (reuses VideoPlayer chrome)