Production Command Center
Hookd' Live Dashboard
Fishing Chaos Demo Lock-In
Demo Operations
Run the show from one clean screen.
Use this as the desktop landing page. It summarizes Program, Preview, source health, phone/drone readiness, and the fastest controls for a live demo.
Program
Preview
Fast Actions
Live Source Snapshot
Mobile Producer Dashboard
v9.9.0 loaded. A phone can now run camera control and producer controls. Use this compact view for ICAST booth demos and quick switching from a mobile browser.
PROGRAM
PREVIEW
Source Switcher
Quick Graphics
Phone Camera Status
Fishing Chaos Demo Lock-In
v9.9.0 loaded. This booth-safe page prepares Hookd' Live for the Fishing Chaos demo without changing the working phone/drone ingest engine.
One-Click Demo Setup
Creates or repairs the demo source package:
- Host Phone
- Roaming Phone
- DJI Mavic 2 Pro Drone
- Source-linked graphics profiles
- Sponsor bug and safe starting Program/Preview
Demo Status
Demo Sources
Fishing Chaos Demo Flow
- Start MediaMTX.
- Start the secure phone tunnel.
- Pair Host Phone and Roaming Phone.
- Publish the DJI drone to the clean External RTMP URL.
- Show Drone in Program and Phone in Preview.
- Take between live sources and let source-linked graphics follow.
Clean DJI RTMP URL
Paste a copied DJI RTMP URL here to strip hidden line breaks before entering it in the controller.
Demo Checklist
Event Setup
Set the tournament details once. Graphics, lower thirds, slates, and preflight use this event package.
Event Card
Show Flow
Production Switcher
Hotkeys: 1-9 preview, Space = TAKE, U = Undo. Live route players appear when MediaMTX detects a source.
PROGRAM
PREVIEW
Live Multiview
Take History
Director Timeline
Camera Sources
v9.9.0 loaded. Phones are one source type, but Hookd' Live can also add RTMP/hardware encoders, OBS/capture-card sources, and manual MediaMTX paths to the same Program/Preview switcher.
Add Camera Source
For a YoloBox, hardware encoder, DJI drone/app, or another OBS machine, add an RTMP source and use the generated RTMP ingest URL. For a capture card already inside OBS, add an OBS / Capture Card source and map it to an OBS scene.
Source Types
Hookd' Live gives it a stream key and MediaMTX path.
Add a dedicated drone source, copy the RTMP ingest URL, then paste it into the DJI live-stream/custom RTMP workflow or a drone HDMI/encoder workflow.
Use OBS scene mapping; no phone pairing required.
Bind a source to a known path such as live/stage-cam.
DJI Mavic 2 Pro Quick Setup
- Add a DJI Mavic 2 Pro Drone Source.
- Copy its External device RTMP URL.
- Start MediaMTX with
npm run media:win. - In the DJI controller/app live-stream setup, choose the custom RTMP/live-stream option if available and paste the Hookd' Live External device RTMP URL, not localhost. If your controller/app does not provide custom RTMP, route the drone feed through HDMI/capture or an RTMP encoder and use the same ingest URL.
- Wait for MEDIA LIVE, then Preview/Take the drone like any other source.
All Camera Sources
Encoder / Drone Join Codes
v9.9.2 desktop polish. Phones still use the streamlined phone-control page. Hardware encoders, YoloBox, remote OBS, and drones now get short join codes so operators do not have to type long RTMP URLs.
Create Join Slot
Give field operators the Server URL and Join Code. If the device only has one RTMP field, give them the Full RTMP URL.
Operator Instructions
- Create a join slot.
- Send the operator the Join Help Page, or read them the Server URL and Join Code.
- Start MediaMTX with
npm run media:win. - Wait for MEDIA LIVE, then Preview/Take the source.
Two-field devices:
Server URL: rtmp://YOUR-IP:1935/live
Join Code: HL7K2Q
One-field devices:
rtmp://YOUR-IP:1935/live/HL7K2Q
Join Code Sources
Phone Network
Pairing
Bridge
Secure Phone Links
v9.9.0 loaded. Your phone can reach Hookd' Live, but camera access is blocked until the phone page is opened from a secure origin. This tab helps you switch the phone links from LAN HTTP to an HTTPS tunnel.
Current Phone Origin
Cloudflare Tunnel Quick Start
- Keep Hookd' Live running with npm start.
- Open another PowerShell window in this folder.
- Run npm run tunnel:cloudflare.
- Copy the https://...trycloudflare.com URL shown in that window.
- Paste it into the box on this tab and click Use This Secure Phone URL.
- Open a fresh phone-control link and tap CHECK CAMERA.
Pairing can work on HTTP. Camera/mic usually cannot. The phone camera test must be run from the HTTPS tunnel URL.
Secure Phone Links
Phone Validation
v9.9.0 loaded. This tab validates phone status. If CHECK CAMERA says Secure Context Blocked, go to Secure Phone Links and use an HTTPS tunnel URL.
Validation Summary
Test Order
- Click Copy Pair Link for one phone slot.
- Open that link on the phone.
- Confirm the phone auto-pairs.
- On the phone page, look for the green Phone Control Page box at the top.
- Tap TEST SIGNAL, then START PREVIEW, then GO LIVE from that phone screen.
- Keep this tab open and click Start Auto Refresh so signals appear without manual refresh.
- Preview/Take the phone source to prove switcher control.
Phone Proof Cards
Source Profiles + Linked Graphics
v9.9.0 loaded. Assign a person, angler, streamer, sponsor line, and graphic behavior to each camera. When that camera goes to Program, Hookd' Live can automatically load the correct lower third.
How it works
- Select a camera source.
- Link it to an angler or enter a custom display name.
- Keep Auto Lower Third on Program enabled.
- Take that camera to Program and the correct graphic loads automatically.
For the ICAST demo: Phone 1 can be Host Cam, Phone 2 can be Product Cam, and each one can carry its own label.
Audio Readiness
This build also labels audio per source: Audio OK, Muted, Video Only, Audio Unsupported, or Waiting. Full mixing comes later; this is the visibility layer.
Broadcast Graphics
Lower Third
Graphic Templates
Scoreboard / Sponsor / Ticker
Preview
OBS Overlay Output
Add this page as a Browser Source in OBS. It renders lower thirds, angler cards, leaderboard, sponsor bug, ticker, and slates with a transparent background.
Browser Source URL
OBS Browser Source recommendation: 1920 x 1080, shutdown source when not visible OFF, refresh browser when scene becomes active ON.
Overlay Status
Quick Graphic Actions
Live Visual Overlay Preview
This panel shows the same transparent overlay URL that OBS uses. If no graphic is enabled, this area may appear blank.
OBS Setup Steps
- In OBS, add a new Browser Source.
- Paste the overlay URL from this tab.
- Set width to 1920 and height to 1080.
- Place the Browser Source above your Program video source.
- Use the Graphics tab or quick buttons here to control what appears live.
OBS Scene Automation + Diagnostics
Use this to let Hookd' Live create/update OBS scenes and Browser Sources instead of manually building every scene. v9.0 added command timeouts, smoke testing, and visible result logs so buttons no longer fail silently. OBS must be open, OBS WebSocket must be enabled, and the OBS WebSocket URL/password in .env must match OBS.
Automation Settings
OBS Status
Setup Plan
Diagnostics
OBS Command Log
This shows the last OBS WebSocket requests and responses so a failed button is visible instead of silent.
Anglers / Leaderboard
Add Angler
Current Field
Distribution Hub
Program Output Source
OBS should publish the final Program feed here. Hookd' Live restreams this source to enabled destinations.
Add Custom RTMP Destination
Distribution History
Destinations
Preflight
Build Readiness
Loading...
Go-Live Preflight
Loading...
Viewer Page
Give sponsors, tournament directors, staff, or clients a clean page to watch the production without dashboard controls.
Public Watch Link
Also available at /watch and /feature.
Viewer Settings
Viewer Page Preview
Customization Studio
Customize Hookd' Live for a tournament, sponsor, client, or organization without changing the production engine.
Brand Identity
Upload / Apply Logo
Upload one logo and choose exactly where it should be used. Keep logos under 2.5 MB.
Logo Placement URLs
Logo Sizes
Viewer Logo Controls
These affect the public viewer page at /viewer, /watch, and /feature.
OBS Overlay Logo Controls
This gives you a persistent branded watermark option in OBS without changing your graphics engine.
Advanced Brand Preview
Camera Routing
Stream Keys & Ingest URLs
Camera Ingest Keys
Use these when a hardware encoder, OBS source, or future phone relay needs to publish video into Hookd' Live.
Program Output Key
OBS should publish the final switched Program feed here.
Stream Health
Monitors
Monitor Settings
Stable mode keeps OBS as the real live monitor. Controlled mode enables one embedded inspector route when available.