Un Compteur de Followers Twitch en temps réel pour Streamlabs

Si vous tenez comme moi une chaine Twitch, l’envie d’afficher un compteur de followers en temps réel via Streamlabs vous a peut-être traversé l’esprit. Dans ce tuto, je vais vous proposer une solution permettant d’intégrer un compteur de followers Twitch en temps réel via une simple URL et 2 petits filtres. En plus, il y a même une petite animation lorsque le compteur s’incrémente. Si c’est pas beau tout ça 🙂

Interface Live avec Compteur de Followers Twitch

Comment afficher le compteur de Followers sur Streamlabs ?

Pour commencer, rendez-vous sur le site https://freewebtools.com/twitch-follower-count/

Saisissez ensuite le nom de votre chaine Twitch dans le champ dédié.

Compteur de Followers Twitch

Une fois le nom de votre chaine inséré, le nombre de followers apparaît.

Copiez l’URL présente dans votre navigateur web.

Ouvrez ensuite StreamLabs, puis ajoutez une nouvelle source dans votre scène (via le bouton +). Choisissez comme source « Source du navigateur ».

Source navigateur

Collez ensuite l’URL précédemment copiée dans la fenêtre vous invitant à saisir l’URL de la source.

Apercu Compteur de Followers Twitch

Une fois que vous avez validé, le site entier s’affiche sur votre scène.


Si un encart de consentement cookie s’affiche, faites un clic droit sur la source, puis cliquez dans le menu déroulant sur Interagir. Cliquez ensuite sur le bouton de validation de consentement.

Nous allons à présent devoir ajouter des filtres afin d’avoir un rendu propre 🙂
Pour cela, nous allons dans un premier temps effectuer un rognage, afin de ne conserver que le nombre de followers.

Faite un clic droit sur votre source (depuis la scène), puis cliquez sur « Filtres« .

Filtres

Cliquez sur le bouton +, puis choisissez le filtre « Rogner/Ajouter une bordure« .

Ajout de filtres

Une nouvelle fenêtre s’ouvre avec l’aperçu du site et votre nombre de Followers sur Twitch.

Avec les différents champs Haut, Droite, Bas, Gauche, vous allez pouvoir saisir des valeurs afin de « rogner le site » pour ne conserver que la valeur chiffrée. Nous aurons ainsi au final que notre compteur de followers Twitch en temps réel.

Compteur followers rogné

Attention à bien conserver un peu de blanc tout autour pour avoir le petit effet d’animation mais aussi pour prévoir le jour où vous votre compteur aura un chiffre en plus 🙂

Bon… évidemment, le rendu n’est pas encore parfait. Tout ce blanc autour n’est pas très esthétique…
Nous allons maintenant voir pour détourer ce chiffre.

Pour cela, ajoutez un nouveau Filtre « Clé colorimétrique ». puis, renseignez les paramètres suivants :

Type de couleur-clé : personnalisée
Couleur-clé : #ffffff (ou choisissez blanc sur la palette)
Similitude : valeur maximale (soit 1000)
Finesse : 570
Opacité : 100
Contraste : le maximum (soit 1)
Luminosité : le maximum (soit 1)
Gamme : le maximum (soit 1)

Compteur de Followers Twitch détouré

En appliquant ces filtres, vous devriez avoir un compteur totalement détouré avec un chiffre blanc.

A vous maintenant d’habiller ce compteur avec les éléments graphiques de votre choix (textes, images…)

Bien évidemment, n’hésitez pas à tester d’autres combinaisons de filtres pour intégrer au mieux ce compteur à votre interface 🙂

Si vous souhaitez afficher l’heure sur votre live, découvrez également ce tutoriel permettant d’afficher une horloge sur streamlabs

Si tu as aimé... tu peux partager et/ou commenter :)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • mxilou dit :

    Bonjour commment faire pour avoir un fond transparent avec le chiffre noir au lieu de blanc

  • Lyroˇ dit :

    Bonjour,
    Il faut appliquer le filtre « Clé Chromatique » sur la couleur blanche.
    Une fois le filtre appliqué sur la couleur blanche, il suffit de diminuer la luminosité (au lieu de l’augmenter), toujours sur le filtre « Clé Chromatique »


Voici d'autres tutos qui peuvent t'intéresser

Un Générateur de Favicon pour votre site web

A la recherche d’un outil vous permettant de générer le favicon de votre site Web ? Real Favicon Generator est peut-être le générateur de favicon qu’il vous faut ! Customisez l’apparence de votre icône pour le web, iOS, Android, Windows et les moteurs de recherche…

Découvrir