deco/obs-ss-plugin-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
obs-ss-plugin-webui/README.md
Decobus 91ef418b1b
Some checks failed
Lint and Build / build (22) (pull_request) Failing after 43s
Details
Lint and Build / build (20) (pull_request) Failing after 46s
Details
Update project documentation with comprehensive architecture details 
- Enhanced CLAUDE.md with detailed architectural concepts and patterns
- Added dynamic table naming system documentation
- Documented persistent OBS connection management and dual integration
- Explained glass morphism UI architecture and real-time monitoring
- Updated README.md with modern professional presentation
- Added comprehensive setup instructions and feature highlights
- Included all development commands and API endpoint references
- Cross-referenced CLAUDE.md for detailed technical documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-19 04:47:47 -04:00

2.5 KiB
Raw Blame History

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

OBS Source Switcher Setup

  1. In OBS, configure Source Switcher properties
  2. Enable "Current Source File" at the bottom
  3. Point to one of the generated text files (e.g., large.txt, left.txt)
  4. Set read interval to 1000ms
  5. 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 streams
  • POST /api/addStream - Create new stream and OBS source
  • POST /api/setActive - Set active stream for screen position
  • GET /api/obsStatus - Real-time OBS connection status
  • GET /api/teams - Team management

See CLAUDE.md for detailed architecture documentation.