Disposition et source navigateur
La dernière étape : placer les widgets dans l'onglet Disposition de la page Overlay, puis emmener le tout dans votre logiciel de stream.
La page
La page Overlay fonctionne comme celle d'un widget :
- Styles généraux et Disposition, les onglets au-dessus de l'éditeur, changent ce qu'il affiche. Styles généraux est le style d'overlay.
- La colonne de gauche : dans l'onglet Disposition, Canevas, Positions et Placement des widgets. Positions et Placement des widgets ouvrent une deuxième colonne à côté : les neuf positions, ou les widgets.
- La zone principale : les réglages de la ligne choisie.
- Liste des overlays, le panneau contre le bord droit de la fenêtre : vos overlays, l'aperçu de celui qui est choisi et son URL. La flèche en haut le replie en un mince rail. Faites glisser son bord gauche pour l'élargir, jusqu'à la moitié de la fenêtre ; il garde sa largeur.
Plusieurs overlays
Vous pouvez créer plusieurs overlays — un horizontal et un vertical, ou un par scène. Chacun a sa propre URL, donc chacun va dans sa propre source navigateur.
Le panneau Liste des overlays, contre le bord droit de la fenêtre, les gère :
- Créer un nouvel overlay en ajoute un, nommé Overlay 2, Overlay 3… Il affiche tous les widgets activés.
- La liste déroulante Overlay choisit celui que vous modifiez. Tout l'onglet Disposition, l'aperçu et l'URL en dessous sont ceux de cet overlay.
- Son nom se modifie sur place, sous la liste (Overlay sans nom s'il est vide), avec la taille de son canevas à côté.
- Dupliquer en fait une copie — Main overlay (copy) — avec la même disposition et les mêmes widgets.
- Supprimer demande d'abord confirmation, et prévient que toute source navigateur qui pointe vers son URL cessera de fonctionner. Le dernier overlay ne peut pas être supprimé.
Le premier overlay s'appelle Main overlay.
| Propre à chaque overlay | Partagé par tous les overlays |
|---|---|
| Taille du canevas, espacements, réglages des neuf positions, widgets affichés, leur position, leur ordre et leur taille, hauteur de chaque barre | Réglages des widgets, styles des widgets, style de l'overlay (onglet Styles généraux), connexion |
Quel overlay lance les actions
Les messages de chat, les sons, les posts Discord, les shoutouts et tous les comptes (objectifs, subathon, Compteurs de stream, Compteur de spectateurs, Premier du chat, Récompenses d’activité, groupes du générique) sont faits par un seul overlay, pour que rien ne soit jamais envoyé ni compté deux fois. Par défaut, c'est le premier overlay.
Avec plus d'un overlay, l'encadré sous l'URL dit lequel :
- Sur celui-là : Cet overlay exécute les actions — il gère les messages, les sons, les posts Discord et les comptes de tous les widgets activés, affichés ici ou non. Gardez sa source navigateur chargée : ne cochez jamais « Arrêter la source quand elle n'est pas visible ».
- Sur les autres : Affichage uniquement — Actions run in "Main overlay", avec un bouton Exécuter les actions ici pour donner ce rôle à l'overlay que vous regardez. Recopiez ensuite les URL des deux overlays.
L'overlay qui lance les actions fait aussi tourner, sans les afficher, tous les widgets activés qu'il ne montre pas. Un accueil affiché seulement dans votre overlay vertical poste donc quand même son message une fois, depuis l'overlay qui lance les actions. Le lecteur de clips, la pluie d'emotes et de gifs et les comptes à rebours ne font qu'afficher : chaque overlay qui les montre joue les siens.
Les overlays d'affichage suivent ce que l'overlay qui lance les actions enregistre dans Streamer.Bot : objectifs, subathon, compteurs, spectateurs, le Premier du chat, la pause du relais de chat et celle de Sondages et prédictions. Supprimer l'overlay qui lance les actions donne ce rôle au premier qui reste.
Canevas
La ligne Canevas réunit la taille de l'overlay et ses espacements.
Taille du canevas — reprenez le canevas de votre stream : la résolution de base dans les réglages vidéo de votre logiciel de stream (dans OBS Studio, Paramètres → Vidéo → Résolution de base). Chaque overlay a le sien.
| Préréglage | Dimensions |
|---|---|
| 4K (3840×2160) | 3840 × 2160 |
| 2K (2560×1440) | 2560 × 1440 |
| 1080p (1920×1080) | 1920 × 1080 |
| 1080p vertical (1080×1920) | 1080 × 1920 |
Le défaut est 1080p (1920×1080).
Puis les espacements :
| Réglage | Défaut | Détail |
|---|---|---|
| Marge avec les bords | 24 px | Distance aux bords du canevas, à 1080p. De 0 à 200. |
| Espace entre les widgets | 14 px | Entre deux widgets qui partagent une position, à 1080p. De 0 à 80. |
Positions
Le canevas a neuf positions, telles qu'elles sont nommées à l'écran :
| Gauche | Au centre | Droite | |
|---|---|---|---|
| Haut | En haut à gauche | En haut au centre | En haut à droite |
| Milieu | Au milieu à gauche | Centre | Au milieu à droite |
| Bas | En bas à gauche | En bas au centre | En bas à droite |
Une position est aussi large et aussi haute que les widgets qu'elle contient, dans les limites que vous fixez. La ligne Positions ouvre une colonne des neuf positions, chacune avec Horizontal ou Vertical sous son nom. Choisissez-en une (elle est entourée dans l'aperçu) pour la régler dans la zone principale :
| Réglage | Détail |
|---|---|
| Horizontal / Vertical | Horizontal : les widgets côte à côte ; une rangée pleine passe à la ligne, sans jamais sortir de la position. Vertical : les uns sous les autres. |
| Horizontal | Gauche, Centre ou Droite : où les widgets se placent dans la largeur de la position. |
| Vertical | Haut, Centre ou Bas : où ils se placent de haut en bas. |
| Largeur min. | 0 = as wide as its widgets : aussi large que ses widgets. |
| Largeur max. | 0 = up to the canvas edge : jusqu'au bord du canevas. |
| Hauteur min. | 0 = as tall as its widgets : aussi haute que ses widgets. |
| Hauteur max. | 0 = up to the canvas edge : jusqu'au bord du canevas. |
| Masquer ce qui dépasse | Coupe ce qui dépasse la taille maximale, au lieu de le laisser déborder. |
Les deux premiers sont sous Alignement des widgets, les tailles sous Largeur et hauteur. Chaque taille est en px (à 1080p), en % du canevas, en em, vw ou vh, l'unité choisie à côté de son nom ; changer d'unité convertit la valeur. Par défaut pour cette position remet la position choisie à ses valeurs par défaut.
Par défaut, chaque position est une colonne alignée sur son côté et son bord (Au milieu à gauche : à gauche, centrée ; En bas au centre : centrée, en bas), large d'au moins 30 % du canevas. Trois sont à part :
| Position | Défaut |
|---|---|
| En haut à gauche | Au moins 20 % de large, au plus 48 % de la hauteur du canevas, dépassement masqué. |
| En haut à droite | Une rangée, au plus 76 % de la largeur du canevas (compteurs, spectateurs et comptes à rebours côte à côte). |
| En bas à droite | Au plus 840 px de haut, dépassement masqué. |
Barres horizontales
Le chat, les objectifs et subathon et le tableau des scores peuvent aussi s'afficher en barre horizontale : une bande sur toute la largeur, en haut ou en bas du canevas. Dans les réglages du widget, Horizontal l'active et Vertical la désactive (le chat : Orientation des messages ; les objectifs et subathon : Mode d’affichage ; le tableau des scores : Orientation) — c'est le réglage par défaut pour les trois.
Les neuf positions se partagent la place que laissent les barres : une barre ne couvre donc jamais un autre widget. Plusieurs barres sur le même bord s'empilent dans l'ordre des widgets. Une barre Centre coupe le canevas en deux : les positions du haut et du milieu au-dessus, celles du bas en dessous. Les widgets plein écran (générique de fin, pluie d'emotes et de gifs) couvrent toujours tout le canevas.
Dans la liste Placement des widgets, une barre indique Barre du haut, Barre du centre ou Barre du bas, et ses réglages sont :
| Réglage | Détail |
|---|---|
| Position | Haut, Centre ou Bas. |
| Hauteur | Fixe (par défaut) : la bande garde sa hauteur quoi que le widget affiche, les positions ne bougent donc jamais. Auto : la bande est aussi haute que ce que le widget affiche, et ne prend aucune place tant qu'il n'affiche rien (tableau des scores masqué, chat vide) : les positions utilisent alors cette place. |
| Hauteur fixe | Avec Fixe : hauteur de la bande, en px (à 1080p), en % du canevas, en em, vw ou vh, l'unité choisie à côté du nom du champ. |
L'apparence de la barre est le Conteneur du widget, la première carte de son onglet Style — voir Apparence.
Placement des widgets
La ligne Placement des widgets ouvre une colonne des widgets activés, chacun avec sa position sous son nom (s'il n'y en a aucun, la zone principale le dit et renvoie à la page Widgets). L'interrupteur de chaque ligne affiche ou masque le widget dans cet overlay. Faites glisser une ligne par sa poignée pour changer l'ordre — les widgets d'une même position s'empilent dans cet ordre. Cliquez sur un widget pour le placer dans la zone principale ; il est mis en évidence dans l'aperçu. Un widget plein écran n'a rien à placer.
| Réglage | Défaut | Détail |
|---|---|---|
| Position | selon le widget | L'une des neuf positions. |
| Largeur | selon le widget | Largeur en px (à 1080p), en % du canevas, en em, vw ou vh, l'unité choisie à côté du nom du champ. 0 = the position's width (in a row: as wide as its content) : la largeur de la position (dans une rangée, celle de son contenu). |
| Échelle | 100 % | Multiplicateur de taille. De 50 à 250. |
| Décalage horizontal | 0 px | Décalage fin depuis la position. De -400 à 400. |
| Décalage vertical | 0 px | Décalage fin depuis la position. De -400 à 400. |
Par défaut pour ce widget remet la position, la largeur, la taille et les décalages d'un widget à leurs valeurs par défaut, sans toucher aux autres.
Les positions par défaut :
| Widget | Position | Largeur |
|---|---|---|
| Chat | Barre du bas, 50 px de haut (En bas à droite sans la barre) | toute la largeur |
| Premier du chat | En bas à droite | 0 |
| Accueil des chatteurs | En bas à droite | 0 |
| Récompenses d’activité | aucune — rien à afficher | — |
| Pluie d'emotes et de gifs | plein écran | — |
| Shoutout | Centre | celle du lecteur (800 px, dans son style Fond) |
| Lecteur de clips | Centre, désactivé | celle du lecteur (1280 px, dans son style Fond) |
| Alertes | En bas au centre | 0 |
| Objectifs et subathon | Barre du haut, 100 px de haut (En haut à gauche sans la barre) | toute la largeur (380 px sans la barre) |
| Compteurs de stream | En haut à droite | 0 |
| Compteur de spectateurs | En haut à droite | 0 |
| Sondages et prédictions | En haut à gauche | 0 |
| Comptes à rebours | En haut à droite | 360 px |
| Générique de fin | plein écran | — |
| Webhooks Discord | aucune — rien à afficher | — |
Vérifier avant de passer en direct
Le panneau Liste des overlays montre l'overlay choisi à la taille de son canevas. Deux commandes aident :
- Afficher les positions, au-dessus de l'aperçu dans l'onglet Disposition, dessine les neuf repères de position par-dessus.
- Jouer des événements de démo, sous l'aperçu, envoie un événement d'exemple dans chaque widget que l'overlay affiche : vous voyez tout l'overlay bouger sans attendre un vrai spectateur. Il rejoue quand vous choisissez un autre overlay.
L'ajouter à votre logiciel de stream
Ça fonctionne dans OBS Studio, Streamlabs Desktop, Meld Studio, XSplit et toute autre application qui a des sources navigateur. Faites-le pour chaque overlay.
Copier l'URL
Sous l'aperçu, dans URL de la source navigateur, cliquez sur Copier. Ouvrir dans un nouvel onglet affiche l'overlay seul dans votre navigateur. La partie réglages de l'URL s'affiche en points, pour ne jamais apparaître sur un écran partagé : le bouton en forme d'œil (Afficher l’URL / Masquer l’URL) la révèle, et Copier copie toujours l'URL complète.
Créer la source
Dans votre logiciel de stream, ajoutez une source navigateur et donnez-lui un nom.
Coller et dimensionner
Collez l'URL, puis réglez la largeur et la hauteur sur la taille du canevas de l'overlay — l'indication vous les donne, par exemple 1920 × 1080 en 1080p, 1080 × 1920 en vertical. Si votre source navigateur a une option Actualiser le navigateur quand la scène devient active, laissez-la décochée.
Fermer l'onglet
L'overlay fonctionne seul. Vous pouvez fermer le site : c'est Streamer.Bot, sur votre PC, qui l'alimente.
Un widget tout seul
Pour placer un widget dans une scène à part, désactivez Ajouter à l’overlay à côté du titre de sa page : il quitte tous les overlays, et sa propre URL de la source navigateur apparaît sous l'aperçu. Tant que l'interrupteur est activé, la page indique To use it as its own browser source, switch off "Ajouter à l’overlay". — un widget ne s'affiche donc jamais deux fois en stream.
Quand l'overlay affiche un message
| Message | Que faire |
|---|---|
| Connexion… | Streamer.Bot n'est pas encore joignable : lancez-le, ainsi que son serveur WebSocket. L'overlay réessaie tout seul. |
| This browser source has no settings. | L'URL a été tronquée : recopiez l'URL complète depuis la page Overlay. |
| The settings in this URL could not be read. | Idem : recopiez l'URL depuis la page Overlay. |
La fenêtre de contrôles
Toutes les commandes manuelles des widgets — passer une alerte, vider le chat, +1 sur un compteur, lancer le subathon… — dans une seule fenêtre, à côté de votre overlay plutôt que dessus. Son URL est sous celle de l'overlay, dans Fenêtre de contrôles :
Les commandes manuelles de chaque widget dans une seule fenêtre. Ajoutez-la comme dock personnalisé dans votre logiciel de streaming (OBS Studio, Streamlabs Desktop, Meld Studio…), ou ouvrez-la dans sa propre fenêtre de navigateur. Ajoutez-la comme dock personnalisé dans votre logiciel de stream, ou ouvrez-la dans sa propre fenêtre de navigateur.
Il n'y a qu'une fenêtre de contrôles pour tous vos overlays : ses boutons passent par Streamer.Bot et atteignent toutes les sources navigateur à la fois. Avec plusieurs overlays, son URL est sous celui qui exécute les actions ; les autres indiquent Affichage uniquement.
Dans OBS Studio : Docks → Docks de navigateur personnalisés, donnez-lui un nom et collez l'URL. Comme celle de l'overlay, cette URL contient vos réglages : recopiez-la quand elle indique Vous avez modifié des réglages depuis la copie de cette URL, et ne la montrez jamais si vous utilisez un mot de passe Streamer.Bot.
La fenêtre montre un groupe par widget activé, dans l'ordre des widgets. Elle ne connaît que les widgets activés quand vous avez copié son URL : après en avoir activé un, copiez l'URL à nouveau. Elle se connecte seule à Streamer.Bot, et son en-tête affiche l'état de la connexion. La roue dentée ouvre Options d’affichage :
| Option | Détail |
|---|---|
| Titre | Empilé (chaque groupe sous son titre, par défaut) ou Onglets (un groupe à la fois ; une liste déroulante quand la fenêtre est étroite). |
| Commandes affichées | Un interrupteur par widget, pour écarter les groupes dont vous ne vous servez jamais. |
Saved in this window only: each dock or window keeps its own choices : chaque dock ou fenêtre garde ses propres choix. Les mêmes commandes sont sur la page de chaque widget, dans son onglet Commandes.
| Message | Que faire |
|---|---|
| No controls here: switch on a widget that has some. | Aucun des widgets activés n'a de commandes. |
| Toutes les commandes sont masquées. | Ouvrez Options d’affichage et réactivez-en quelques-uns. |
| This window has no settings. | L'URL a été tronquée : recopiez l'URL des contrôles depuis la page Overlay. |
Pourquoi il faut recopier l'URL
Vos réglages sont enregistrés dans le stockage local de votre navigateur. Votre logiciel de stream est un autre programme : il ne peut pas lire ce stockage.
Toute la configuration est donc compressée et placée dans le hash de l'URL — la
partie après le #. Seules les valeurs qui diffèrent des défauts y figurent, et
seulement pour les widgets que cette source navigateur affiche ou fait tourner, ce qui
garde l'URL raisonnable. Les images que vous importez (l'image d'une alerte, d'un compte à rebours,
un badge de succès) n'y sont pas : elles sont enregistrées dans Streamer.Bot, où la source
navigateur les lit.
Ce qui en découle, par ordre d'importance :
- Une URL collée dans une source navigateur est une photo. Elle contient les réglages tels qu'ils étaient au moment de la copie. Changez un texte d'alerte et l'overlay continue d'afficher l'ancien jusqu'à ce que vous recopiiez l'URL. Sous l'aperçu, Vous avez modifié des réglages depuis la copie de cette URL vous prévient quand l'URL copiée de l'overlay choisi n'est plus à jour. Un réglage de widget change l'URL de tous les overlays : recopiez chacune.
- Le mot de passe de Streamer.Bot ne quitte pas votre PC. Le hash d'une URL n'est jamais envoyé au serveur web — c'est la partie d'une adresse que le navigateur garde pour lui.
Les compteurs des objectifs, le temps du subathon et les autres valeurs enregistrées font exception : ils vivent dans Streamer.Bot (via l'action Stream UI - Backend), et continuent donc quelle que soit l'URL collée.
Sauvegarder vos réglages
Le stockage du navigateur disparaît si vous videz les données du site, changez de machine ou de navigateur. Gardez un export : le bouton Sauvegarder vos réglages, à côté du titre du Créateur d’overlay, mène à l'onglet Sauvegarde de la page Réglages. Il contient tous les overlays.