A professional Next.js web application for managing live streams and controlling multiple OBS Source Switchers with real-time WebSocket integration and modern glass morphism UI.
afc6f5f3a8
- Add API key authentication middleware for all API endpoints - Fix path traversal vulnerability with screen parameter validation - Implement comprehensive input validation and sanitization - Create centralized security utilities in lib/security.ts - Add input validation for all stream and screen API endpoints - Prevent SQL injection with proper parameter validation - Add URL validation and string sanitization - Update documentation with security setup instructions - Pass all TypeScript type checks and ESLint validation Security improvements address critical vulnerabilities: - Authentication: Protect all API endpoints with API key - Path traversal: Validate screen names against allowlist - Input validation: Comprehensive validation with error details - XSS prevention: String sanitization and length limits 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|---|---|---|
| .forgejo/workflows | ||
| .github/workflows | ||
| app | ||
| components | ||
| lib | ||
| public | ||
| scripts | ||
| styles | ||
| types | ||
| .eslintrc.json | ||
| .gitignore | ||
| CLAUDE.md | ||
| config.js | ||
| middleware.ts | ||
| next.config.ts | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| postcss.config.mjs | ||
| README.md | ||
| tailwind.config.js | ||
| tailwind.config.ts | ||
| testObs.js | ||
| tsconfig.json | ||
OBS Source Switcher Plugin UI
A professional Next.js web application for controlling multiple OBS Source Switchers with real-time WebSocket integration and modern glass morphism UI.
Features
- Multi-Screen Source Control: Manage 7 different screen positions (large, left, right, and 4 corners)
- Real-time OBS Integration: WebSocket connection with live status monitoring
- Team & Stream Management: Organize streams by teams with full CRUD operations
- Modern UI: Glass morphism design with responsive layout
- Professional Broadcasting: Audio routing, scene management, and live status indicators
- Dual Integration: WebSocket API + text file monitoring for maximum compatibility
Quick Start
npm install
npm run dev
Open http://localhost:3000 to access the control interface.
Configuration
Environment Variables
Create .env.local in the project root:
# File storage directory (optional, defaults to ./files)
FILE_DIRECTORY=C:\\OBS\\source-switching
# OBS WebSocket settings (optional, these are defaults)
OBS_WEBSOCKET_HOST=127.0.0.1
OBS_WEBSOCKET_PORT=4455
OBS_WEBSOCKET_PASSWORD=your_password_here
# Security (IMPORTANT: Set in production)
API_KEY=your_secure_api_key_here
Security Setup
⚠️ IMPORTANT: Set API_KEY in production to protect your OBS setup from unauthorized access.
Generate a secure API key:
# Generate a random 32-character key
openssl rand -hex 32
Without an API key, anyone on your network can control your OBS streams.
OBS Source Switcher Setup
- In OBS, configure Source Switcher properties
- Enable "Current Source File" at the bottom
- Point to one of the generated text files (e.g.,
large.txt,left.txt) - Set read interval to 1000ms
- Sources will switch automatically when files change
Database Setup
# Create seasonal database tables
npm run create-sat-summer-2025-tables
Development Commands
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # TypeScript validation
Architecture
- Frontend: Next.js 15 with React 19 and TypeScript
- Backend: Next.js API routes with SQLite database
- OBS Integration: WebSocket connection + text file monitoring
- Styling: Custom CSS with glass morphism and Tailwind utilities
- CI/CD: Forgejo workflows with self-hosted runners
API Endpoints
GET /api/streams- List all streamsPOST /api/addStream- Create new stream and OBS sourcePOST /api/setActive- Set active stream for screen positionGET /api/obsStatus- Real-time OBS connection statusGET /api/teams- Team management
See CLAUDE.md for detailed architecture documentation.