Skip to content

feat: implement HueCue tracker as OBS Browser Source#111

Draft
Copilot wants to merge 2 commits into
masterfrom
copilot/implement-tracker-as-obs-extension
Draft

feat: implement HueCue tracker as OBS Browser Source#111
Copilot wants to merge 2 commits into
masterfrom
copilot/implement-tracker-as-obs-extension

Conversation

Copilot AI commented Apr 12, 2026

Copy link
Copy Markdown
Contributor

Replaces the WPF→WebSocket→screenshot pattern with a self-contained HTML/CSS/JS overlay that runs natively inside OBS as a Browser Source, eliminating the need for a separate process for in-OBS monitoring.

New: HueCue.BrowserSource/

  • obs-source.js — OBS WebSocket v5 client: SHA-256 auth handshake, GetCurrentProgramScene + GetSourceScreenshot capture loop, dispatches obsframe DOM events. All connection params configurable.
  • histogram.jsOffscreenCanvas pixel sampling → per-channel histogram → R/G/B line-graph rendering, matching WPF app style.
  • overlay.js — Rule-of-thirds grid (canvas lines) and heat-map zone overlay (CSS grid with semi-transparent divs), matching WPF colour palette.
  • face-detector.js — MediaPipe BlazeFace via TensorFlow.js CDN; colour-cycled bounding boxes + white keypoints. Degrades gracefully if unavailable.
  • index.html — Wires all modules; all settings driven by URL query params. Shows an interactive settings panel when previewed outside OBS (window.obsstudio absent), auto-hidden inside OBS.
  • styles.css — Transparent background; histogram panel CSS position variants (right / below).
  • README.md — Setup guide, full URL param reference, troubleshooting.

Configuration via URL params (no code changes needed)

file:///…/index.html?obsPort=4455&histogram=right&guide=thirds&faceDetection=true&fps=30&imageQuality=85
Param Default Values
obsHost / obsPort / obsPassword localhost / 4455 / (empty) connection
histogram right right | below | none
guide none none | thirds | heatmap
faceDetection true true | false
fps 30 1–60
imageQuality 85 1–100

Updated

  • docs/OBS-Setup.md — Rewritten: Browser Source is now the primary integration method; WPF app documented as secondary (director/monitoring display use case).
  • build_app.yml — Adds a BrowserSource Actions artifact step to bundle the overlay files alongside each release.

Recursive-capture note: placing the Browser Source in the same scene it screenshots will include the previous frame's overlay. Use a dedicated monitoring scene or Studio Mode preview for a clean signal.

Copilot AI and others added 2 commits April 12, 2026 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants