OBS : Comment afficher le chat Twitch

Lorsque l'on diffuse en Live ses parties de jeux sur Twitch avec OBS Studio, on souhaite souvent superposer le chat Twitch dans ses vidéos.
Être capable de consulter votre discussion pendant que le streaming est très important pour vous permettre d'interagir avec votre public.
L'ajout de la discussion à votre flux peut être un moyen amusant de faire entendre votre communauté ou de donner son contexte à ce dont vous parlez ou à qui vous parlez dans un obstacle YouTube.
Heureusement, cela est relativement simple car des widgets de chat de discussions Twitch existent pour s'intégrer dans vos vidéos de stream.

Voici un tutoriel sur la façon dont vous pouvez ajouter de la discussion chat à votre flux Twitch dans OBS Studio ou OBS Steam Labs.

Comment afficher le chat Twitch sur OBS Studio

Quels sont les widgets de chat Twitch pour OBS

Le chat Twitch est disponible publiquement via une URL.
Ainsi pour afficher le chat Twitch en overlay sur OBS, il vous suffit d'ajouter une nouvelle source navigateur avec son URL.
A partir de là, il devient possible d'ajouter le chat Twitch dans OBS dans une source sur OBS Studio.

Afficher le chat Twitch en overlay sur vos vidéos OBS Studio

Toutefois, sachez qu'il existe aussi des widgets gratuits, ces derniers proposent souvent des paramètres supplémentaires comme la possibilité de masquer les bots ou modifier le CSS pour personnaliser l'affichage du chat.
Souvent ils prennent en charge des émoticons et smileys BetterTTV ou FrankerFaceZ.

Ainsi, la première étape consiste à ajouter de la discussion à votre superposition consiste à choisir un widget de conversation que vous souhaitez utiliser.
Voici deux Widgets de chat Twitch :

Comment afficher le chat Twitch en overlay sur stream vidéo OBS Studio

Avec le chat officiel de Twitch

Voici comment superposer le chat officiel de Twitch sur votre vidéo OBS.
L'URL de votre chat Twitch est de la forme suivante, il suffit donc de remplacer le nom d'utilisateur.

https://www.twitch.tv/popout/<nom utilisateur>/chat?popout=

Au besoin voici comment récupérer l'URL du chat Twitch :

  • Connectez-vous à Twitch
  • Puis faites un clic sur votre avatar
  • Dans le menu déroulant cliquez sur Chaîne
Afficher la chaîne Twitch
  • Puis cliquez sur Chat fenêtré
Ouvrir le chat en fenetré
  • Le chat Twitch s'affiche en popup ce qui permet d'afficher la barre d'adresse
  • Sélectionnez l'adresse complète
  • Puis faites un clic droit et copier
Récupérer l'URL du chat Twtich
  • Puis dans Sources, cliquez sur l'icône +
  • Et sélectionnez Navigateur dans la liste
Ajouter une nouvelle source navigateur dans OBS Studio
  • Ensuite saisissez le nom de la nouvelle source, par exemple chat Twitch
Ajouter une nouvelle source sur OBS Studio Chat Twitter
  • Puis dans URL copier/collez l'URL du chat Twitch
Comment afficher un chat Twitch sur OBS Studio
  • A partir de là, il s'affiche en overlay sur votre vidéo Twitch. Redimensionnez et affichez le chat dans l'emplacement souhaité
Superposer le chat twtich sur vos vidéos OBS Studio
Bravo ! vous avez réussi afficher le chat Twitch en overlay sur vos vidéos OBS Studio

KapChat

Dans cette seconde méthode, je vous montre comment afficher KapChat en overlay sur OBS.

Générer URL KapChat pour superposer le chat twtich sur un stream OBS Studio
  • Saisissez le nom de votre compte Twitch
  • Réglez les paramètres du chat Twitch
Générer URL KapChat pour superposer le chat twtich sur un stream OBS Studio
  • Le service génère une URL de chat. Sélectionnez l'URL et faites un clic droit et copier
Générer URL KapChat pour afficher le chat twitch dans un stream OBS Studio
  • Puis dans Sources, cliquez sur l'icône +
  • Et sélectionnez Navigateur dans la liste
Ajouter une nouvelle source navigateur dans OBS Studio
  • Ensuite saisissez le nom de la nouvelle source, par exemple chat Twitch
Ajouter une nouvelle source sur OBS Studio Chat Twitter
  • Dans URL, copiez/collez l'URL
  • Personnalisez le CSS au besoin pour changer les couleurs de fond, taille de police, etc
Configurer la source pour afficher le chat twitch dans un stream OBS Studio
  • Enfin la fenêtre de chat Twitch s'affiche en overlay, il ne reste plus qu'à la redimensionner et la placer dans l'emplacement souhaité de votre vidéo
Afficher le chat Twitch en overlay sur stream vidéo OBS Studio
Bravo ! vous avez réussi afficher le chat Twitch en overlay sur vos vidéos OBS Studio

Streamlabs chat box

Streamlabs chat box sont des widgets de chat pour Twitch proposés par StreamLabs.
Le service propose un widget avec des thèmes gratuits mais on peut aussi en acheter pour bénéficier de thèmes plus esthétiques et proposants des options supplémentaires.

Voici comment les intégrer à vos vidéos de stream :

  • Ouvrez votre navigateur Web de choix et connectez-vous à Streamlabs avec votre compte Twitch. Assurez-vous d'autoriser l'autorisation, car cela est nécessaire pour vous importer votre chat avec OBS
  • Puis dans le menu de gauche, cliquez sur All Widget
Menu Widgets de Streamlabs
  • Puis sélectionnez Chat Box
Accédez au widget chat box de streamlabs
  • En haut, si vous désirez acheter un widget spécifique, choisissez un thème de fenêtre de chat de discussion Twitch
Choisissez un thème de chat box Twitch pour OBS Studio
  • Puis cliquez sur Install, ce dernier est payant
Installer un thème de chat box Twitch pour OBS Studio
  • Puis dans Widget URL, cliquez sur Copy pour récupérer l'URL du chat Box
Copier l'URL du Twitch chat box
  • En dessous, réglez les thèmes, paramètres et options d'affichage de la fenêtre de discussion Twitch
Les options de la fenêtre de discussion Twitch
  • Puis ouvrez OBS Studio ou OBS Stream Labs puis créez une nouvelle source, en cliquant sur le bouton + dans cette section
  • Sélectionnez Navigateur
Ajouter une nouvelle source navigateur dans OBS Studio
  • Saisissez le nom de la source, par exemple Chat Twitch
Ajouter une nouvelle source sur OBS Studio Chat Twitter
  • Dans URL, collez l'URL du widget streamLabs
  • Enfin positionnez la fenêtre du chat Twitch à l'emplacement souhaité et redimensionnez la taille
Afficher le chat Twitch en overlay sur stream vidéo OBS Studio