Ton pack en place dans OBS ou Streamlabs, pas à pas.

Chapitre 00

Avant de commencer

Tout tourne sur ton ordinateur : rien n'est envoyé nulle part, les pages marchent sans connexion. Voici ce que contient le dossier.

1. Décompresse dans un dossier qui ne bougera plus

   Fait

   Sous Windows : clic droit sur le ZIP, « Extraire tout », puis choisis un dossier stable, par exemple Documents\Stream. Travaille toujours depuis le dossier décompressé, jamais depuis l'intérieur du ZIP.

2. Pourquoi il ne faut plus le déplacer

   Fait

   Chaque source de ton logiciel pointe vers un fichier de ce dossier, par son chemin complet sur ton disque. Si tu déplaces ou renommes le dossier, la source ne trouve plus sa page et reste vide : il faudra refaire le chemin de chaque source (voir le chapitre Dépannage).

3. Garde la structure telle quelle

   Fait

   Le dossier polices/ doit rester à côté de scenes/, et deux niveaux au-dessus de elements/onde/, comme dans le ZIP. Ne sors pas une page seule du dossier : le texte changerait de police.

4. Vérifie dans ton navigateur

   Fait

   Double-clique sur scenes/onde-demarrage.html : la scène s'ouvre dans ton navigateur et bouge. Le dossier est prêt. Choisis ensuite ton logiciel en haut de la page : toutes les instructions suivent ce choix.

Chapitre 01

Ajouter une scène plein écran

Démarrage, pause, intermission, fin, hors ligne et planning : des pages 1920 x 1080 qui couvrent tout l'écran. Elles se posent toutes de la même façon, une scène chacune.

1. Crée une scène par écran

   Fait

   Dans le panneau « Scènes », clique sur +, nomme la scène (par exemple « Démarrage ») et valide.

   OBS Studio

   Scènes

   • Démarrage
   • En jeu
   • Just chatting

   +−

   Sources

   • Capture de jeu
   • Webcam

   +−⚙

   Mélangeur audio

   Streamlabs Desktop

   Scènes+

   • Démarrage
   • En jeu
   • Just chatting

   Sources+

   • Capture de jeu
   • Webcam

2. Ajoute une source navigateur

   Fait

   La scène sélectionnée, clique sur + dans « Sources » et prends « Navigateur ». Donne-lui un nom, puis OK.La scène sélectionnée, clique sur + (Ajouter une source) dans « Sources », prends « Source navigateur », puis « Ajouter une source ». Nomme-la et valide.

   OBS Studio

   Scènes

   • Démarrage
   • En jeu
   • Just chatting

   +−

   Sources

   • Capture de jeu
   • Webcam

   +−⚙

   Mélangeur audio

   Streamlabs Desktop

   Scènes+

   • Démarrage
   • En jeu
   • Just chatting

   Sources+

   • Capture de jeu
   • Webcam

   OBS Studio

   Capture de jeuImageNavigateurScènePériphérique de capture vidéo

   Streamlabs Desktop

   Ajouter une source

   Capture de jeuSource navigateurImageFichier média

   Ajouter une source

3. Choisis le fichier de l'écran

   Fait

   Coche « Fichier local », clique sur « Parcourir » et choisis scenes/onde-demarrage.html (ou la page de l'écran voulu, voir le tableau).

   Si l'option « Fichier local » n'apparaît pas, colle l'adresse complète dans le champ « URL » (chapitre 04).

   Propriétés · OBS Studio

   Fichier local

   Fichier local…/scenes/onde-demarrage.htmlParcourir

   Largeur1920

   Hauteur1080

   Arrêter la source quand elle n'est pas visible

   Actualiser le navigateur lorsque la scène devient active

   AnnulerOK

   Propriétés · Streamlabs Desktop

   Fichier local

   Fichier local…/scenes/onde-demarrage.htmlParcourir

   Largeur1920

   Hauteur1080

   Arrêter la source quand elle n'est pas visible

   Actualiser le navigateur quand la scène devient active

   AnnulerOK

4. Largeur 1920, hauteur 1080

   Fait

   Les écrans font tous 1920 x 1080. Une source à la bonne taille reste nette : la page s'adapte à la taille que tu lui donnes.

5. Les options utiles

   Fait
   • Coche « Actualiser le navigateur lorsque la scène devient active »« Actualiser le navigateur quand la scène devient active » : l'animation d'entrée rejoue à chaque passage.
   • Laisse « Arrêter la source quand elle n'est pas visible » décoché pour les écrans, coché pour les alertes si tu veux qu'elles rejouent.
   • Laisse le champ de CSS personnalisé tel qu'il est : les pages ont déjà un fond transparent là où il le faut.

6. Valide et cale la source

   Fait

   Valide. Si la source ne remplit pas l'écran : clic droit sur la source, « Transformer », « Ajuster à l'écran ».Valide, puis ajuste la source à l'écran si besoin (clic droit sur la source, menu de transformation).

7. Refais-le pour chaque écran

   Fait

   Même chose pour onde-pause.html, onde-intermission.html, onde-fin.html, onde-hors-ligne.html, onde-planning.html. Le démarrage compte jusqu'à l'heure du live, la pause et l'intermission comptent des minutes : ces réglages passent par l'adresse (chapitre 04).

Chapitre 02

En jeu, just chatting et superpositions

Ces pages se posent par-dessus ta capture de jeu et ta caméra. Leur fond est transparent ou découpé : c'est l'ordre des sources qui fait tout.

La scène en jeu

1. Pose ta capture de jeu et ta webcam

   Fait

   Dans ta scène en jeu, ajoute ta capture de jeu (« Capture de jeu ») et ta webcam (« Périphérique de capture vidéo »), comme d'habitude.

2. Ajoute la page en jeu par-dessus

   Fait

   scenes/onde-en-jeu.html en source navigateur, 1920 x 1080, comme au chapitre 01. Fais-la glisser tout en haut de la liste des sources : la plus haute est devant. Son centre est transparent.

   Capture de jeu

   Webcam

   onde-en-jeu.html

   1. onde-en-jeu.htmldevant
   2. Webcam
   3. Capture de jeuderrière

3. Place ta webcam sous le cadre

   Fait

   Place conseillée : position 56, 650, taille 480 x 270.

   Clic droit sur la webcam, « Transformer », « Modifier la transformation », puis Position 56 et 650, Taille 480 x 270.Fais glisser la webcam sous le cadre et ajuste sa taille avec ses poignées, jusqu'à ce qu'elle remplisse l'ouverture.

   Webcam56, 650 · 480 x 270

   Bandeau

Just chatting et intermission

1. Ajoute la page et ta webcam dessous

   Fait

   scenes/onde-just-chatting.html (ou scenes/onde-intermission.html) en 1920 x 1080. Ta webcam va sous la page, en 80, 190, taille 1200 x 675 : le fond de la page est découpé à cet endroit.

   Webcam

   onde-just-chatting.html

   Chat

   1. Ta source de chatdevant
   2. onde-just-chatting.html
   3. Webcamderrière

2. La boîte de chat

   Fait

   La zone de chat est réservée à droite : 500 x 675 en 1340, 190 (500 x 400 dans l'intermission, le minuteur est en dessous). Pose ta source de chat par-dessus la page, dans cette zone : par exemple le widget de chat gratuit d'Aghenor.TV (ton pseudo s'ajoute à son adresse avec ?channel=ton_pseudo), ou le widget Chat Box de Streamlabs.

   Webcam80, 190 · 1200 x 675

   Chat1340, 190 · 500 x 675

   Bandeau

Les autres superpositions

1. Le cadre caméra et la boîte de chat seuls

   Fait

   Pour tes propres mises en page : scenes/onde-webcam.html (1000 x 660) se pose sur ta webcam, et scenes/onde-chat.html (560 x 900) est un décor de chat, fond transparent. À leur taille d'origine, la zone de messages de la boîte de chat fait 500 x 720 en 30, 100 : ta source de chat se pose dessus.

2. Le tiers inférieur

   Fait

   scenes/onde-tiers-inferieur.html en 1920 x 1080, tout en haut des sources. Il affiche ton nom et ton accroche ; pour un invité, ajoute ?nom=Kestrel&titre=Invité du soir à l'adresse, et &boucle pour qu'il entre et sorte en boucle.

3. La transition

   Fait

   scenes/onde-transition.html n'est pas une vidéo de stinger : ajoute-la tout en haut de la scène d'arrivée, en 1920 x 1080, avec « Actualiser le navigateur lorsque la scène devient active »« Actualiser le navigateur quand la scène devient active » coché. Elle couvre l'écran en arrivant, puis se retire. Ajoute-la dans chaque scène où tu veux la voir.

4. Alertes et objectif : tout en haut

   Fait

   Les alertes, la barre d'objectif (scenes/onde-objectif.html, 1000 x 200, à poser où tu veux), le tiers inférieur et la transition passent au-dessus du reste. Les alertes ont leur chapitre (05).

Chapitre 03

Les éléments séparés

Les scènes plein écran restent dans scenes/. Les éléments reprennent des morceaux des superpositions, avec le même rendu et les mêmes animations, mais chacun dans sa propre source, à sa taille : tu les places dans ta scène où tu veux.

Le cadre caméra et la boîte de chat sont déjà des sources à part : scenes/onde-webcam.html (1000 x 660) et scenes/onde-chat.html (560 x 900).

1. Ajoute l'élément

   Fait

   « Sources », +, « Navigateur ».+, « Source navigateur ». Coche « Fichier local » et choisis la page dans elements/onde/.

2. Donne-lui sa taille exacte

   Fait

   Largeur et hauteur de l'élément (tableau ci-dessus), puis valide. Coche aussi « Actualiser le navigateur lorsque la scène devient active »« Actualiser le navigateur quand la scène devient active » pour rejouer l'entrée.

3. Place-le, agrandis-le sans flou

   Fait

   Fais glisser la source où tu veux. Pour l'agrandir sans flou, change plutôt la largeur et la hauteur dans les propriétés de la source, en gardant les mêmes proportions : la page s'adapte. Tirer un coin étire une image déjà calculée.

   Exemple : elements/onde/tiers-inferieur.html passe de 1640 x 300 à 2460 x 450 pour être une fois et demie plus grand.

   Tirer un coin

   Ton pseudoInstalle-toi, on arrive.

   Image étirée : flou.

   Largeur / Hauteur

   Ton pseudoInstalle-toi, on arrive.

   1640 x 300 devient 2460 x 450 : net.

4. Rogne avec la touche Alt

   Fait

   Dans l'aperçu de OBSStreamlabs, maintiens Alt et tire un bord de la source : tu rognes au lieu de redimensionner. Pratique pour ne garder qu'une partie du bandeau.

   Alt

   Ton pseudo

Chapitre 04

Les réglages par l'adresse

Certaines pages lisent des réglages à la fin de leur adresse : l'heure du début, un minuteur, le nom d'un invité, une alerte. Voici tous ceux qu'elles reconnaissent.

1. Décoche « Fichier local »

   Fait

   La case « Fichier local » ne permet pas d'ajouter des réglages. Dans les propriétés de la source, décoche-la : le champ « URL » apparaît.

2. Colle l'adresse complète

   Fait

   Elle commence par file:/// suivi du chemin du fichier, avec des barres obliques, puis les réglages après le point d'interrogation :

   file:///C:/Users/toi/Documents/Stream/scenes/onde-demarrage.html?cible=2026-11-02T20:00

   Le constructeur ci-dessous la fabrique pour toi. Valide : la page relit ses réglages à chaque chargement.

Les espaces passent tels quels ; s'ils posent souci, remplace-les par %20.

Chapitre 05

Les alertes

Des alertes animées dans ton look : follow, abonnement, réabonnement, don, bits, raid et host. Seule l'Alert Box de Streamlabs reçoit les vrais événements de ta chaîne.

1. Ouvre l'Alert Box

   Fait

   Va sur streamlabs.com, connecte-toi, puis Widgets (ou « All widgets ») > Alert Box. Ouvre le type d'alerte voulu.

2. Active le code personnalisé

   Fait

   Descends jusqu'à « Custom HTML/CSS » (ou l'onglet Custom Code) et active-le.

   streamlabs.com

   streamlabs.com · Alert Box

   • Follows
   • Subscriptions
   • Donations
   • Bits
   • Raids

   Custom HTML/CSS

   HTMLCSSJS

   Alert Duration7

   Text Delay0

   Save Settings

3. Colle les trois fichiers

   Fait

   Onglet HTML : efface tout, colle le contenu de alertes/streamlabs/<type>/html.txt du même type. Onglet CSS : efface tout, colle css.txt. Onglet JS : efface tout, colle js.txt. Le CSS est le même pour les sept types (polices comprises).

   Les types d'alerte et leurs dossiers

   Type	Dossier	Dans l'Alert Box
   Follow	alertes/streamlabs/follow/	Follows
   Abonnement	alertes/streamlabs/sub/	Subscriptions
   Réabonnement	alertes/streamlabs/resub/	Resubs (ou la variante resub dans Subscriptions, selon ta version)
   Don	alertes/streamlabs/don/	Donations (ou Tips)
   Bits	alertes/streamlabs/bits/	Bits (Cheers)
   Raid	alertes/streamlabs/raid/	Raids
   Host	alertes/streamlabs/host/	Hosts

4. Règle la durée et le reste

   Fait
   • Durée de l'alerte (Alert Duration) : 7 secondes. Si tu en choisis une autre, change aussi data-duree dans le HTML (en millisecondes : 7 s = 7000).
   • Délai du texte (Text Delay) : 0. Animation d'entrée et de sortie de Streamlabs : un simple fondu, ou aucune. Les alertes ont déjà les leurs.
   • Image de l'alerte : laisse vide (l'icône du type s'affiche), ou envoie ton logo : il prend la place de l'icône. Le son reste à ton choix.

5. Enregistre et teste

   Fait

   Save Settings, puis « Test Follow » (ou Test Sub, Test Donation...). Pour voir tout de suite le rendu de chaque type, ouvre alertes/apercu.html dans ton navigateur.

6. Affiche l'Alert Box dans OBSStreamlabs

   Fait

   Sur la page de l'Alert Box, copie l'adresse du widget (Widget URL). Dans OBS, ajoute une source « Navigateur », décoche « Fichier local » et colle cette adresse dans « URL », 1920 x 1080.Dans Streamlabs Desktop, + dans « Sources », puis le widget « Alert Box » : il est lié à ton compte. Pose-la tout en haut des sources. Si ta source n'a pas la taille de ton écran, l'alerte se met à l'échelle toute seule.

7. Sans Streamlabs : pour tester

   Fait

   alertes/source-navigateur.html joue une alerte d'essai au chargement (source « Navigateur », fichier local, 1920 x 1080), et scenes/onde-alerte.html fait pareil dans le style des scènes. Aucune des deux ne reçoit les vrais événements de ta chaîne : sans service d'alertes, elles ne servent qu'à tester le rendu ou à jouer une alerte à la main.

Le host n'existe plus sur Twitch depuis 2022 : son dossier ne sert que si ta plateforme ou ta version de Streamlabs le propose encore. Les jetons et les conteneurs de Streamlabs peuvent évoluer : si un élément manque, refais un test depuis Streamlabs.

Chapitre 06

Les visuels fixes

Dessinés aux couleurs et à la police de ton pack, avec tes textes, dans la langue des scènes : panneaux Twitch, écran hors ligne, icônes réseaux.

1. Les panneaux Twitch

   Fait

   640 x 320 (Twitch les affiche à 320 de large, le double reste net), dans visuels/onde/. Sur ta chaîne Twitch, onglet À propos : active « Modifier les panneaux », ajoute un panneau image, envoie l'image, puis ajoute le lien et le texte en dessous.

   À propospanneau-a-propos.jpgRègles du chatpanneau-regles.jpgRéseauxpanneau-reseaux.jpgPlanningpanneau-planning.jpgÉquipementpanneau-equipement.jpgSoutenirpanneau-don.jpgDiscordpanneau-discord.jpgFAQpanneau-faq.jpg

2. L'écran hors ligne

   Fait

   visuels/onde/ecran-hors-ligne.jpg, 1920 x 1080. Sur Twitch, il se règle dans les paramètres de la chaîne (bannière du lecteur vidéo). Dans OBSStreamlabs, tu peux aussi le poser comme source « Image ».

3. Les icônes réseaux

   Fait

   128 x 128, fond transparent : icone-twitch.png, icone-youtube.png, icone-instagram.png, icone-tiktok.png, icone-x.png, icone-discord.png, icone-kick.png, icone-facebook.png, icone-site.png. Ce sont des pictogrammes génériques (aucun logo de marque) : à poser dans OBSStreamlabs (source « Image ») ou sur tes panneaux.

Chapitre 07

Organiser et changer de scène

Une scène par moment du live, les mêmes sources rangées dans le même ordre : tu changes de scène sans y penser.

C'est un exemple : ajoute onde-transition.html en haut de chaque scène d'arrivée si tu veux le rideau.

1. Change de scène d'un clic

   Fait

   Clique sur la scène dans le panneau « Scènes ». Le mode studio te montre la scène suivante avant de l'envoyer à l'antenne.

2. Des raccourcis clavier

   Fait

   Dans les paramètres d'OBS, section des raccourcis clavier (Hotkeys) : chaque scène a sa ligne pour y basculer. Clique dans le champ et appuie sur la touche voulue.Dans les paramètres de Streamlabs Desktop, section des raccourcis (Hotkeys) : une touche par scène, dans la partie des scènes.

   Clavier (exemple)

   F1Démarrage

   F2En jeu

   F3Just chatting

   F4Pause

   Stream Deck

   DémarrageEn jeuJust chattingPauseIntermissionFin

3. Avec un Stream Deck

   Fait

   L'application Stream Deck propose des actions pour OBSStreamlabs, dont le changement de scène : glisse l'action sur une touche et choisis la scène.

4. La transition entre les scènes

   Fait

   Garde la transition de ton logiciel courte, un fondu bref ou une coupure nette : onde-transition.html, en haut de la scène d'arrivée, fait le rideau.

5. Et le changement automatique ?

   Fait

   Les pages de ce pack ne changent pas de scène toutes seules. Les scènes qui changent toutes seules sont un autre service d'Aghenor.TV : elles passent par l'API de Streamlabs, et la version pour OBS, par obs-websocket, est en préparation. Comment ça marche.

6. Mets ta configuration à l'abri

   Fait

   Une fois tout en place, exporte ta collection de scènes depuis le menu des collections de scènes d'OBS : tu la retrouves après une réinstallation.Streamlabs Desktop range tes scènes dans des collections de scènes. Dans tous les cas, garde le dossier du pack au même endroit : les chemins des sources y pointent.

7. Modifier ou mettre à jour ton pack

   Fait
   1. Rouvre l'Atelier de scènes. Dans le TUTORIEL.html de ton propre pack, un lien le rouvre directement avec tes réglages. Le logo n'y est pas : remets-le.
   2. Modifie les couleurs, les textes ou le look, puis télécharge le nouveau ZIP.
   3. Décompresse le nouveau ZIP par-dessus ton dossier actuel, en remplaçant les fichiers. Les fichiers gardent les mêmes noms et les mêmes emplacements : tes sources OBSStreamlabs restent branchées, rien à reconfigurer.

   Si une scène montre encore l'ancienne version, actualise la source : ouvre ses propriétés puis valide, ou masque-la et réaffiche-la.

Chapitre 08

Dépannage

Les soucis les plus courants, et comment les régler.