Découverte de NodeCG pour gérer des overlays de stream dynamiques

Après quelques années de tests et d’expérimentations sur OBS, je me suis rapidement heurté à certaines limites : je voulais plus de dynamisme, plus d’automatisation, plus de contrôle sur mes productions.

C’est à ce moment que je me suis penché sur NodeCG, un outil que j’avais depuis un moment dans mes favoris et que j’observais avec prudence.

NodeCG, c’est quoi au juste ?

NodeCG est un framework open-source conçu pour créer et gérer des éléments visuels pour vos streams :

• Scoreboards et tableaux de scores
• Bandeaux d’informations
• Timers et compte-à-rebours
• Interactions avec le chat
• Automatisation de scènes OBS
• Et tellement plus…

Le sujet qui fâche : les compétences requises

NodeCG n’est pas un logiciel “clé en main” avec des templates préconçus, ni un simple plugin à installer dans OBS : c’est un bac à sable où chaque élément doit être crée de zéro.

Pour comprendre et utiliser NodeCG, il vous faudra quelques connaissances de base en développement web : HTML, CSS, JavaScript, ainsi qu’une familiarité avec Node.js et l’architecture client-serveur d’un projet web, la gestion des paquets via npm et les lignes de commande.

Au début c’était la galère, d’autant plus que j’avais très peu de connaissances en développement web mais je n’ai jamais autant appris sur l’architecture Node, les websockets, et la communication client-serveur qu’avec NodeCG.

Comment fonctionne NodeCG ?

Pour utiliser NodeCG, il faut d’abord installer Node.js (version 22 ou moins obligatoire !) sur votre machine, puis l’installer dans un dossier dédié via npm (le gestionnaire de paquets de Node.js), ce qui vous permettra de lancer le serveur NodeCG localement et de gérer un “bundle”.

Le projet est globalement structuré autour de trois composants principaux qui communiquent entre eux : les graphics, les dashboards et l’extension.

1. Les “Graphics”

Les graphics sont les éléments graphiques dans votre stream: un scoreboard, un bandeau, un timer… Ils sont codés en HTML, CSS et JavaScript et intégrés dans OBS via des sources “Navigateur”.

Chaque “graphic” peut être mis à jour en temps réel depuis le dashboard avec NodeCG qui gère tout en arrière-plan.

1. Les “Dashboards”

Le dashboard est l’interface d’administration accessible depuis votre navigateur et où l’on peut créer des panneaux de contrôle.

C’est ici que l’on va coder une petite interface pour changer les scores d’un scoreboard, lancer un timer, ou modifier le texte d’un bandeau… Le dashboard communique avec les graphics via NodeCG, qui synchronise les données en temps réel.

3. L’Extension (le côté serveur)

L’extension est souvent la partie la moins facile à comprendre et exploiter au début, mais aussi la plus riche et la plus puissante, car c’est ici que tout le “travail de fond” s’effectue :

• Gérer une connexion avec OBS via l’API WebSocket, pour pouvoir ensuite contrôler le changement des scènes, la visibilité des sources, etc.
• Faire tourner un script qui va régulièrement récupérer des données depuis une source externe (Google Sheets, API, base de données…)
• Permettre des interactions avec d’autres services (Twitch, Discord…) à travers des apis

Personnellement, j’ai mis un certain temps avant de vraiment explorer cette partie, mais c’est là que NodeCG révèle tout son potentiel : c’est elle qui permet de créer des overlays dynamiques, automatisés et connectés à d’autres services.

Comment j’utilise NodeCG

J’utilise NodeCG de deux manières principales :

En local, chez moi : il tourne en fond pendant mes lives (quand j’en fais), et je garde toujours un œil sur le dashboard pour ajuster les éléments en direct.

En version portable, sur une clé USB : je peux lancer NodeCG sur n’importe quel PC, pratique pour gérer des événements en live.

Quelques cas d’usage

🎲 Actual Play de jeu de rôle à distance

Je gère un overlay pour mes parties de jeu de rôle en ligne avec NodeCG, ce qui me permet d’avoir un affichage plus dynamique et immersif

Tout d’abord,

Côté serveur :

• Connexion à FoundryVTT pour récupérer en temps réel les statistiques des personnages et les résultats des jets de dés, traités ensuite pour l’overlay.
• Connexion à un serveur Mumble pour détecter qui parle et animer les avatars des joueurs en conséquence.
• Connexion à OBS via le websocket pour gérer les scènes et les sources selon le déroulé de la partie.

Côté overlay :

• Avatars des personnages qui s’animent selon le joueur qui parle, avec effets visuels type “bulle de dialogue” et animations de dégâts ou soins.
• Fiches et panneaux d’informations dynamiques qui se mettent à jour en temps réel selon les statistiques des joueurs.
• Panneau affichant les résultats des jets de dés avec animations personnalisées.
• Éléments de décor thématiques qui évoluent selon l’ambiance de la partie.

Côté dashboard :

• Panneau de contrôle pour gérer les scènes OBS et afficher les personnages face à face pendant les discussions.
• Panneau pour activer les éléments de décor selon le déroulé de la partie.

🎤 Gestion du stream pour un festival de podcast

Chaque année, je coordonne l’aspect technique d’un festival de podcasts retransmis en direct sur Twitch. NodeCG nous facilite grandement la tâche :

Côté serveur :

• Script qui récupère régulièrement les informations du planning et des émissions depuis un Google Sheet.
• Script qui récupère les informations de la playlist VLC en local.
• Script pour afficher les messages du chat Twitch dans l’overlay.
• Connexion à l’API OBS pour gérer les scènes ou lancer des vidéos d’interlude.

Côté overlay :

• Affichage automatique du programme du jour.
• Jeu de Motus jouable via le chat Twitch, avec mise à jour en temps réel des propositions.
• Bandeau dynamique indiquant l’émission en cours et la suivante, avec scoreboard intégré.
• Page dédiée sur une tablette sur scène pour permettre aux intervenants de lire le chat, voir l’heure et lancer des jingles sur VLC.

Côté dashboard :

• Panneau de contrôle pour gérer les scènes OBS.
• Panneau pour gérer le bandeau d’informations et le programme en direct.