Je veux tester !

Bandeau & Scoreboard pour festivals de podcast

Expérimentations
obs overlay nodecg

Principe & Fonctionnement

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 boulot 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…

Ainsi, je développe des éléments d’habillages visuels contrôlés via un système appelé NodeCG.

C'est quoi NodeCG ?

NodeCG est un outil open-source permettant de créer et gérer des éléments graphiques de stream en HTML/CSS/JavaScript.

Puissant et flexible, il nécessite toutefois des bases en code et peut être complexe à prendre en main pour un débutant.

Site officiel de NodeCG
Sur le panneau d’administration de NodeCG (à gauche), sélectionner une émission dans le menu déroulant entraîne le changement des informations sur le bandeau.
Sur le panneau d’administration de NodeCG (à gauche), il est possible de contrôler l’apparition et le contenu du tableau des scores sur l’overlay (score, nom d’équipe…)

Création & Dev

Tour 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 outils 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 apparait sur l’overlay dans une source “Navigateur Internet” dans OBS
  • un fichier “dashboard”, l’élement du panneau d’administration pour contrôler l’élément sur 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 à 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 : “horaires, émission, réseaux sociaux etc…”.

Une fois que tout est prêt et testé (c’est important), 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.

Outils & technologies