Chat Plays OBS

Streamer is able to select Sources from obs that chat can control

Comment

Chat Plays OBS

Project Description

This project enables Twitch chat users to interact with a streamer’s OBS setup by moving OBS windows around based on click data. Utilizing OBS WebSockets locally, we dynamically control and modify sources on the streamer's PC, offering interactive and engaging stream experiences. This experience is great for everyone, but can really augment an IRL stream.

How to use

  • Open OBS and navigate to the top menu. Click on Docks > Custom Browser Docks
  • Enter a recognizable name for the dock and paste the following URL: https://chronx.dev/chat-plays-obs/embed.html
    • Click Apply
    • A new window dock with your selected name should appear.
    • Add the dock to a specific area in OBS if you want to make live changes.
    • Follow the instructions provided in the newly created dock to complete the setup.
  • you can also run this locally if you want, check github link at the bottom

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.

Challenges

  • Documentation Spread:
    • Understanding Bit interactions was challenging due to the spread-out documentation.
    • Unified docs for extension-based interactions would streamline development.

Accomplishments

  • Backend Communication:
    • Successfully established real-time communication between a backend server and OBS using WebSockets.
  • Room Creation and Flexibility:
    • Enabled multiple streams to use the system, showing the scalability of this interaction model.

Learnings

  • Scope Management:
    • Certain Bit-based interactions were scaled back due to time constraints.
    • Focused on delivering core features with time-sensitive adjustments.

Future Development

  • Frontend Enhancements:
    • Adding advanced CSS to make visual interactions more engaging.
    • Expanding window interaction options, such as rotations and scaling.
    • Check the latest branch, we have migrated the whole project to a obs panel!
Share this project:

Updates