simple-obs-overlay

An Electron application with React and TypeScript designed for basic OBS Studio control through an overlay.

Features

• OBS Integration: Connect to OBS Studio via WebSocket protocol
• Basic OBS Controls: Manage core OBS functionality through a simple overlay
• Status Monitoring: Monitor OBS stream and recording status
• Cross-platform: Works on Windows, macOS, and Linux
• Modern UI: Built with React and Ant Design

Technologies

• Electron: Cross-platform desktop app framework
• React: UI library for building interfaces
• TypeScript: Type-safe JavaScript
• Redux Toolkit: State management
• OBS WebSocket: Communication with OBS Studio
• Ant Design: UI component library
• Styled Components: CSS-in-JS styling

Prerequisites

• Node.js (v14 or higher)
• OBS Studio with WebSocket plugin enabled

Recommended IDE Setup

• VSCode + ESLint + Prettier

Project Setup

Install

$ npm install

Development

$ npm run dev

Type Check

$ npm run typecheck

Linting & Formatting

$ npm run lint
$ npm run format

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

Configuration

The app requires a connection to OBS WebSocket. You can configure the connection settings in the app's settings panel:

• Host: The IP address of your OBS instance (default: 127.0.0.1)
• Port: The WebSocket port (default: 4455)
• Password: Your OBS WebSocket password (if configured)

Main Functionality

• Connect to your OBS instance via WebSocket
• View and control basic OBS settings
• Monitor stream and recording status
• Quick access to essential OBS controls without switching to the main OBS window

Project Structure

• /src/main - Electron main process code
• /src/renderer - React application (renderer process)
• /src/preload - Preload scripts for secure IPC communication
• /resources - Application resources

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT