// Coulisses techniques

Outils de stream sur mesure

Les outils qui tournent derrière le stream, construits sur-mesure plutôt qu'avec des solutions toutes faites — développés ici avec Claude. Comment ils sont pensés, et ce qu'il a fallu résoudre pour que ça marche.

  • 14outils sur mesure
  • 15agents IA à l’agence
  • 2 000+tests automatiques
  • 24 h/24sur un Raspberry Pi
// Régie Mobile

Piloter le stream depuis le téléphone

Gérer le stream sans être devant l'ordinateur : titre, catégorie et tags enregistrés sur Twitch, minuteur de démarrage qui lance scène et micro, pause pub programmable, grille de scènes OBS, modération du chat YouTube en direct, récompenses de points de chaîne. En fin de live, la carte « Raid · La Cabane » liste les membres de La Cabane en direct : même jeu d'abord, puis les plus petites chaînes. Un appui lance le raid, un autre l'annule.

Image d'annonce aux couleurs du site, publiée sur Instagram et Bluesky. Moniteur de santé qui fait vibrer le téléphone si le stream se dégrade, simulateur d'alertes, résumé de session en Excel. Les confirmations s'affichent dans la régie, plus dans les fenêtres du navigateur, et l'appli Android ne pèse plus qu'environ 700 Ko.

Le vrai défi : la confier à d'autres streamers sans rien leur ouvrir. La régie fabrique elle-même un kit (page /kit) qui ne contient que les réglages de la personne, aucun accès de la régie d'origine. Les mises à jour sont signées : publiées en un clic, elles apparaissent chez les autres dans un bandeau « Mise à jour disponible », s'installent sur un appui, se défont si besoin et ne touchent jamais aux données.

Distribuable en kit à d'autres streamers, avec mises à jour automatiques signées
Node.js · React · zéro dépendance · signature Ed25519 · Android
Téléphone Mises à jour signées · GitHub Pages Serveur Node.js OBS Instagram Bluesky Chat YouTube La Cabane raid de fin de live
Aperçu de l'interface (d'après capture d'écran réelle)
RÉGIE MOBILE OBS Twitch YouTube TITRE On tente le rang silver ce soir CATÉGORIE VALORANT SCÈNES OBS Just Chatting Je reviens Stream en cours Fin
// Agence Aulit

Une agence IA dans un bureau pixel art

Un bureau en pixel art aux couleurs de la chaîne, où quinze personnages ont chacun leur métier : Max accueille les demandes et les répartit, Léa et Hugo développent, Nora prépare les streams, Sami et Jade s’occupent des réseaux et des visuels, Lina et Yanis montent les clips. Chacun est un agent IA qui travaille en arrière-plan.

Rien ne sort sans contrôle : tout outil ou site livré passe d’abord par Zoé, l’experte en cybersécurité, et toute publication attend une validation avant de partir par la Régie Mobile. Pendant un live, aucun chantier ne démarre, pour ne jamais gêner le stream.

Après chaque live, l’agence repère les moments forts (pics du chat, du son), découpe des extraits verticaux et propose les meilleurs, publiés ensuite sous-titrés. Chaque lundi, elle relit ce qui a coincé dans la semaine et propose ses propres améliorations.

Chaque mission a son rapport : ce qui a été fait, le contrôle de Zoé, et un bouton pour revenir à la version d’avant
Node.js · agents Claude Code · Régie Mobile · pixel art
Olivier une demande Max chef d’agence Dev Léa · Hugo Stream · réseaux Nora · Sami · Jade Clips Lina · Yanis Zoé contrôle
// twitch-alerts-bridge

Toutes les alertes, sans latence

Follows, subs, resubs, dons groupés, bits, raids, dons — un système bâti sur les webhooks EventSub de Twitch, avec ses propres sons synthétisés, un système anti-doublons et une file d'attente pour l'affichage dans l'overlay OBS.

Le plus dur n'a pas été le code mais le débogage : des redirections OAuth qui ne correspondaient pas, le pare-feu Windows qui bloquait des ports locaux, et un filtrage non documenté par Twitch qui ignore les follows de comptes trop récents.

Complété par un script Lua qui coupe l'écran de fin de raid automatiquement, avec délais réglables
Node.js · Twitch EventSub · OBS Lua
Twitch EventSub Bridge Node.js dédoublonnage + file Overlay OBS Son synthétisé
Aperçu de l'interface (approximatif)
Vue stream (overlay) ♥ NOUVEAU FOLLOW Viewer_1 File d'attente : 2 en attente
// labels-bridges

Le remplaçant maison de Stream Labels

Plutôt que de dépendre de Streamlabs, ces deux ponts (Twitch et YouTube) récupèrent les événements et les écrivent directement dans de simples fichiers .txt, lus par des panneaux HTML dans OBS.

Pas d'overlay complexe à charger, pas de service externe à surveiller — juste des fichiers texte relus à chaque changement. La solution la plus simple qui marche.

Intégré dans un overlay entièrement fait main — aucun asset ni template acheté, juste du code
Node.js · fichiers texte locaux
API Twitch YouTube Bridge Node.js .txt locaux Panneaux OBS
Aperçu de l'interface (d'après capture d'écran réelle)
Barre d'overlay (bas d'écran, mise à jour en direct) // DERNIER FOLLOW Viewer_1 // DERNIER SUB Viewer_2 // DERNIER DON Viewer_3 100 bits // DERNIER RAID Viewer_4 5 viewers
// Overlays & scripts OBS

Des scènes faites main, qui changent avec les saisons

Toutes les scènes du stream sont des pages web écrites maison et chargées dans OBS : une version de base et des versions festives ou saisonnières, avec les alertes et les labels intégrés directement dans l'overlay pour que tout reste uniforme. Le thème change à la main, par période, plutôt qu'à une date automatique.

Des scripts Lua pilotent OBS : un script de démarrage, un rafraîchissement des sources navigateur avec une case à cocher par source, la coupure automatique de l'écran de fin de raid, et l'affichage du morceau Spotify en cours d'écoute. Les mêmes éléments, anonymisés et documentés pas à pas, forment un kit réutilisable par quelqu'un qui débute.

Un « super dossier » de 11 dossiers numérotés rassemble tout l'environnement : site, widgets, overlays, ponts d'alertes et de labels, Régie Mobile, scripts Lua et panneaux
HTML · CSS · JavaScript · OBS Lua
Ponts alertes · labels Thèmes base · festifs Panneaux HTML sur mesure Overlay page HTML OBS sources navigateur Scripts Lua
// Carte à collectionner

Une extension Twitch multi-chaînes

Les viewers dépensent des points de chaîne pour ouvrir des packs de cartes à collectionner. Hébergée sur Render avec MongoDB Atlas, l'extension gère le français et l'anglais, des effets de cartes holographiques, un mode d'image pleine largeur, l'import de cartes en masse, et un bouton en libre-service pour que chacun supprime ses propres données.

Le morceau le plus coriace a été un problème de cache des sources navigateur OBS qui empêchait les nouvelles formes de pack de s'afficher correctement.

En cours : l'animation d'ouverture de pack dans l'overlay OBS
Extension Twitch · Render · MongoDB Atlas
Points de chaîne Extension Twitch multi-chaînes Render + MongoDB Pack de cartes Overlay OBS
Aperçu de l'interface (approximatif)
★ Ouverture de pack — carte holographique au centre
Panneau Twitch de la chaîne (d'après capture d'écran réelle)
Saison 1 0/12 Panneau Twitch de la chaîne — mis à jour en direct chaque saison
// Escape Fragments

Une escape room que le chat résout ensemble

Chaque viewer reçoit un fragment d'indice différent, et personne ne peut résoudre l'énigme seul : il faut mettre les indices en commun dans le tchat. Les fragments arrivent via une extension Twitch (le viewer partage son identité, sans rien taper), via la page joueur ou avec une commande dans le chat. Le serveur vérifie la signature Twitch de chaque viewer.

Autour du jeu : 27 scénarios dont 12 thématiques pour les fêtes du calendrier français, 28 thèmes visuels, une régie à onglets, un éditeur de scénarios avec aperçu en direct de l'overlay (couleurs, polices, image de fond), des profils d'agents avec classement, une télécommande installable sur téléphone et des annonces Discord. Chaque option — indices automatiques, mode traître, indice secret du streamer, mode versus, énigme entre streams — s'active depuis la régie.

Les cartes de résultat de fin de partie ne sont jamais publiées automatiquement : tout reste sous contrôle du streamer

Voir le classement des agents

Node.js · Extension Twitch · EventSub · MongoDB Atlas · Render
Viewers tchat · extension page joueur Serveur Escape Fragments Node.js · EventSub fragments répartis Overlay OBS Régie + télécommande Discord MongoDB
Aperçu schématique de la page joueur (illustration)
ESCAPE FRAGMENTS TON FRAGMENT Indice : « ▒▒▒▒ ▒▒▒ ▒▒▒▒▒▒ » Les autres viewers ont les morceaux qui te manquent ÉQUIPE fragments mis en commun Écris la solution dans le tchat pour valider l'énigme
// Quiz du chat

Un quiz culture gaming dans le chat

Un modérateur tape !quiz et le bot pose une question dans le chat : le premier qui trouve la bonne réponse marque des points, deux s’il répond vite. 177 questions sur 14 thèmes, de Mario à Valorant en passant par Minecraft, les jeux indés et le rétro.

Les réponses sont tolérantes (accents, majuscules, ponctuation, et une faute admise sur les mots longs), parce qu’on tape vite dans un chat. Les scores se cumulent d’un stream à l’autre sur une saison, avec !score et !classement, et chacun peut effacer le sien.

Le panneau « Quiz » sous le stream se régénère tout seul quand des questions sont ajoutées
Node.js sans dépendance · chat Twitch · compte bot dédié
Chat Twitch !quiz · réponses Bot quiz 30 s par question Question 177 · 14 thèmes Points 2 si rapide, sinon 1 Classement par saison
// Jeux mobiles

Quatre jeux, jouables partout

LUMEN (un puzzle de fusion d'orbes), ÉCHO (un labyrinthe dans le noir), Résonance (un jeu d'ondes) et Fragments (un party game d'évasion sur plusieurs téléphones, tiré d'Escape Fragments). Chacun se joue dans le navigateur et s'installe comme une appli (PWA), avec une version Android native visant le Google Play Store.

Les quatre partagent un Défi du jour : la même partie pour tout le monde, qui change à minuit heure de Paris, avec une série de jours consécutifs. Le résultat se partage en texte ou en image au format story, et chaque jeu présente les trois autres. Chacun garde son dépôt et son domaine : seul le code du défi est commun, copié à l'identique dans les quatre.

ÉCHO parle 7 langues, Résonance 6, LUMEN et Fragments le français et l'anglais. Chaque jeu a sa page de confidentialité et de conditions d'utilisation.

Applis Android prêtes pour Google Play, sortie à venir : en attendant, ils s'installent depuis la page Jeux

Voir les jeux

PWA · Android Studio · GitHub Pages
LUMEN fusion d'orbes ÉCHO labyrinthe dans le noir Résonance jeu d'ondes Fragments évasion multi-téléphones
// La Cabane

Le suivi des chaînes de la communauté

Le suivi existait d'abord dans un fichier Excel : Power Query pour récupérer followers et données de stream via l'API Twitch, une macro VBA pour les snapshots quotidiens, et des métriques SullyGnome ajoutées à la main — pas de scraping automatique, contraire à leurs conditions d'utilisation.

La Cabane en est la version web : un annuaire des streamers suivis (statut, rôle, historique de follows daté) et un pipeline de propositions où chaque chaîne passe par un vote du staff avant d'être acceptée. Les données vivent dans un dépôt privé ; un robot en tire une vitrine publique, sans aucune donnée interne, avec une page par streamer.

Les inscriptions aux événements passent par un relais Cloudflare : l'adresse secrète du salon Discord n'est plus dans la page publique. Un contrôle qualité Lighthouse tourne tout seul à chaque modification du site.

Volontairement séparée de la page Streamers de ce site — deux outils distincts, pas de pont entre les deux
Power Query · VBA · JSON · GitHub Actions · GitHub Pages · Cloudflare Workers
Équipe staff (avis) API Twitch (followers) cabane-data.json dépôt privé La Cabane (public)
Aperçu de l'interface (d'après capture d'écran réelle)
Chaîne Statut Rôle Follows Chaîne_A LIVE Présent Admin 615 Chaîne_B À renseigner — 252 Chaîne_C Présent Streamer 396 Suivi via l'API Twitch, relevés datés — exemple
// Bot Discord

Le gardien du serveur d'entraide

Le bot qui fait tourner le serveur d'entraide entre streamers. L'entrée est filtrée : les nouveaux membres acceptent le règlement puis soumettent leur chaîne Twitch ou YouTube pour vérification avant d'obtenir l'accès complet — pas une communauté ouverte à tout le monde.

Au-delà de l'accueil : modération avec escalade automatique après plusieurs avertissements, anniversaires, sondages, salons vocaux temporaires, zone promo avec délai entre deux posts, annuaire des membres, tickets, concours, et annonces automatiques (chaînes suivies en direct, jeux gratuits, paliers de followers). Un panneau d'administration web permet de tout gérer sans passer par les commandes Discord.

Le bot tourne sur un Raspberry Pi, et l'adresse du tunnel vers son panneau peut changer, ce qui cassait les connexions Discord et Twitch. Un relais Cloudflare à adresse fixe, tenu à jour par le bot, renvoie maintenant toujours vers la bonne. Le tout est surveillé par le tableau de santé présenté plus bas.

Le même bot tourne aussi sur d'autres serveurs, avec des réglages propres à chacun
Discord · commandes slash · panneau d'admin web · Raspberry Pi · Cloudflare Workers
Bot Discord Accueil & vérification Modération avertissements, escalade Vie du serveur Suivi Twitch & annonces
Aperçu de l'interface (approximatif)
/verification soumettre VÉRIFICATION Chaîne soumise — en attente de revue par le staff /live ajouter Pseudo_Streamer ✓ Chaîne ajoutée aux annonces de live
// Santé des services

Savoir en un coup d’œil si tout tourne

Une sonde installée sur le Raspberry Pi vérifie toutes les 5 minutes les bots, le tunnel du panneau, les sites, les extensions Twitch, les sauvegardes et le robot de La Cabane. Les sites hébergés gratuitement ne sont interrogés que toutes les 3 heures, pour ne pas épuiser leur quota.

Le résultat s’affiche sur un tableau privé, ouvert depuis le téléphone et protégé par un code envoyé par e-mail. Si un bot s’arrête, qu’un site tombe, qu’une sauvegarde prend du retard ou que le Pi ne donne plus de nouvelles, une alerte part dans un salon Discord privé.

Les tests simulent tous les services : aucun vrai bot ni site n’est touché pendant les essais
Node.js sans dépendance · cron · Cloudflare Workers · Discord
Bots du Pi BOT Aulit · Lugh Sites QG Lugh · extensions Sauvegardes robot La Cabane Sonde Pi · toutes les 5 min Tableau privé sur le téléphone Salon #santé alerte Discord
// Panneaux Twitch

Ce qui vit sous le direct

Les panneaux sous le stream : présentation de la chaîne, setup PC, réseaux, soutien, règles du chat, et un panneau planning qui renvoie directement vers le planning intégré à ce site plutôt que de dupliquer l'info à deux endroits.

Faits en HTML plutôt qu'avec l'éditeur de panneaux par défaut de Twitch, pour garder la même identité graphique que le reste de la chaîne.

Panneaux Twitch · HTML sur mesure
Aperçu de l'interface (d'après capture d'écran réelle)
À propos Présentation, ton de la chaîne, humour Règles Respect, pas de pub, vie privée protégée, FR uniquement Planning Horaires de la semaine → lien vers /planning
// Ce site

Un site qui se modifie sans code

Ce site est écrit en HTML, CSS et JavaScript simples, hébergé sur GitHub Pages, sans outil de build. Une page d'administration privée permet de tout changer depuis le navigateur : streamers, clips, planning (semaine type et changements ponctuels), À propos et FAQ, textes de chaque page, liens et bandeau d'annonce, nouvelles pages, liste des jeux. Chaque enregistrement devient une version sauvegardée, restaurable en un clic.

Des automatisations GitHub font le reste : statut Twitch (direct, abonnés, avatars), jeux récents, minification avec mise à jour du cache, vérification des liens et des données, tests dans un vrai navigateur et contrôle Lighthouse à chaque modification.

Côté visiteurs : pages Confidentialité et CGU, lecteurs Twitch chargés seulement après accord (ce sont eux qui déposent des cookies), données structurées pour Google, où les clips sont décrits comme des vidéos, et suivi dans la Search Console. Le site héberge aussi les mises à jour signées de la Régie Mobile.

Une règle maison : toute nouvelle page doit aussi être gérable depuis l'admin, et c'est vérifié automatiquement
HTML · CSS · JavaScript · GitHub Pages · GitHub Actions
Admin navigateur · sans code GitHub versions · données Site GitHub Pages Actions Twitch · tests