Chat Plays OBS

Twitch Hackathon project for https://twitchstreamertools.devpost.com/

How to use

• Step 1: Add the Extension to your twitch account
• Step 2
  • add one of the below options to your obs custom docks
  • 

Option 1: Hosted

• https://stg.chronx.dev/chat-plays-obs/index.html#/
• 
• Add that dock to your OBS view.

Option 2: Local

• Clone this project.
• Go to the streamerAppOBS folder.
• Open terminal.
• npm install
• npm run dev
• Add localhost:5173 as the URL for the custom dock.
• 
• Add that dock to your OBS view.

Results

How It Works

• Click Data Processing:
  • Users interact via clicks in the frontend.
  • Clicks are processed and translated into commands to move OBS sources.
• OBS WebSockets:
  • Local WebSocket controls modify OBS sources in real-time.
  • Sources can be repositioned or adjusted dynamically based on input.
• Room Creation:
  • Uses a Rust-based WebSocket backend to create and manage rooms.
  • Supports multiple concurrent streams with separate configurations.

Graph of the system

Graph provided by vivax3794