Aller au contenu principal

Overlays

Les overlays, tels que décrits précédemment, sont distribués sous la forme de pages HTML servies en HTTPS. Ils sont affichés par le biais de notre wrapper et font appel à nos frameworks JavaScript et CSS pour recevoir (observer) et envoyer (émettre) des événements ainsi qu'utiliser l'API JavaScript dOBS.

Un overlay peut par exemple afficher des messages de chat et des alertes tout en jouant des sons, ... Les possibilités offertes sont infinies, ce qui vous permettra de donner libre cours à votre imagination pour proposer à vos spectateurs l'expérience unique qui vous correspond !

Paramètres​

nomvaleuroptionnel
langLangue de l'interface utilisateur (détectée par défaut)oui
themeURL locale, distante ou de donnéesoui
fontsRequête Google Fonts, sans ?family=, ou falseoui
zoomPourcentage (1 soit 100% par défaut)oui
queueDurationNombre de secondes (10 par défaut)oui
antiSpamDeltaNombre de secondes (1 par défaut)oui
antiSpamThresholdNombre d'événements (3 par défaut)oui
volumePourcentage (1 soit 100% par défaut)oui

Le paramètre optionnel nommé lang permet de modifier la langue de l'interface utilisateur de l'overlay. Celle-ci est automatiquement détectée pour correspondre au réglage de votre installation d'OBS mais vous pouvez utiliser ce paramètre pour forcer la langue de votre choix. Les valeurs supportées actuellement sont en (anglais) et fr (français).

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?lang=fr

Tout comme pour notre dock, le style des overlays peut être modifié à la volée grâce à la fonctionnalité de thème via le paramètre optionnel nommé theme.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?theme=https://your-domain.com/theme.css
attention

L'attribut d'une source de type navigateur Web, dans OBS, nommé CSS personnalisé n'aura aucun effet sur notre wrapper ou sur l'overlay qui lui est associé ; ceci pour des raisons techniques et de sécurité.

Si vous souhaitez uniquement personnaliser les polices de caractères d'un overlay donné, écrire un thème n'est pas nécessaire, il suffit d'utiliser le paramètre optionnel nommé fonts pour charger celles-ci via l'API Google Fonts.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue
attention

La valeur du paramètre family de l'API Google Fonts doit toujours venir en premier et la valeur du paramètre display est block par défaut.

Il est important de redéfinir le même nombre de polices Google Fonts que celles déclarées par un overlay donné, ainsi que dans le même ordre ; nous vous invitons à consulter sa documentation à ce sujet.

Dans le cas où vous souhaitez passer plusieurs paramètres à l'API Google Fonts, il est important d'encoder (%2526) chaque caractère & séparant ceux-ci ; on écrira donc :

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue%2526display=auto

Au lieu de :

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=Tangerine|Bebas+Neue&display=auto

Vous pouvez également totalement désactiver le chargement de toute police Google Fonts en passant la valeur false.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?fonts=false

Lorsque vous utilisez un overlay donné et jugez que son affichage devrait être ajusté, nul besoin également de créer un thème, vous pouvez simplement utiliser le paramètre optionnel nommé zoom dédié à cet effet.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?zoom=1.5

Si un overlay utilise la classe Queue exposée par notre framework JavaScript, le paramètre optionnel nommé queueDuration permet de modifier la valeur de durée par défaut de toutes les instances créées.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?queueDuration=20

Si un overlay utilise la classe AntiSpam exposée par notre framework JavaScript, les paramètres optionnels nommés antiSpamDelta et antiSpamThreshold permettent respectivement de modifier les valeurs de delta et de seuil par défaut de toutes les instances créées. Ces deux paramètres sont indépendants.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?antiSpamDelta=5
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?antiSpamThreshold=10

Si un overlay utilise la classe Sound exposée par notre framework JavaScript, le paramètre optionnel nommé volume permet de modifier la valeur de volume par défaut de toutes les instances créées.

https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?volume=0.5
astuce

Vos overlays peuvent également gérer leurs propres paramètres, donnez leur simplement des noms qui n'entrent pas en conflit avec ceux faisant partie du système.

danger

De par leur nature (query string), les paramètres sont envoyés à nos serveurs. Ne passez donc jamais de données sensibles (identifiants, mots de passe, etc.) par ce moyen là.

Pour un exemple pratique, rendez-vous sur notre page dédiée au développement d'overlays.

Configurateur​

Overlays prêts à l'emploi​

Nous fournissons les overlays suivants, prêts à être utilisés et personnalisables. Ceux-ci sont open source et peuvent donc également servir de modèles à l'élaboration de vos propres overlays.