OBS Browser Source

If you use a donation or subscription alert system like TwitchAlerts, or maybe you are using BraneBot‘s polling system, chances are you’ve been given a long URL that you’re expected to plug in somewhere in order for it to display on your stream. This URL requires using a Browser Source in your broadcasting software.

What are Browser Sources?

Browser Sources can be added to your scenes of your streaming software and enable you to use web based content such as Flash and JavaScript applications, websites and so on and even customize them via css. Since this kind of content is usually not written in the same coding languages as your streaming application, a translator is needed to make it possible for both to communicate with each other.

Why use Browser Sources?

Browser Sources make it possible to use web-based content as sources in your scenes instead of capturing them with a Window Capture source. Don’t spend a bunch of time launching your alert systems and making sure Window Capture is properly configured before each stream. This will also save you precious monitor space. Once you set up the alerts in your broadcasting platform, you’re done! That includes interactive flash applications, websites and so on. So if you are looking for a way to show donation or subscription notifications or an interactive polling system on the screen for your viewers, Browser Source is the way to go.

How to set up Browser Sources for streaming?

For OBS:

  1. Download the CLR Browser Plugin
  2. Classic OBS: Extract the files to the ‘Plugins folder’ for OBS (Path is likely C:/Program Files/OBS/plugins). Make sure to add it to either the 32 or 64-bit OBS version depending on which you use.
  3. OBS Studio: Extract the files. You’ll get a folder called ‘obs-plugins’. Throw this into your obs-studio folder to overwrite your current plugins folder.
  4. Launch OBS
  5. Add a Source -> Browser SourceOBS Browser Source
  6. Enter the URL you were provided. Enter the height and width. If dimensions weren’t recommended, you can edit your Browser Source properties to find a suitable size.

XSplit:

  1. In the lower left corner click Add -> Other -> Webpage URLXSplit Browser
  2. Enter the URL you were provided.
  3. The URL will appear under the Scene you added it to. Right click on it, or press Settings in the lower left corner to customize size and other options.XSplit CLR

Stuck and need some help? Pop into our Discord server and talk to fellow streamers.

1 COMMENT