Comment utiliser la source de navigateur dans OBS pour ajouter des widgets et du contenu web

Nous allons vous montrer comment utiliser la source navigateur dans OBS pour ajouter des widgets et du contenu web. C'est l'une des meilleures fonctionnalités d'OBS pour… intégrer des éléments dynamiques dans les enregistrements et les diffusionsVous pouvez facilement enrichir n'importe quelle scène avec des ressources visuelles qui nécessitaient auparavant des configurations complexes. Commençons.

Qu'est-ce que Browser Source exactement ?

Comment utiliser la source navigateur dans OBS ? Que vous soyez un streamer débutant ou que vous veniez de passer à OBS, ce guide est fait pour vous. OBS Studio pour l'enregistrementIl est utile de savoir précisément ce qu'est la fonction Source du navigateur. Imaginez que vous puissiez Prenez un navigateur web invisible et placez-le dans votre scène OBS.Comme s'il s'agissait d'une couche supplémentaire. Eh bien, c'est essentiellement ce qu'est une police de navigateur.

En interne, OBS utilise le moteur de rendu Chromium (le même que Google Chrome) pour charger et afficher n'importe quelle URL que vous spécifiez. Son secret réside dans la transparence : seul le contenu visuel (texte, graphismes, animations) de la page web se superpose à votre flux vidéo (jeu ou caméra). De plus, contrairement à une image statique, Une police de navigateur peut être mise à jour en temps réel.

Cela signifie que, par exemple, un widget de don affichera le dernier don, et une fenêtre de discussion recouvrir, nouveaux messages. Vous pouvez également Observez en temps réel l'augmentation du nombre d'abonnés avec un compteur d'abonnés. Tout cela sans avoir besoin de plugins complexe et sans que vous ayez à faire quoi que ce soit d'autre.

Comment utiliser la source de navigateur dans OBS pour ajouter des widgets et du contenu web

Examinons maintenant étape par étape le processus d'utilisation d'une source de navigateur dans OBS pour ajouter des widgets et du contenu web. L'intégration d'une source de navigateur est simple et suit toujours les mêmes étapes. La première chose à faire est Ouvrir OBS Studio et assurez-vous d'être dans la scène où vous souhaitez ajouter le widget.

Maintenant, sur le panel de Sources (Sources), cliquez sur le bouton « + » et sélectionnez Navigateur (Navigateur) Dans le menu déroulant, une fenêtre s'ouvrira pour vous permettre de nommer votre police. Vous pouvez lui donner un nom descriptif, comme « Widget d'alerte » ou « Chat à l'écran », afin de mieux organiser votre projet.

Cliquez sur "Accepter" Les propriétés de la police s'ouvriront alors. C'est ici que vous devez configurer le cœur du widget :

• URL : Collez ici l'adresse web fournie par le service que vous utilisez (StreamElements, Streamlabs, etc.).
• Largeur et hauteurIl est généralement conseillé d'utiliser la résolution de votre zone de dessin (par exemple, 1920x1080) pour les widgets occupant tout l'écran. Pour une fenêtre de chat ou un compteur, vous pouvez définir une taille plus petite.
• FPS : Le nombre d'images par seconde (IPS) détermine la fluidité des animations. 30 IPS suffisent amplement dans la plupart des cas, mais pour des animations très complexes, vous pouvez l'augmenter à 60. Une valeur plus élevée consomme davantage de ressources du processeur.
• Éteignez la source lorsqu'elle n'est pas visible.Il est recommandé d'activer cette option pour optimiser les performances. OBS cessera alors de traiter le widget lorsque vous passerez à une scène qui ne le contient pas, ce qui permettra d'économiser des ressources système précieuses.
• CSS personnaliséCe champ est destiné aux utilisateurs avancés. Il permet de modifier le style de la page web chargée, par exemple en masquant des éléments ou en forçant la transparence de l'arrière-plan si le widget ne le prend pas en charge nativement.

Utilisation du code source du navigateur dans OBS : où trouver les widgets et les éléments Web ?

Comme vous pouvez le constater, il est très facile d'utiliser la fonction Source du navigateur dans OBS pour ajouter des widgets et du contenu web à vos flux et enregistrements. La procédure de base et la configuration initiale sont simples, mais maintenant, il vous faut… Faites preuve de créativité et sélectionnez les éléments dont vous avez besoin.Où peut-on se les procurer ?

L'une des plateformes les plus complètes et les plus populaires de son genre est Éléments de flux. Vous y trouverez des widgets et des éléments de toutes sortes : alertes, chat à l’écran, compteurs d’objectifs, listes d’événements et bien plus encore, le tout géré depuis votre panneau de contrôle. Vous devez vous inscrire pour obtenir des URL personnalisées.Vous collerez ensuite le texte dans OBS. La plupart de ses fonctionnalités sont gratuites.

Une autre source similaire est Streamlabs, L'une des principales plateformes pour les streamers. Elle propose également une large gamme de widgets tels que les alertes et le chatet fonctionne de la même manière avec une source de navigateur. Ces sites web, parmi d'autres, constituent un bon point de départ pour débuter avec les sources de navigateur dans OBS.

Applications pratiques : des widgets qui transforment votre flux

La police du navigateur est l'élément fondamental sur lequel repose l'interaction d'un flux. Le type et le nombre d'éléments et de widgets utilisés dépendent du contenu diffusé et de l'objectif visé auprès de votre audience. Examinons-en quelques-uns. applications les plus courantes lors de l'utilisation de la source navigateur dans OBS :

Alertes et superpositions

C'est probablement l'utilisation la plus répandue. Des services comme StreamElements et Streamlabs sont les leaders dans ce domaine. Ils vous permettent de concevoir des alertes personnalisées qui apparaissent à l'écran lorsqu'une personne vous suit, s'abonne ou fait un don.

Widgets de chat à l'écran

Afficher le chat à l'écran est une excellente pratique, notamment pour les plateformes comme YouTube. C'est également une bonne idée pour les spectateurs qui regardent vos vidéos. flux sur grands écrans ou téléviseurs, là où le chat natif n'est pas disponibleVous pouvez notamment choisir la taille de la police, la transparence de l'arrière-plan, la vitesse de fondu des messages et leur position à l'écran.

Sous-titres et traduction en direct

Il s'agit de l'une des applications les plus intéressantes et utiles que vous pouvez essayer lorsque vous utilisez Browser Source dans OBS. Des services comme StreamTranslate permettre générer des sous-titres en temps réel de ce que vous dites, et même de le traduire dans d'autres langues, le tout grâce à une simple police de navigateur.

Il vous suffit de l'URL fournie par le service, et OBS se chargera d'afficher les sous-titres dans votre vidéo. flux, sans avoir besoin de plugins Aucun logiciel supplémentaire n'est nécessaire. C'est un outil fantastique pour atteindre un public international.

Compteurs, cibles et tableaux de score

Voulez-vous montrer un objectif d'abonnement ou minuteurIl existe des widgets pour tout. Par exemple, vous pouvez ajouter un tableau de bord indiquant la durée de votre diffusion en direct, ou un compte à rebours pour un concours. Le site web minuteur.ringomar.com Il propose un minuteur simple que vous pouvez utiliser avec une URL personnalisée, démontrant ainsi la flexibilité de cette fonctionnalité.