C'est quoi NodeCG ?
NodeCG est un framework basé sur Node.js permettant de créer et de piloter des éléments graphiques pour la diffusion en direct.
Il est particulièrement adapté aux projets de streaming et de broadcast : overlays, bandeaux, animations, informations dynamiques, gestion de caméras, interactions avec le chat, timers, cagnottes, etc.
NodeCG est souvent utilisé pour aider à la réalisation d’événements caritatifs et/ou de speedruns comme Speedons, Games Done Quick ou le ZEvent, où de nombreuses informations doivent être affichées et mises à jour en temps réel : compteurs, chronomètres, informations sur les jeux, classements, etc.
NodeCG ne fournit pas les élements graphiques
Section titled “NodeCG ne fournit pas les élements graphiques”C’est un point important à comprendre avant de commencer :
NodeCG ne fournit pas les éléments graphiques.
Il n’y a pas de collection d’overlays prêts à l’emploi, de templates à personnaliser ou d’éditeur graphique pour construire son habillage visuel comme peuvent le proposer certains services.
NodeCG fournit une boîte à outils, mais c’est à vous de construire les interfaces, les graphiques et la logique dont vous avez besoin.
Pour cela, vous utiliserez principalement des technologies comme : HTML, CSS et JavaScript, ainsi que Node pour la partie serveur.
Comment utiliser NodeCG dans un stream ?
Section titled “Comment utiliser NodeCG dans un stream ?”NodeCG est comme une petite régie qui fait le lien entre ce que l’on voit à l’écran et ce que l’on contrôle.
NodeCG est principalement composé de trois grandes parties : les Graphics, le Dashboard et les Extensions. Voici un premier aperçu de leur rôle.
Les Graphics : ce que le public voit
Section titled “Les Graphics : ce que le public voit”Les Graphics sont les éléments graphiques affichés à l’écran : un bandeau avec le nom des joueurs, un score, un compte à rebours, un classement, etc.
Dans OBS Studio, on peut ensuite les afficher grâce à une source Navigateur Web, comme s’il s’agissait d’une page Internet.
En résumé : les Graphics, c’est ce que le public voit.
Le Dashboard : ce que l’on contrôle
Section titled “Le Dashboard : ce que l’on contrôle”Le Dashboard est une interface de contrôle. C’est ici que l’on peut modifier les informations affichées dans les Graphics : changer le nom d’une équipe, modifier un score, lancer un compte à rebours, etc.
On peut donc le voir comme la télécommande des éléments graphiques.
En résumé : le Dashboard, c’est ce que l’on utilise pour contrôler le stream.
L’Extension : ce qui travaille en coulisses
Section titled “L’Extension : ce qui travaille en coulisses”L’Extension est la partie qui fonctionne en arrière-plan, côté serveur.
Elle permet notamment d’effectuer des tâches qui ne concernent pas directement l’affichage ou les contrôles.
Par exemple, une Extension peut communiquer avec OBS Studio pour connaître la scène actuellement affichée, détecter le début d’un enregistrement ou envoyer des commandes à OBS.
C’est souvent la partie la moins évidente à comprendre au début, car elle ne correspond pas directement à quelque chose que l’on voit à l’écran.
En résumé : l’Extension, c’est ce qui travaille en arrière-plan.
Et comment tout cela communique ?
Section titled “Et comment tout cela communique ?”Vous vous demandez peut-être maintenant comment les informations passent d’un Dashboard à un Graphic.
C’est justement l’un des rôles de NodeCG.
Pour le moment, retenez simplement que le Dashboard et le Graphic sont deux pages web distinctes et qu’ils ne partagent pas automatiquement leurs données.
NodeCG fournit des mécanismes permettant de partager des données et d’envoyer des événements entre ces différentes parties : les Replicant et les Messages
Nous verrons leur fonctionnement plus tard dans ce guide.
Comment j’utilise NodeCG : quelques cas d’usage
Section titled “Comment j’utilise NodeCG : quelques cas d’usage”NodeCG est devenu un élément central dans la façon dont j’organise mes overlays et mes outils de production de stream.
Je l’utilise notamment pour des projets très différents : émissions de jeu de rôle, festivals, podcasts, streams de cuisine ou encore émissions plus classiques.
Quelques exemples de ce que j’ai pu construire avec NodeCG :
-
J’ai un bot qui me permet de récuperer des informations de différentes chatrooms Twitch, pour ainsi afficher les messages à l’écran ou faire jouer le public à un jeu comme Motus.
-
Un système qui s’interface à OBS et qui me permet de changer les scènes ou modifier des éléments à distance.
-
Des éléments d’overlays dynamiques comme des bandeaux d’informations, des tableaux de score, des comptes à rebours… pour des jeux ou des festivals
-
Un système pour récupérer, sélectionner, afficher et permuter des angles de caméras pour la captation vidéo de podcasts ou de festivals
-
Un système pour récuperer automatiquement des données sur une feuille Google Spreadsheet pour synchroniser automatiquement des informations de festival à l’écran
-
Gérer des overlays de jeu de rôle connectés au service FoundryVTT permettant d’afficher en temps réel des résultats de jets de dé ou des statistiques de personnage
-
Se connecter à VLC, pour pouvoir ainsi le contrôler à distance : changement de playlist, changer de morceaux, play/pause…
