Overlays HTML

Lance npm start dans html-overlays/ puis utilise ces URLs en source Navigateur OBS (fond transparent coché, sauf les scènes).

Remplace CHANNEL par ton pseudo Twitch, ou renseigne TWITCH_CHANNEL dans .env.

Sur le PC de live

Chat et alertes ne sont pas des WebM : c’est un mini-serveur à lancer sur la machine OBS (pas besoin de garder ce PC allumé).

  1. Copie le dossier html-overlays/ (clé USB / Drive).
  2. Installe Node.js LTS.
  3. Dans le dossier : npm install puis npm start.
  4. Chat OBS : http://127.0.0.1:5173/chat/?channel=TONPSEUDO
  5. Alertes : une fois, ouvre http://127.0.0.1:5173/auth (app Twitch + .env), puis source http://127.0.0.1:5173/alerts/ — laisse le terminal ouvert pendant le live.

Scènes et stinguer : fichiers dans export/ (starting.webm, pause.webm, ending.webm, transition.webm) → source Média OBS, boucle pour les scènes, coupe stinguer 1400 ms. Aucun serveur.

VPS : git privé, PUBLIC_URL=https://ton-domaine dans le .env du serveur (jamais dans git), HTTPS + proxy /ws. OBS pointe vers https://ton-domaine/chat/?channel=TONPSEUDO et https://ton-domaine/alerts/.

Chat (test) Messages fictifs · source OBS ~420×640 Chat live /chat/?channel=tonpseudo&theme=day Alertes (test) Follow / sub / gift / resub · ~960×240 Alertes live /alerts/ · EventSub (auth une fois) Le live va commencer 1920×1080 · scène de nuit Pause 1920×1080 · scène de nuit Fin du live 1920×1080 · scène de nuit Stinguer (aperçu) Export WebM : npm run render:stinger Connexion Twitch OAuth EventSub (follow / sub)