Afficher le chat sur un overlay

import { Aside } from ‘@astrojs/starlight/components’;

Un petit tour des options possibles que j’ai pu tester ou que j’utilise pour afficher une chatroom dans un overlay de stream. A vous de creuser !

Avec la chatroom Twitch

Une solution simple mais pas très propre consiste à intégrer la fenêtre du chat directement dans l’overlay. Cela peut dépanner pour commencer.

Ajoutez une source Navigateur et utilisez le lien de votre chatroom en version “fenêtré” (remplacez IDENTIFIANT par votre chaîne) :

   https://www.twitch.tv/popout/IDENTIFIANT/chat?popout=

Privilégiez un format en colonne avec hauteur ≈ 800 pixels et largeur ≈ 350 pixels. Vous pouvez rogner les éléments superflus en maintenant ALT et en ajustant la forme de la source.

Pour interagir avec le chat (cliquer sur “Accepter les cookies”, par exemple), utilisez l’option Interagir de la source navigateur.

Avec Prettych.at

Prettych.at propose plusieurs thèmes sympas (uniquement avec Twitch).

Indiquez le nom de votre chaîne Twitch et choisissez un thème.
Cliquez sur Create, récupérez le lien et ajoutez-le dans une source Navigateur (hauteur ≈ 800px, largeur ≈ 350-400px).

Si vous connaissez un peu le CSS, vous pouvez personnaliser l’apparence. Exemple pour rendre un arrière-plan violet transparent :

#root > div {
  background-color: transparent;
}

Avec ce petit bout de code, j’indique à ma page de remplacer la couleur d’arrière-plan actuelle (violet) par du transparent (pas de couleur), c’est la magie du CSS !

Avec KapChat

Kapchat permet d’intégrer rapidement une chatroom.

Choisissez un Chat Theme.
Collez le lien dans une source Navigateur (hauteur ≈ 800px, largeur ≈ 350px).

Avec un peu de CSS, vous pouvez ajuster le design comme pour Prettych.at.

Avec StreamElements

Connectez-vous à StreamElements avec Twitch.

Allez dans Streaming Tools → Overlays → New Overlay.
Cliquez sur Add Widget → Your stream’s chat, ajustez taille, polices, couleurs.
Récupérez le lien et collez-le dans une source Navigateur (hauteur ≈ 1920px, largeur ≈ 1080px).

Vous aurez plus de souplesse que les solutions précédentes, mais il faudra parfois ajuster entre StreamElements et OBS.

Pour un contrôle total, utilisez l’option Custom Widget dans StreamElements.

Permet de coder votre chatroom de zéro (HTML/CSS/JavaScript).
Idéal pour adapter le design à votre overlay.

Avec SocialStream

SocialStream, du créateur de VDO Ninja, permet d’intégrer plusieurs chatrooms (Twitch, YouTube, etc.) sur un overlay.

Très complet mais un peu complexe.
Supporte les extensions comme BetterTTV et 7TV.

Ma solution : NodeCG + tmi.js

De mon côté, j’utilise NodeCG combiné à tmi.js pour gérer le chat de façon plus avancée.

J’ai un dashboard centralisé où je peux voir et modérer le chat en temps réel.
Je peux afficher une chatroom graphique directement sur mon overlay, avec un style cohérent avec mes autres éléments visuels.
La modération est plus simple : je peux supprimer ou masquer les messages problématiques avant qu’ils n’apparaissent sur l’overlay.

⚠️ Cette solution est destinée à un public avancé : elle nécessite des compétences en JavaScript, en Node.js et une bonne connaissance de NodeCG.