YouTube Live Chat Overlay

This project provides a customizable web-based overlay for displaying live chat messages from YouTube streams. It consists of a Python backend that scrapes chat data and a simple HTML/CSS/JavaScript frontend for rendering the overlay.

Features

Real-time display of YouTube Live Chat messages.
Automatic assignment of unique, persistent colors to chat participants.
Conversion of common text-based emotes to Unicode emojis.
Rich text markup for emotes (e.g., colored text).
Designed for use with streaming software like OBS Studio as a "Browser Source".

Installation and Usage

Prerequisites

Python 3.8+
pip (Python package installer)

Setup

Navigate to the project directory:

cd /home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay

Create and activate a Python virtual environment:

python3 -m venv venv
source venv/bin/activate # For Bash/Zsh
# or source venv/bin/activate.fish # For Fish Shell

Install required Python packages:

pip install Flask Flask-Cors pytchat rich

Running the Overlay

Start the Backend Server: Open your terminal, navigate to the project directory, activate your virtual environment, and run the backend.py script:
```
python overlay_backend.py
```
The script will prompt you to "Enter the YouTube Live Stream Video ID for the overlay:". Provide the 11-character ID of the live stream you wish to monitor and press Enter. The Flask server will start, typically on http://127.0.0.1:5000.
Open the Web Overlay:
- In a Web Browser: Open your preferred web browser and navigate to the index.html file located at /home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay/index.html. You can usually drag and drop the file into your browser, or type the full file:// path in the address bar.
- In OBS Studio (as a Browser Source):
  1. In OBS Studio, add a new "Browser" source.
  2. Check "Local file" and browse to select the index.html file.
  3. Set the width and height as desired (e.g., 1920x1080 or a custom size for your chat box).
  4. Ensure "Refresh browser when scene becomes active" is checked.

Development and Future Plans

For more detailed information on the project's current status, known issues, and future development ideas, please refer to the DEVELOPMENT_PLAN.md file in this directory.

2.5 KiB Raw Permalink Blame History