Categories
OBS OBS Design Fundamentals

OBS Design Fundamentals – Browser Source

Browser Source is the most versatile source you will use with OBS. Browser sources can be used to play audio, show video, display images, and any applications a developer can host on a website because browser source is a full-on web browser. Browser sources are so versatile that companies such as Stream Elements and StreamLabs allow people to design and host all their images, text, audio, and video to a single overlay that can be accessed as a single browser source using a URL.

Under the preview window if you select a browser source the only option available to you is the refresh button. If the browser source is not working correctly, refreshing will re-establish a connection to the URL.

URL

As a web browser the browser source will need to know the exact website address that you would like to display on the preview window. While you can use a browser source to display web pages, the primary feature that browser source is known for is running widgets and alerts created by programmers. Websites like Stream Elements will allow you to make an overlay and convert all the information in the overlay to a single URL for you to set in the URL field.

Local File

The local file checkbox allows you to display any image, video, audio, or program as if it were from a website. Note that linking audio and video files will play the file but not allow any direct control to adjust the volume or stop or rewind the file.

Width & Height

Since the browser source is a web browser, you will have to set the width and height of the source manually. Typically, when using a widget or alert from a service like Stream Elements, you will be given the recommended width and height to set for the browser source.

Use Custom Framerate

Selecting this checkbox will create a text box allowing you to set the Frames Per Second (FPS) for the browser source. As a best practice, I would recommend not using this option unless there are rendering issues that require you to force the website or widget to be displayed at a specific framerate.

Control Audio via OBS

By default, the volume of any audio source will be played at the volume the audio or video file was set at. If you require direct control if the volume is too loud, selecting this checkbox will create an audio controller for the browser source which you can control in the Audio Mixer window.

Custom CSS

By default, all browser sources use the CSS code to make the background transparent. However, if you know CSS, you can include your own code to have the source have its own style.

Shutdown Source When Not Visible

This checkbox will deactivate the browser source when you are on a scene that doesn’t use the browser source.

Refresh Browser When Scene Becomes Active

When the scene is switched to where the browser source is active, the browser source will refresh and reload the content of the URL.

Refresh Cache of Current Page

This is the same option as the refresh button under the preview window. The page will be refreshed and reload any content from the browser source.

Create A Browser Source

Creating and using a browser source while as simple as inputting the URL, usually means that you are going to be reliant on a developer’s code from their server or a service like Stream Elements or StreamLabs to use a browser source.

For this example, we’ll be making a browser source that will connect to a website that will allow us to show the date. Below is the URL which you will need to copy.

https://cdn.rawgit.com/sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad/raw/108196e17c2c9d79ff60ed3bf788973ab94da9af/clock.html?style=font:%20bold%2050px%20orbitron;%20color:%20rgba(255,255,255,1);%20border-radius:%205px;%20padding:%202px%205px;background-color:%20rgba(0,0,0,0);%20margin:%20auto;%20width:%20320px;%20text-align:%20center%20&format=MM/DD/YYYY

1.      From the sources window, click on the + sign and select Browser Source and click the OK button on the pop-up window.

2.      Copy the URL above and paste the URL into the URL field.

3.      Confirm the changes by pressing the OK button.

If done correctly you should see the current date as a browser source that will automatically update as the date changes.

Browser sources are the most versatile source that OBS has to offer, especially if you know how to program. However, even if you don’t know how to program, services such as Stream Elements and StreamLabs exist that allow you to upload images, videos, and audio and convert them to a browser source. If you have your own website, you can also host your own code.