feat: Add webcam overlay support to OpenHud #46
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit adds comprehensive webcam functionality to the HUD overlay with full admin panel configuration. ## Backend Changes: - Added webcam_settings table to SQLite database with default values - Implemented cameras API (models, service, controller, routes) - Added GET /api/camera/settings and PUT /api/camera/settings endpoints - Added Electron media permissions for camera access in main.ts - Implemented Socket.io event 'webcamSettingsUpdated' for real-time sync ## Frontend (Admin Panel): - Created WebcamSettings component with full configuration UI - Added settings to Settings page - Support for: - Enable/disable webcam overlay - Camera device selection (enumerateDevices) - Position (X, Y) and size (width, height) controls - Border styling (radius, width, color) - Opacity control with slider - Z-index configuration ## HUD Integration: - Created webcam.js overlay script with WebRTC implementation - Added middleware to inject Socket.io and webcam script into HUD HTML - Implemented drag-and-drop functionality for webcam positioning - Real-time settings updates via Socket.io - Graceful error handling for camera access issues - Automatic cleanup on page unload ## Features: - Live webcam preview in HUD overlay - Drag-and-drop positioning - Customizable appearance (size, border, opacity) - Real-time configuration updates - Device selection support - Works in Electron overlay (not OBS Browser Source due to browser limitations) All changes follow existing project patterns and code style.
- Add vdoNinjaUrl column to players table (database migration) - Update Player TypeScript interface to include vdoNinjaUrl - Update players API (insert/update) to handle vdoNinjaUrl field - Add VDO.Ninja URL input field in Players admin form - Add example placeholder for VDO.Ninja URL format This prepares the backend and admin panel for VDO.Ninja camera integration. Next step: implement HUD camera component with GSI observer_slot switching.
- Complete rewrite of webcam.js for VDO.Ninja iframe embedding - Load and cache player steamid → vdoNinjaUrl mappings from API - Listen to GSI 'update' events via Socket.io - Parse observer_slot and find corresponding player in allplayers - Switch camera iframe when observer changes players in CS2 - Implement smooth fade-out (500ms) → switch → fade-in animation - Position camera bottom-right (320x240, rounded corners) - Hide camera when no player in observer slot BREAKING CHANGE: Remove old WebRTC webcam implementation - Delete webcam_settings table and related database code - Remove /api/camera routes and controllers - Remove WebcamSettings UI component from Settings page - Cameras now use per-player VDO.Ninja URLs instead of local webcam
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This commit adds comprehensive webcam functionality to the HUD overlay with full admin panel configuration.
Backend Changes:
Frontend (Admin Panel):
HUD Integration:
Features:
All changes follow existing project patterns and code style.