La source Navigateur d'OBS Studio (Browser Source) est probablement la fonctionnalité la plus puissante — et la plus mal comprise — du logiciel pour les casteurs esport. Elle te permet d'embarquer n'importe quelle page web dans ta scène OBS : overlays, alertes, lower-thirds, et surtout régies multistream comme Syncast.
Voici ce qu'il faut savoir pour l'utiliser sans te faire piéger.
Qu'est-ce que c'est, techniquement
La Browser Source d'OBS est un mini-navigateur intégré basé sur CEF (Chromium Embedded Framework). C'est un Chrome découpé en bibliothèque, sans interface utilisateur, qui rend une page web directement dans une texture GPU qu'OBS compose ensuite dans ta scène.
Concrètement, ça veut dire :
- ✅ Tu peux y faire tourner n'importe quelle page web moderne (HTML5, CSS, JS, WebGL, video, audio).
- ✅ La page est isolée d'OBS — un crash de la page ne crash pas OBS.
- ⚠️ C'est un navigateur séparé de ton Chrome principal. Aucun storage partagé, aucun cookie partagé, aucune session partagée.
Ce dernier point est crucial et personne ne le dit jamais clairement. On y revient plus bas.
Le piège du storage isolé
Si tu te connectes à Syncast (ou à n'importe quel autre site) dans ton Chrome principal puis que tu colles l'URL dans une Browser Source OBS — tu n'es pas connecté. Le CEF d'OBS a son propre localStorage, ses propres cookies, sa propre session.
Pareil pour les communications entre onglets : un événement BroadcastChannel ou un changement de localStorage envoyé depuis Chrome ne sera jamais capté par la Browser Source. Ce sont deux instances de Chromium qui ne se parlent pas.
La conséquence pour les apps comme Syncast : la synchro dashboard → OBS ne peut pas passer par le navigateur. Elle doit passer par un serveur (Supabase Realtime dans notre cas) avec un token de session distinct pour la Browser Source. C'est pour ça qu'on a un obs share token dédié dans le dashboard.
Les bons paramètres pour caster
Quand tu ajoutes une Browser Source à OBS, voici ce qu'on recommande :
Résolution
Mets exactement la résolution de ta scène. Si ton canvas OBS est 1920×1080, la Browser Source doit être 1920×1080. Tout downscale dans OBS dégrade la qualité d'une page web (texte flou, antialiasing pété).
FPS
30 FPS suffisent pour une régie statique (multiview, overlays). Passe à 60 FPS uniquement si la page contient du contenu animé fluide (vidéo, animations canvas/WebGL).
"Shutdown source when not visible"
Décoche-le. Si tu laisses cette option, ta page va se recharger à chaque fois que la scène change. Pour une régie multistream, c'est catastrophique — tu perds le state et les flux rebufferent.
"Refresh browser when scene becomes active"
Décoche-le aussi. Même raison.
Custom CSS
Tu peux injecter du CSS custom directement depuis le panneau OBS. Utile pour masquer un header ou ajuster un padding sans toucher au site cible. Exemple :
body { background: transparent !important; }
.cookie-banner { display: none !important; }
Audio
Par défaut, le son de la Browser Source passe par OBS comme une source audio normale. Tu peux donc le mixer, l'envoyer vers tes destinations, ou le filtrer. Attention : si tu mute la source dans OBS, ça mute aussi côté CEF — mais ça ne pause pas la vidéo.
Limitations de performance
Une Browser Source consomme du GPU et du CPU. Si tu en charges trois ou quatre en simultané dans des scènes différentes, ton OBS peut commencer à drop des frames.
Quelques astuces :
- Préfère une seule Browser Source qui change de contenu (via une URL avec params, ou via interaction) plutôt que cinq qui se font et se défont.
- Désactive les extensions Chrome dans CEF — il n'y en a aucune, mais certaines apps essaient d'en charger.
- Si ta page utilise WebGL lourd, baisse la résolution Browser Source et upscale dans OBS.
Hardware acceleration
Sur Windows, la Browser Source utilise par défaut l'accélération matérielle GPU. Si tu vois des artefacts visuels ou des freezes, tu peux la désactiver via les flags CEF d'OBS :
--disable-gpu
C'est rarement nécessaire mais ça peut sauver un cast si tu as un bug de driver.
Audio routing
Une question fréquente : comment je route le son d'une Browser Source vers un canal séparé ?
OBS Studio 28+ supporte le Track Audio Output. Tu peux assigner chaque source audio à une track spécifique (1 à 6) dans les paramètres d'enregistrement / streaming avancés. Pour une régie multistream, on recommande :
- Track 1 : ton micro
- Track 2 : audio de la Browser Source régie (chat / commentaires VOD)
- Track 3 : audio des jeux (si applicable)
Comme ça, en post-prod ou en restream, tu peux remixer indépendamment.
En résumé
La Browser Source d'OBS est ton meilleur ami pour faire entrer du contenu web dans ta scène — mais c'est un Chrome isolé, pas une extension de ton navigateur. Garde ça en tête, désactive les options "shutdown / refresh", et tu auras une régie stable.
Si tu cherches une régie multistream qui exploite à fond la Browser Source, Syncast est conçu pour ça. Le dashboard tourne dans Chrome, la sortie tourne dans OBS, et la synchro passe par un serveur — exactement le pattern que cet article décrit.