Wiki de Klaewyss

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[: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.
Wiki de Klaewyss

Outils pour utilisateurs

Outils du site

Outils de la page
