59 lines
2.5 KiB
Markdown
59 lines
2.5 KiB
Markdown
# 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
|
|
|
|
1. **Navigate to the project directory:**
|
|
```bash
|
|
cd /home/joe/Cloud9/Documents/Obisdian/projects/Overlays/youtube-chat-overlay
|
|
```
|
|
|
|
2. **Create and activate a Python virtual environment:**
|
|
```bash
|
|
python3 -m venv venv
|
|
source venv/bin/activate # For Bash/Zsh
|
|
# or source venv/bin/activate.fish # For Fish Shell
|
|
```
|
|
|
|
3. **Install required Python packages:**
|
|
```bash
|
|
pip install Flask Flask-Cors pytchat rich
|
|
```
|
|
|
|
### Running the Overlay
|
|
|
|
1. **Start the Backend Server:**
|
|
Open your terminal, navigate to the project directory, activate your virtual environment, and run the `backend.py` script:
|
|
```bash
|
|
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`.
|
|
|
|
2. **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.
|