Learn to work with OBS Studio Browser Sources within minutes

OBS Studio is a powerful tool for content creators especially live streamers, and its browser source function opens up a world of possibilities for adding web content in your livestream. Whether you want to display a live chat, overlay a website, or showcase alerts, the Browser Source function has got you covered.

1. Adding a Browser Source

Adding a Browser Source in OBS Studio is fairly easy. Open OBS Studio, create a new source or use an existing one. Once you have your source, navigate to the Scenes window, click the icon, and from the list, select "Browser Source" Follow the steps below, and you should have set up a new web-based element. Later, I will explain the fields inside this window.

OBSCountdown
OBSCountdown
OBSCountdown

2. Configuring the Browser Source

OBS Studio's Browser Source functions much like a standard browser; it supports HTML5, which means it can render any modern web-based element. However, Browser Sources aren't limited to web URLs alone. They also enable you to load an HTML file from your local PC by selecting Local File within the Browser Source window. This option allows you to load an HTML file without relying on the web.

  1. OBSCountdown
    Local File:

    Local File is a checkbox that enables you to load an HTML file instead of relying on a web page. This feature allows you to broadcast widgets from files on your own device, making it possible to have those widgets even without an internet connection. As you may already know, OBS Studio is not just a live streaming application; it also allows you to create streaming content offline.

  2. OBSCountdown
    URL:

    The URL does the same thing, it simply loads the web-based file via the URL. Later on, we will delve deeper into how we can customize the preview of the browser source.

  3. Width and Height: Set the size of the source to ensure it fits well within your scene. Most browser source widget developers will provide you with the default size of their preview.
  4. Custom CSS (optional): If you're familiar with CSS, you can customize the appearance of the browser source using CSS code, this function overrides the default browser source styling, for more informations you can read Mastering Custom CSS in OBS Studio: Elevate Your Streaming Experience.
  5. Control Audio via OBS: If your browser source includes any type of audio, checking this option allows you to adjust the audio settings of the source from the Audio Mixer.
  6. Use Custom Frame Rate: If your browser source has any motion elements, you can set the framerate to match your requirements.
  7. Shutdown source when not visible: Check this box if you want to conserve resources by only loading the source when it's visible in your scene.
  8. Refresh Browser when Scene becomes active: This will refresh the page every time the scene becomes active. This is not recommended for widgets like countdown timers that may restart when you switch scenes.
  9. Page Permissions: OBS Studio recently introduced Page Permissions, which allows you to control OBS Studio through the WebSocket from your browser source.
OBSCountdown

3. Positioning and Layering

After configuring the source settings, you can position the element by dragging it just like any other element in your scene. You can crop the browser source element to fit the content inside by pressing the "ALT" key and dragging the red guideline. Once cropped, the red line turns green, indicating that the browser source element has been cropped. This method works for any kind of element you want to crop when positioning it, in order to reduce the space used in your layout.

You should also keep in mind that sources are layered inside your scene. Therefore, you can right-click on the source and choose "Order" to change its position in the layer stack. Alternatively, you can lock the positioning so that you won't accidentally move the element from its desired place.

If you followed this guide word by word, you should now have a basic understanding of what the "Browser Source" function means in OBS Studio. Once you're satisfied with all the details and functionality, you're ready to start your stream or recording. Your audience will now see the dynamic web content you've added through the browser source function. And remember, choose your content wisely. Consider adding a Live Streaming Poll to allow your audience to be directly involved in making decisions on your live streaming session.

Remember that the browser source function in OBS Studio can significantly enhance the visual appeal and interactivity of your content. Experiment with different web content and layouts to find what works best for your audience and style.

Last updated

Comments

Leave a Comment