How to Add Browser Source to OBS Studio [Step-by-step]

The software is a screencasting and live streaming application that is free and open-source. Thus, today we will show you how to add browser source to OBS Studio. So that you can get the best out of the app’s interface. But if you need help downloading OBS Studio, check out our article

It is written in C/C++ and built with Qt. Thus allowing for real-time capture, scene composition, recording, encoding, and broadcasting over the Real-Time Messaging Protocol. RTMP-enabled destinations such as YouTube, Twitch, Instagram, and Facebook are all supported by the software.

OBS Studio can encode video streams into the H.264/MPEG-4 AVC or H.265/HEVC formats. By using the x264 transcoder, Intel Quick Sync Video, Nvidia NVENC, and the AMD Video Coding Engine.

Moreover, it has the capability of encoding several tracks of audio in AAC format. Those who are more experienced can download any codecs and containers offered in libavcodec and libavformat. Or they can send the stream to an FFmpeg URL of their choosing.

This being said, let’s see how you can get your sources, followed by how to add a browser source to OBS Studio.

How do I get browser source on OBS?

1. In order to see the current browser source on OBS Studio, click on the Docks button at the top and select the Sources dock to show.
2. Now, you can double-click on the Browser source you already have and see all the settings that you can change.
3. You will also be able to see the URL of the browser that you had included.

Browser Sources can be added to your streaming software’s scenes to allow you to use web-based content. Such as Flash and JavaScript programs, websites, and so on, as well as edit them using CSS.

Everything that can be built to run in a traditional browser can be implemented directly into OBS (within reason, of course).

If you wonder how to add new sources, keep on reading as we will show you how to do so in the next section. Follow along!

How can I add browser source to OBS Studio?

Use the plus button

1. Make sure that the Sources dock is selected under the Docks drop-down menu.
2. Now, click on the plus button under the Sources dock and select the Browser option from the list displayed.
3. Enter the browser’s name that you want to add, then click on OK.
4. Finally, enter the URL of the browser that you want to display and configure its layout settings then click on OK.

A source that is listed above another source in the list will appear on top of the others and may obscure what is listed below it. Using this method can also be handy in cases where you want something to appear on top of another source, such as a camera appearing over your gameplay.

How does browser source work on OBS?

The main user interface is divided into five sections: scenes, sources, audio mixer, transitions, and controls. Each component has its own set of controls. Scenes are collections of different types of materials, such as live and recorded video, text, and audio.

It is possible to muffle sounds and alter volume with virtual faders on this panel. As well as add effects by hitting the cogwheel adjacent to the mute button.

There are buttons for starting and stopping a broadcast or recording, along with a button to change OBS into a more professional Studio Mode. A button to open the settings menu, and a button to exit the application on the control panel’s left side.

But, Scenes and Sources are the heart and soul of OBS Studio’s functionality. You can use this section to configure your stream layout and add your games, webcams, and any other devices or media that you want to appear in the output.

You can re-align sources in the preview and modify their order by dragging and dropping them in the list, or by using the up and down arrow buttons on your keyboard.

The browser source is one of the most versatile sources accessible in Open Broadcaster Software (OBS). This enables you to conduct a variety of unique layouts, images, videos, and even audio operations.

If you need help installing OBS Studio, don’t hesitate to follow the article linked and learn how to use it right away.

Alternatively, if you encounter issues while using OBS Studio, take a look at what to do if OBS keeps crashing in Windows 10 & 11.

Was this guide useful to you? Let us know by leaving a comment in the section below and sharing your thoughts. Thanks for reading!