End Credits
Description
Un widget de générique de fin de stream qui défile automatiquement avec tous les contributeurs du live (moderators, follows, subs, cheers, raids, etc.).
Il est construit dans une page html simple, avec du HTML, CSS et vanilla JS.
Installation et configuration
Configurez vos crédits et groupes dans streamer bot
Les crédits sont une fonction native de streamer bot. Le widget s'occupe de recevoir et d'afficher les informations.
Consultez directement la documentation officielle de streamer bot pour savoir comment configurer vos crédits.
Activez le serveur WebSocket de streamer bot
Cette étape est cruciale pour que streamer bot puisse communiquer avec le widget et envoyer les informations enregistrées pendant le live.
Configurez le widget
Ouvrez la page du widget avec l'éditeur de code de votre choix. Chaque section éditable est commentée pour pouvoir être trouvée facilement. Les détails sont dans la section personnalisation ci-dessous.
Ajoutez une nouvelle source navigateur dans OBS
- Cochez la case
local file - Naviguez vers le fichier .html
- Réglez la hauteur et la largeur comme vous le souhaitez selon les dimensions de votre overlay.
Pour utiliser les crédits il suffit d'activer la source dans OBS. Pour rafraîchir les crédits vous pouvez utiliser le bouton "refresh browser source" depuis les propriétés de la source, ou désactiver puis réactiver la source.
Personnalisation
Modifier les textes
Les groupes doivent être configurés dans Streamer.bot au préalable.
Modifier la vitesse de défilement
La vitesse de défilement est calculée dans la const duration du script à partir de la hauteur de votre source navigateur OBS. Modifiez le facteur par lequel la fonction est multipliée pour augmenter ou diminuer la vitesse de défilement jusqu'à ce qu'elle corresponde à ce que vous voulez.
Modifier les styles
Les styles de ce widget ont été gardés très simple pour vous permettre de les modifier comme vous voulez. Le CSS est inclus directement dans la page.
| Sélecteur | Description |
|---|---|
| .wrapper | Conteneur des crédits. |
| h1 | Titres de sections (Événements & Utilisateurs Présents). |
| h2 | Titres de groupes. |
| .name | Noms d'utilisateurs. |
| #license | Informations de licence de cette page. |
Mode test
Modifiez la valeur de request pour activer le mode test.
Utilisez le mode test pour:
- Tester la vitesse de défilement
- Vérifier le layout et les titres de vos sections
- Vérifier et ajuster les styles
GetCredits avant de lancer votre live !Dépannage
Les crédits ne démarrent pas
- Vérifiez que Streamer.bot est connecté
- Consultez les logs Streamer.bot pour les erreurs
- Testez la source directement dans votre navigateur et regardez la console pour voir la cause de l'erreur.
Certaines sections ne s'affichent pas
- Si aucune donnée n'est reçue pour une section, elle est automatiquement cachée. Vérifiez votre configuration streamer bot.
- Vérifiez que vous n'avez pas fait d'erreur en éditant le code. La valeur marquée dans "key" doit être exactement la même que dans streamer bot.