[[:klaewyss:tutos|← Retour vers la liste des tutoriels]]
====== Overlay Discord personnalisé dans OBS ======

===== Présentation =====
OBS((OBS : https://obsproject.com/fr)) 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 [[https://peertube.klaewyss.fr|Peertube]].

Discord((Discord : https://discord.com/)) 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((Jitsi : https://meet.jit.si)) 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 :

{{url>https://peertube.klaewyss.fr/videos/embed/107878ce-f9dc-40fc-8ce8-f8c197821cbd 350,200}}
{{  klaewyss:tutos:overlay_discord_1.gif|Aperçu de plusieurs avatars qui s'activent en fonction de qui parle}}

===== Procédure =====

==== Pré-requis ====

[{{  klaewyss:tutos:discord_dev.png?500x100|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.

<WRAP clear />

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".

[{{ klaewyss:tutos:discord_id.png?300x300 |Aperçu montrant où chercher l'option "Copier l'identifiant"}}]

==== Lien streamkit ====

Il faut commencer par générer un lien via le streamkit((Streamkit Discord : https://streamkit.discord.com/overlay)) 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.

[{{klaewyss:tutos:streamkit.png?600x400 |Aperçu final de la page streamkit}}]

==== Source OBS ====

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 |
Trois modèles d'animation sont proposés au choix, si vous maitrisez le CSS, vous pouvez les adapter à l'envie.\\
Dans le code choisi, il faut remplacer :
  * ##ID## par l'identifiant Discord de la personne concernée
  * ##URL_IMAGE_1## par l'url d'une image qui fera office d'avatar "au repos"
  * ##URL_IMAGE_2## par l'url d'une image qui fera office d'avatar "qui parle", les deux url peuvent être identique si souhaité

<tabbox Animation vers le bas>
Ce premier code permet d'ajouter une animation vers le **bas** quand quelqu'un prend la parole.
<code>
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;
}
</code>

<tabbox Animation vers le haut>
Ce deuxième code permet d'ajouter une animation vers le **haut** quand quelqu'un prend la parole.
<code>
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;
}
</code>


<tabbox Sans animation>
Ce troisième code supprime l'animation pour ne laisser qu'un changement d'image et de teinte.
<code>
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;
}
</code>
</tabbox>
++++

[{{klaewyss:tutos:obs.png?400x500|Capture des paramètres de la source Navigateur}}]

{{  klaewyss:tutos:overlay_discord_2.gif|Aperçu final d'un avatar qui s'active quand la personne qui lui est liée parle}}
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.