YouTube Live Chat Client (WIP)

Build a desktop-operated, open-source YouTube Live chat client that delivers a fast, reliable stream of messages and allows a streamer to spotlight a selected chat message on an OBS-ready overlay.

Currently work in progress bugs might be there.

Key Features

High-Performance Chat: A sleek, minimal dashboard for monitoring YouTube Live chat in real-time.
OBS Integration: Select any message to instantly display it on an OBS-ready overlay.
Rich Message Support: Full support for Super Chats, gifted memberships, and user badges.
Compact and Efficient: A dark, minimalist UI designed to be space-efficient and easy on the eyes.
Intelligent Auto-Scroll: The chat automatically scrolls to new messages but stops when you scroll up to read previous messages.

Getting Started

Follow these instructions to set up the project for local development.

Prerequisites

Node.js (v20.x or later)
pnpm

Installation

Clone the repository:

git clone https://github.com/your-username/youtube-client.git
cd youtube-client

Install dependencies:
```
pnpm install
```

Running the Application

To start the development server for both the backend and frontend, run:

pnpm dev

The dashboard will be available at http://localhost:3000/dashboard.
The OBS overlay will be available at http://localhost:3000/overlay.

Usage

Once the application is running, open the dashboard. It will automatically connect to the YouTube Live stream specified in your .env file. If you need to connect to a different stream, you can use the connection prompt on the dashboard.

Technology Stack

Frontend: Next.js (React)
Backend: Node.js with Fastify and tsx
YouTube Integration: youtubei.js
Styling: Handcrafted CSS

2.0 KiB Raw Blame History