svgdemo

YouTube live chat draws on a shared SVG canvas — live in every browser via websockets.

What it does

• Watches a YouTube live stream's chat (via pytchat)
• Chat commands draw on a shared SVG canvas:
  • !svg <circle cx="100" cy="100" r="40" fill="red" /> — append SVG
  • !undo — remove the last shape
  • !clear — wipe the canvas
• Every browser stays in sync over websockets (Flask-SocketIO) — no refresh needed
• Basic dark-theme CSS, toolbar for quick shapes, local test box

Allowed SVG tags: circle rect line ellipse polyline polygon path text g. Everything else (including <script> and on* handlers) is stripped.

Run

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
# edit .env and set streamid to your YouTube live video ID
set -a; source .env; set +a
python app.py

Open http://localhost:5000

Without a valid streamid, YouTube polling is disabled and the app still works — use the test box / toolbar on the page to draw (great for local dev).

Config

var	description
streamid	YouTube live video ID (also accepts YOUTUBE_VIDEO_ID)
PORT	HTTP port (default 5000)
SECRET_KEY	Flask secret key

Project layout

app.py               # Flask + SocketIO + pytchat poll thread + SVG sanitizer
templates/index.html # canvas + live chat + toolbar (socket.io client)
templates/chat.html  # pop-out live chat view
static/style.css     # basic dark theme

Health

GET /health → {ok, video_id_set, svg_count, chat_count}