Système d‘incrustation dynamique et administrable pour stream live.

• Gestion d'une grille des programme pour affichage auto du nom de l‘émission courante + curseur de progression + Horloge
• Affichage d'un logo personnalisable
• Sélection des tweets à afficher, relatifs à un hashtag ou à un compte
• Sélection des commentaires à afficher, relatifs à une vidéo Facebook Live
• Affichage des réactions relatives à une vidéo Facebook Live
• Bandeau de news telex administrable
• Affichage auto du titre/artiste à chaque début de chanson (+ mode manuel)

Ce projet a été créé à la base pour le compte d'une radio rock parisienne en 2015, qui l'a exploité plusieurs années (vidéo 1, video 2, vidéo 3). Il a été libéré et utilisé pour la diffusion vidéo live de l'émission couvrant la cérémonie des Oscars 2020 le 9 février 2020 sur BLP Radio à la MJC Boby Lapointe de Villebon-sur-Yvette. Depuis il sert d'habillage pour les streams Live de l'association AD'HOC, conjointement avec le projet dynamic-background pour générer un fond dynamique.

• Un serveur : /app/server.js

  • Application node.js / socket.io. Réceptif à divers messages envoyé par websocket

• Une webapp "habillage" : /

  • Simple page web en full HD (1920x1080 non responsive) affichée dans un navigateur plein écran dont la sortie vidéo doit être envoyée au mélangeur vidéo. La couleur de chromakey (le fond vert virtuel) est appliquée à la balise . OBS peut bypasser cette valeur pour la rendre transparente.

• Une webapp "console d‘administration" : /admin
  • Prévisualisation live de l'habillage
  • Gestion (ajout/suppression) de messages telex
  • Gestion (ajout) du titre/artiste en mode manuel
  • réception et modération des flux sociaux
    • derniers tweets des critères (track+lang) sélectionnés
    • derniers commentaires de la vidéo Facebook Live sélectionnée
    • bouton ON AIR pour affichage sur l‘habillage

L'exemple est prévu pour Debian GNU/Linux avec systemd. L'app marche aussi sous MacOS à l'exception des services systemd. Sans doute sous MS Windows aussi (non testé).

cd /var/www
git clone https://github.com/aerogus/overlay-engine.git .
cd overlay-engine
cp conf/settings.json.dist conf/settings.json
vi conf/settings.json
cp conf/grid.json.dist conf/grid.json
vi conf/grid.json
npm install
cp services/overlay-engine-server.service /etc/systemd/system
systemctl daemon-reload
systemctl enable overlay-engine-server
systemctl start overlay-engine-server
crontab services/crontab

Le fichier de conf principal : conf/settings.json:

{
  "server": {
    "PORT": 80,
    "HOST": "overlay-engine-host"
  },
  "twitter": {
    "CONSUMER_KEY": "",
    "CONSUMER_SECRET": "",
    "ACCESS_TOKEN_KEY": "",
    "ACCESS_TOKEN_SECRET": ""
  },
  "facebook": {
    "APP_ID": "",
    "APP_SECRET": ""
  }
}

Les paramètres obligatoires sont server.PORT et server.host à renseigner.

Les 3 webapps sont sur https://overlay-engine-host, https://overlay-engine-host/admin

Par crontab, l'app app/watch-show.js est lancée toutes les minutes.

La source de données est conf/grid.json qui doit être modifié manuellement. C'est une grille de programme hebdomadaire.

{
  "monday":    { "0000-2400": "Nom de l'émission" },
  "tuesday":   { "0000-2400": "Nom de l'émission" },
  "wednesday": { "0000-2400": "Nom de l'émission" },
  "thursday":  { "0000-2400": "Nom de l'émission" },
  "friday":    { "0000-2400": "Nom de l'émission" },
  "saturday":  { "0000-2400": "Nom de l'émission" },
  "sunday":    { "0000-2400": "Nom de l'émission" }
}

systemctl enable overlay-engine-watch-song
systemctl start overlay-engine-watch-song

L'app app/watch-song.js doit être adaptée, spécifier le fichier source des données et le parser correctement.

Pour récupérer en temps réel les commentaires et réactions d'un Facebook Live, il vous faut créer une app Facebook.

• Créer une app FB sur https://developers.facebook.com/
• Récupérer l'identifiant d'app + la clé secrète dans "Paramètres" / "Général"
• L'app doit être "en ligne" (= pas "en développement")

systemctl start overlay-engine-watch-fb-comments@1234
systemctl start overlay-engine-watch-fb-reactions@1234

ou

cd /var/www/overlay-engine
npm run watch-fb-comments 1234
npm run watch-fb-reactions 1234

L'app app/watch-fb-comments.js prend 1 paramètre (1234), l'id de la vidéo facebook live L'app app/watch-fb-reactions.js prend 1 paramètre (1234), l'id de la vidéo facebook live

éditer dans settings.json la valeur de settings.facebook.APP_ID et settings.facebook.APP_SECRET.

Pour les messages sociaux twitter, vous devez avoir un compte sur cette plateforme, avoir créé une "app" et récupéré vos identifiants CONSUMER_KEY, CONSUMER_SECRET, TOKEN_KEY et ACCESS_TOKEN_SECRET et les saisir dans settings.json, section twitter.

L'app prend en paramètres :

• n°1 (obligatoire) TRACKS avec les hashtags et les comptes à suivre, séparés par des virgules. Ex: "@twitter,#twitter,#music"
• n°2 (optionnel) LANGUAGE, filtrage par langue (défaut: fr).

puis

systemctl enable overlay-engine-watch-tweets
systemctl start overlay-engine-watch-tweets

ou

cd /var/www/overlay-engine
npm run watch-tweets "@twitter,#twitter,#music" "fr"

• Tous les messages clients sont techniquement émis vers le serveur, le tableau ci-dessous est une vue simplifiée des échanges principaux
• Les clients n'écoutent que les messages qui les intéressent