Créer des bandeaux et des scoreboards pour un overlay de podcast sur OBS

Lors d’un festival de podcast, il est souvent nécessaire d’afficher à l’écran le nom de l’émission, les intervenants, les horaires ou encore les réseaux sociaux. Il fallait répondre à deux besoins :

Comment créer des éléments d’overlays de podcast pour OBS facilement contrôlables et réutilisables ?

Comment éviter d’avoir trop de manipulations à faire sur OBS Studio pour les bénévoles de la régie ?

Pour répondre à ces besoins, j’ai développé un overlay pour OBS Studio piloté par NodeCG, composé d’un bandeau dynamique et d’un scoreboard administrables en direct.

Quels besoins pour le festival ?

J’organise et travaille régulièrement sur l’aspect “Streaming” des événements que l’on organise avec l’association BadGeek. Dans ces festivals, des podcasts viennent sur scène pour enregistrer des épisodes en direct.

Une partie du travail repose sur la mise en place d’un habillage visuel et la façon de mettre en avant des informations sur ces podcasts : nom, horaires, réseaux sociaux….

Depuis quelques années, je procède ainsi à un travail “d’abstraction”, en développant des éléments d’overlays contrôlés via un système appelé NodeCG.

Pourquoi ne pas modifier directement les textes dans OBS Studio ? Sur un direct, chaque manipulation représente un risque d’erreur. Centraliser toutes les informations dans NodeCG permet de ne plus toucher aux sources Browser pendant la diffusion et de limiter les mauvaises manipulations.

Par exemple, des scoreboards pour les émissions de jeu.

Pourquoi utiliser NodeCG pour un overlay OBS ?

Tout repose sur un outil que j’utilise de plus en plus : NodeCG. Il s’agit d’un “framework”, d’un système qui permet de générer et de contrôler des éléments d’habillages visuels.

A terme, il est possible de se créer un vrai de régie pour gérer des streams complexes.

Le problème est qu’il n’est pas facile d’accès pour les débutant-e-s, car il faut savoir coder (HTML/CSS/Javascript) étant donné qu’il faut tout créer et coder à la main, de zéro.

Globalement ici, que ce soit pour le scoreboard ou le bandeau, je dois créer deux fichiers pour chaque élément :

• un fichier “graphics”, l’élément graphique qui apparaît sur l’overlay dans une source “Navigateur Internet” dans OBS
• un fichier “dashboard”, l’élément du panneau d’administration pour contrôler l’élément sur l’overlay.

Les informations sont synchronisées entre le dashboard et les éléments graphiques grâce aux Replicants de NodeCG, ce qui permet une mise à jour instantanée de l’overlay.

Le scoreboard n’a pas posé beaucoup de problème, il reste assez simple avec peu de fonctionnalités.

En revanche, le bandeau pour les émissions a demandé beaucoup de travail et il fonctionne comme suit :

Tout d’abord une animation pour faire apparaitre le bandeau pour l’émission en cours d’enregistrement avec les informations associées pendant 3 minutes, puis un autre bandeau qui succède pour afficher les informations de l’émission à suivre sur scène pendant 15 secondes, puis tout cela tourne en boucle.

Un fichier JSON stocke toutes les infos de l’ovelay en un point central : “horaires, émission, réseaux sociaux etc…”.

Une fois que tout est prêt et testé, il suffit de lancer NodeCG qui agit comme un serveur en local, puis il est possible d’intégrer le panneau d’administration directement dans un dock OBS ou alors l’ouvrir dans un navigateur web.

Ce projet m’a permis de construire un overlay OBS réutilisable pour plusieurs festivals de podcast. Grâce à NodeCG, les informations peuvent être modifiées en direct sans interrompre la diffusion, ce qui simplifie énormément le travail de régie.