Des transitions OBS en HTML/CSS avec le plugin “Browser Transition”

Au fil de mes expérimentations sur OBS Studio, je me suis rapidement heurté à une frustration :

Pourquoi les transitions OBS sont-elles souvent limitées à une simple vidéo ou un fondu ?

Je voulais voir s’il était possible de créer des transitions OBS dynamiques en HTML, CSS et JavaScript, capables de s’adapter automatiquement au contexte du stream.

Pour cela, je me suis appuyé sur le super plugin Browser Transition, qui permet d’utiliser une page HTML comme transition de scène dans OBS Studio.

Le résultat est un système de transitions entièrement piloté par une page web : le contenu peut changer automatiquement selon la scène de destination, l’heure, le jeu en cours ou n’importe quelle donnée disponible via du JavaScript.

Comment fonctionnent ces transitions sur OBS ?

Sur OBS, il est possible de paramétrer différents types de transition entre les scènes : fondu, coupure, glissement, mais aussi des stingers (une petite vidéo au format mov ou mp4)…

Contrairement aux stingers classiques, qui reposent sur une simple vidéo, le plugin Browser Transition charge un fichier HTML au moment du changement de scène.

Cela permet d’utiliser toutes les possibilités du développement web :

• animations CSS
• logique JavaScript
• images générées ou chargées dynamiquement
• chargement de données JSON ou via une base de données
• chargement d’API externes
• adaptation du contenu en fonction du contexte (jour, heure, météo…)

Pour cet effet, il faut le plugin “Browser Transition” mais attention, cela nécessite de savoir un peu de connaissances en HTML/CSS Javascript.

Après avoir validé ce principe, j’ai imaginé plusieurs cas d’utilisation.

Transition Gaming/Just Chatting/React

Le premier prototype adapte automatiquement la transition selon la scène vers laquelle je me dirige.

Depuis ma scène d’attente, si je passe sur une scène Gaming, Just Chatting ou React, le menu se positionne automatiquement sur la bonne catégorie avant de laisser apparaître la scène suivante.

L’objectif était de rendre les changements de scènes plus cohérents avec le contenu du live sans avoir à créer une vidéo différente pour chaque situation.

Transition automatique pour le festival PodRennes

Le second prototype va encore plus loin.

Ce second test une transition dans le cadre du festival de podcast PodRennes. Toute la journée une série de podcasts vient se produire sur scène.

Au moment où la transition se déclenche, un script JavaScript consulte automatiquement la date et l’heure, puis récupère les informations correspondantes dans un fichier JSON contenant toute la programmation du festival.

La transition affiche alors automatiquement :

• le nom de l’émission
• son logo
• les informations associées (type d’émission, horaires…)

L’idée était qu’aucune manipulation ne soit nécessaire pendant le direct : la transition devait être capable d’identifier seule le podcast qui arrivait à l’antenne.

Ici, au moment de la transition :

• Du Javascript va consulter l’heure et le jour en cours afin de sélectionner les informations adéquates
• Pour sélectionner les informations, le fichier HTML va consulter un fichier .json qui recense toutes les informations des émissions au programme du festival.
• Ainsi au moment de la vidéo ci-dessus, c’était l’heure du podcast “SPOILERS L’émission”, le texte et le logo se sont mis à jour.

Pour ce second exemple, les essais étaient concluants mais pas assez pour être utilisé pendant le festival, dommage ¯_(ツ)_/¯.

Les premiers prototypes

Avant d’imaginer ces transitions contextuelles, j’ai commencé par réaliser plusieurs prototypes très simples afin de comprendre le fonctionnement du plugin Browser Transition.

Les deux premiers prototypes étaient volontairement simples, il s’agissait surtout de tester le fonctionnement sur OBS. Pour les deux transitions, un volet animé en CSS recouvre progressivement l’écran pendant qu’une image est injectée dynamiquement en JavaScript.

Sur le premier exemple, c’est le logo d’un podcast, pour le seconde exemple c’est une illustration du jeu en cours (Borderlands).

Je me suis basé sur l’esprit de ce CodePen.

Développement

La partie la plus intéressante de cette expérimentation n’était finalement pas l’animation elle-même, mais toute la logique qui l’entoure.

Le plugin Browser Transition ouvre une page HTML à chaque changement de scène. Cette page exécute son JavaScript exactement comme dans un navigateur classique.

J’ai donc pu utiliser les mêmes outils que pour un site web :

• HTML pour la structure
• CSS pour les animations ;
• JavaScript pour la logique ;
• JSON pour alimenter les contenus dynamiques.

Si vous déjà des connaissances de base là-dessus vous serez en mesure de créer vos propres transitions pour vos streams !

Cette approche ouvre énormément de possibilités : afficher le jeu en cours, récupérer des informations depuis une API, adapter automatiquement une transition selon la scène de destination ou encore personnaliser entièrement l’identité graphique d’un stream sans produire des dizaines de fichiers vidéo.