Comment Configurer StreamElements

Envie d’essayer autre chose que Streamlabs pour vos alertes de stream ? Essayez StreamElements ! Vous avez peut-être déjà vu la vidéo sur le plugin SE.Live Multistream, eh bien ils font aussi des pages de dons, des widgets et des alertes de stream, et on va voir comment les configurer.

Principe de fonctionnement

StreamElements permet de faire plus que ça, on peut carrément créer nos propres overlays via leur éditeur, en y ajoutant éventuellement des alertes. Exemple ici, j’ai ajouté des images, des widgets, des alertes, et je n’ai plus qu’à ajouter une source navigateur dans OBS qui regroupera tout ce que je viens de faire.

J’aurai donc une seule source navigateur pour tout mon overlay, alertes comprises, ça permet d’avoir un OBS ultra clean et d’éviter d’avoir trop de sources dans une même scène. Et c’est ça l’une des grandes forces de StreamElements, ce système complet qui fonctionne avec une simple source navigateur.

Site StreamElements

On va déjà créer un compte sur le site StreamElements, tout simplement en cliquant sur « Get Started » ou « Log In », et on pourra s’identifier avec la plateforme de notre choix : Twitch, YouTube, Kick, Trovo ou X. Ensuite on donne les autorisations, on valide tout, et on arrivera sur le tableau de bord. Le site est classique, avec les menus à gauche, l’aide en bas à gauche, et la zone principale au centre.

On peut noter qu’il y a un flux d’activité permettant de voir tous les événements qui se sont passés sur notre chaîne. Dans mon exemple, vous voyez que j’ai l’activité pour Twitch et YouTube, c’est parce que j’ai connecté ma chaîne YouTube également, ce qu’on peut faire en cliquant sur notre avatar en haut à droite, puis sur le nom d’utilisateur, et enfin sur Paramètres de la chaîne. Je passe les détails mais c’est ici qu’on pourra ajouter différentes chaînes et récupérer leur activité au besoin, c’est assez simple il suffit de cliquer sur le logo d’une plateforme pour ajouter un compte.

Bref, ce qui nous intéresse aujourd’hui chez StreamElements ce sont les overlays, et pour ça on va pouvoir déplier le menu Outils de streaming :

• Overlays : pour accéder aux overlays qu’on a déjà créés ou pour en créer un nouveau en partant de zéro, ce qu’on verra juste après.
• Galerie d’overlays : pour accéder aux overlays, alertes et autres widgets gratuits que propose SE, sachant qu’on peut avoir un aperçu en cliquant sur le nom de l’overlay, et si on trouve quelque chose qui nous convient on peut simplement cliquer sur Créer, ça aussi on va le voir dans quelques instants.
• Alertes et Widgets : comme pour les overlays, c’est pour accéder cette fois aux alertes et widgets qu’on a créés ou pour en créer à partir de zéro.
• Elements Gallery : pour accéder à encore plus d’éléments de stream proposés pour la communauté SE, on y trouve des choses vraiment sympa.

Utiliser un modèle d’overlay

Une des options pour utiliser StreamElements, c’est de partir d’un modèle, de l’installer et de l’utiliser ensuite dans OBS ou l’appli Streamlabs, ce qu’on verra juste après. Mais pour utiliser un modèle, c’est très simple :

1. aller dans la galerie d’overlays
2. choisir un modèle et cliquer sur Créer
3. nommer le thème et cliquer sur « Créer ma superposition »
4. tous les liens des différentes scènes sont disponibles et prêts à être copiés dans OBS, et pour les modifier, on peut cliquer sur « Aller à mes overlays »

On arrive alors dans le menu Overlays qui rassemble tous nos overlays, alertes et autres widgets. On peut voir un aperçu des scènes, avec la scène de jeu, la scène de discussion, la scène de début de stream, etc. Pour modifier un overlay, on peut cliquer sur le bouton Modifier, ça ouvrira l’éditeur StreamElements.

Éditeur StreamElements

L’éditeur fonctionne un peu comme OBS Studio, avec des sources qui sont comme des calques. Exemple avec le modèle qu’on a installé juste avant, dans la section « Layers », on trouve toutes les sources, avec notamment les alertes, un widget pour les réseaux sociaux, quelques labels de stream et un cadre de webcam.

Chaque élément peut être masqué, affiché, déplacé, supprimé ou paramétré. Ici, le cadre de webcam au format 4:3 est masqué, si je veux l’utiliser à la place de l’autre, je le déplace, je masque le cadre 16:9 avec l’icône en forme d’œil et j’affiche le cadre 4:3, tout simplement.

Tous les éléments masqués dans l’éditeur seront invisibles sur mon overlay dans OBS, et donc en stream, ce qu’on peut confirmer en cliquant sur le bouton Preview en haut à droite, puis « Open in new tab », l’overlay sera ouvert dans un onglet du navigateur et vous pourrez voir à quoi ça ressemble. Et après tout changement, pensez à bien sauvegarder via le bouton Save également en haut à droite. Notez qu’on trouve aussi une barre de contrôle en bas de l’éditeur, avec la possibilité de zoomer, d’annuler ou refaire une action, etc.

Si on replie la section Layers, on verra mieux les autres sections qui apparaîtront en fonction de la source sélectionnée. Exemple avec le widget pour les réseaux sociaux. Si je déplie la section Settings, j’aurai accès aux réglages du widgets, avec une partie pour le style ou on peut changer la police, la taille du texte, la couleur, etc. Une autre partie pour configurer la durée d’affichage de chaque réseau, ici c’est réglé pour qu’il y ait un roulement toutes les 10 secondes. Et une dernière partie pour modifier les noms des réseaux, donc je peux mettre mon pseudo sur TikTok, sur Discord, sur Instagram et sur YouTube. Je sauvegarde et ça y est, j’ai réglé mon widget.

Avec un modèle, tout est déjà plus ou moins préparé, c’est très pratique et ça enlève une grosse partie du boulot. On peut même tester les alertes en cliquant sur le bouton Emulate en bas, puis en choisissant un événement, que ce soit un nouvel abonnement, un subgift, un raid ou un simple follow. Exemple avec l’alerte de follow, si j’en simule un nouveau, l’alerte se déclenche à l’endroit où est placée la boîte d’alertes, et ça permet de constater que tout fonctionne parfaitement.

Notez qu’on peut renommer un élément en double-cliquant sur son nom, ça peut être utile, et encore une fois, pensez à bien sauvegarder les changements à chaque fois, et il ne restera plus qu’à coller les liens de vos overlays dans des sources navigateur, ce que je détaillerai après.

Créer son propre overlay

On peut aussi décider d’utiliser nos propres overlays. Pour ça :

1. aller dans le menu « Mes overlays »
2. cliquer sur le bouton « Nouvel overlay »
3. choisir une résolution (le 1080p est très bien), cliquer sur Start

Scène de début de stream

À partir de là, on est de nouveau sur l’éditeur SE, et on va pouvoir commencer à ajouter nos propres éléments. Exemple avec une scène de début de stream :

1. cliquer sur « Add widget » ou sur le gros « + » en bas
2. aller dans Static/Custom et choisir un widget de type Vidéo
3. cliquer sur « Change video »
4. cliquer sur « Select files » et aller chercher l’overlay de début de stream que vous avez téléchargé sur Own3d ou ailleurs, ou simplement glisser-déposer le fichier dans l’éditeur
5. sélectionner la vidéo et cliquer sur Submit
6. vérifier que la case Loop est bien cochée pour jouer l’animation en boucle
7. cliquer sur « Position, size and style »
8. régler les dimensions à celles du canevas, donc 1920 x 1080

On peut aussi ajouter le texte de nos réseaux sociaux :

1. cliquer sur le gros « + » en bas
2. aller dans Static/Custom et choisir un widget de type Text
3. dans le menu de gauche, dans le champs Message, taper le pseudo sur le réseau social
4. dans la section « Text settings », personnaliser le texte au besoin
5. déplacer le texte à l’endroit approprié sur l’overlay
6. répéter l’opération pour chaque réseau

Pour gagner un peu de temps et éviter de devoir personnaliser le texte à chaque fois, dans la section Layers, on peut dupliquer le widget texte et uniquement changer de texte, puis le déplacer où on veut, et ainsi de suite jusqu’à avoir nos trois textes bien renseignés et bien placés. Et voilà un 1er overlay avec une scène de début de stream. N’oubliez pas de sauvegarder les changements.

Scène de fin de stream

Si on a besoin de faire d’autres scènes de ce type, comme une scène de fin de stream ou une scène de pause, on peut là aussi gagner un peu de temps en revenant dans le menu « Mes overlays ». Là, sur l’overlay de début de stream on va cliquer sur les trois petits points, dupliquer l’overlay pour la plateforme de notre choix, puis valider.

On pourra ensuite modifier ce nouvel overlay, le renommer une fois dans l’éditeur et uniquement changer le fond :

1. sélectionner le widget Video, cliquer sur Settings, puis « Change video »
2. cliquer en haut à droite sur Upload, chercher l’overlay de fin de stream, valider
3. sélectionner l’overlay en question, cliquer sur Submit

Et voilà, on a une 2e scène en deux temps trois mouvements. Reste juste à sauvegarder.

Autres scènes

Vous avez compris le principe, on ajoute des éléments dans l’éditeur pour créer l’overlay de toutes pièces. Quelques petites choses à savoir tout de même :

• si vous faites une scène de discussion, il est possible d’ajouter le chat via un widget également, chat qui sera lui aussi personnalisable avec le fond de couleur ou un fond transparent, le texte personnalisable, la durée d’affichage des messages, etc.
• si vous avez besoin de labels de stream, pour afficher sur l’overlay le dernier follower ou le dernier Sub par exemple, il existe aussi des widgets pour ça. Notez juste que vous pouvez modifier le texte mais qu’il faudra garder la variable {name} pour que le pseudo de la personne soit affiché, et vous pourrez bien entendu personnaliser le texte également.
• de nombreux widgets sont disponibles, comme un compte à rebours, qu’on utilise souvent sur la scène de début de stream, mais on trouve aussi d’autres widgets sympa, que je vous laisse le soin de découvrir par vous-mêmes.
• dernière astuce, si vous faites un overlay pour votre scène de jeu, vous pouvez utiliser un screenshot du jeu pour placer les éléments comme il faut, et vous pourrez supprimer le screenshot ou juste le masquer une fois que vous aurez tout bien placé, ça fonctionne aussi.

  

Ajouter les overlays sur OBS

Une fois que tous les overlays sont créés et modifiés, que ce soit avec un modèle ou avec vos propres overlays, il faut les ajouter sur OBS ou l’appli Streamlabs. Et comme on l’a vu au tout début, ça se fait tout simplement via des sources navigateur. Le tout c’est de bien récupérer l’adresse des overlays et pour ça on a deux options :

• sur l’éditeur, on peut simplement cliquer sur l’icône de maillon en haut à droite
• ou, dans le menu « Mes overlays », sous l’overlay qui nous intéresse on peut cliquer sur les trois petits points et choisir Copier l’URL

Quelle que soit la méthode choisie, il faudra ensuite aller sur OBS :

1. créer une scène et la nommer
2. ajouter une source navigateur, la nommer pour plus de clarté
3. dans les propriétés de la source, dans le champ URL, coller l’URL de l’overlay qu’on a récupérée sur le site StreamElements
4. renseigner les dimensions 1920 x 1080, puis cliquer sur OK.

L’overlay est en place, et il faudra répéter l’opération avec les autres overlays pour avoir toutes nos scènes fonctionnelles sur OBS. Et encore une fois, on aura des scènes clean avec juste une source navigateur.

Évidemment, il faudra quand même ajouter la Capture de jeu dans la scène de jeu et bien la placer sous l’overlay. Idem avec la webcam qu’on ajoute avec une source « Périphérique de capture vidéo », toujours à placer sous l’overlay pour avoir le cadre de cam par dessus. Mis à part ça, tout le reste est opérationnel. Reste les alertes qu’on peut aussi modifier, je vous montre comment créer et personnaliser les alertes StreamElements ici-même.

Avantages et inconvénients

Revenons rapidement sur les avantages et inconvénients d’utiliser le système de StreamElements avec des sources navigateur. L’avantage majeur, c’est celui cité en début de vidéo, avec une simplification voire une épuration des scènes dans OBS. Et on sait que moins il y a de sources dans une scène, plus OBS est content et moins ça prend de ressources.

En revanche, il y a quand même un gros inconvénient, c’est que si on doit modifier l’overlay, on doit passer par l’éditeur SE, on ne peut pas faire la modif directement depuis OBS, c’est logique. Après, rien n’empêche de dupliquer un overlay, de le modifier pour que tout soit inversé par exemple, et de créer une nouvelle scène sur OBS avec ce nouvel overlay inversé, ça fait une scène en plus mais ça permet de changer rapidement de disposition en fonction du jeu qu’on veut streamer.

Enfin, autre inconvénient, si le site SE est hors-service, les overlays ne seront plus disponibles. Ce n’est encore jamais arrivé en ce qui me concerne, mais on reste tributaire d’un service externe à OBS, et il peut aussi être nécessaire parfois de réactualiser les sources navigateur dans OBS en cas de bug, même si là aussi c’est très rare.

Mais globalement, c’est une solution plutôt pertinente pour celles et ceux qui veulent un OBS propre et peu énergivore. D’autant que StreamElements propose en réalité plein de widgets via sa communauté, on trouve un peu de tout, des timers pour les subathons aux chat sous forme de bulles en passant par les widgets pour faire des shoutouts… Je vous présente quelques-uns des meilleurs widgets StreamElements ici-même si ça vous intéresse.