OBS¹⁾ est un logiciel libre et open source d'enregistrement vidéo et de streaming en direct. C'est notamment grâce à lui que sont enregistrer les parties d'actual play disponible sur Peertube.

Discord²⁾ est un logiciel propriétaire gratuit de discussion VoIP et de messagerie instantanée. C'est une solution pour faire des discussions de groupe en vocal et/ou visio, idéal pour les parties en ligne donc.
Une bonne alternative opensource est Jitsi³⁾ mais ce tutoriel ne fonctionnera pas.

L'idée est mettre en évidence qui parle lors d'un stream de façon plus jolie que l'overlay Discord classique. De façon à donner quelque chose comme ça :

Vue du paramètre Discord “Mode développeur”

Il faut connaître votre identifiant Discord ainsi que celui des personnes que vous souhaitez. Pour cela, vérifiez dans vos paramètres que le mode Développeur est bien activer dans paramètres Discord > Avancés.

Maintenant, pour obtenir l'identifiant Discord de quelqu'un, il suffit de faire un clic droit sur son pseudonyme et de cliquer sur “Copier l'identifiant”.

Aperçu montrant où chercher l'option “Copier l'identifiant”

Il faut commencer par générer un lien via le streamkit⁴⁾ de Discord.

• Rendez-vous sur : https://streamkit.discord.com/overlay
• Sélectionnez “Install for OBS”
• Sélectionnez le serveur Discord concerné
• Sélectionnez le salon vocal concerné
• Cocher “Hide Names”

Le lien qui nous intéresse est dans la partie droite de l'écran, juste en dessous de l'aperçu.

Aperçu final de la page streamkit

Ajoutez une source de type Navigateur à votre scène OBS et nommez la de façon à pouvoir la retrouver facilement exemple “VoixDiscord - Perso”. Remplissez les champs suivants :

• URL : copiez-collez l'URL précédemment générée grâce au streamkit de Discord
• Largeur : 215
• Hauteur : 300
• CSS personnalisé : le code ci-dessous

Code à modifier et copier-coller

img.Voice_avatar__htiqH:not([src*="##ID##"]) { display:none; }

img.Voice_avatar__htiqH {
  content: url(##URL_IMAGE_1##);
  padding-top: 0px;
  height: 175px !important;
  width: auto !important;
  border-radius: 0% !important;
  filter: brightness(30%);
}

img.Voice_avatarSpeaking__lE\+4m {
  padding-top: 0px;
  border-color: rgba(0, 0, 0, 0) !important;
  position: relative;
  animation-name: speak-now;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  filter: brightness(100%);
  content: url(##URL_IMAGE_2##);
}

@keyframes speak-now {
  0% {
    bottom: 0px;
  }
  15% {
    bottom: -80px;
  }
  50% {
    bottom: 0px;
  }
}

li.voice-state {
  position: static;
}

div.user {
  position: absolute;
  left: 40%;
  bottom: 5%;
}

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

img.Voice_avatar__htiqH:not([src*="##ID##"]) { display:none; }

img.Voice_avatar__htiqH {
  content: url(##URL_IMAGE_1##);
  padding-top: 00px;
  height: 175px !important;
  width: auto !important;
  border-radius: 0% !important;
  filter: brightness(30%);
}

img.Voice_avatarSpeaking__lE\+4m {
  padding-top: 0px;
  border-color: rgba(0, 0, 0, 0) !important;
  position: relative;
  animation-name: speak-now;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  filter: brightness(100%);
  content: url(##URL_IMAGE_2##);
}

@keyframes speak-now {
  0% {
    bottom: 0px;
  }
  15% {
    bottom: 80px;
  }
  50% {
    bottom: 0px;
  }
}

li.voice-state {
  position: static;
}

div.user {
  position: absolute;
  left: 40%;
  bottom: 5%;
}

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

img.Voice_avatar__htiqH:not([src*="##ID##"]) { display:none; }

img.Voice_avatar__htiqH {
  content: url(##URL_IMAGE_1##);
  padding-top: 0px;
  height: 175px !important;
  width: auto !important;
  border-radius: 0% !important;
  filter: brightness(30%);
}

img.Voice_avatarSpeaking__lE\+4m {
  padding-top: 0px;
  border-color: rgba(0, 0, 0, 0) !important;
  position: relative;
  animation-name: speak-now;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  filter: brightness(100%);
  content: url(##URL_IMAGE_2##);
}  

li.voice-state {
  position: static;
}

div.user {
  position: absolute;
  left: 40%;
  bottom: 5%;
}

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

Capture des paramètres de la source Navigateur

Et voilà !
Maintenant à chaque fois que la personne parlera, son avatar s'illuminera.

Il est nécessaire de créer une source de ce genre par personne dont vous souhaitez diffuser l'avatar.