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

by Loredana Harsana
Loredana Harsana
Loredana Harsana
Managing Editor
Loredana is a passionate writer with a keen interest in PC software and technology. She started off writing about mobile phones back when Samsung Galaxy S II was... read more
Affiliate Disclosure
  • If you wonder how to add browser source to OBS Studio, you will need to configure the Docks tab.
  • Once you select the Sources dock, you can click on the plus button to add new browsers.
  • OBS allows you to customize the layout of the browser source as you see fit.
obs how to add browser source to obs studio

Strugling with your current browser? Upgrade to a better one: OperaYou deserve a better browser! 350 million people use Opera daily, a fully-fledged navigation experience that comes with various built-in packages, enhanced resource consumption and great design. Here's what Opera can do:

  • Easy migration: use the Opera assistant to transfer exiting data, such as bookmarks, passwords, etc.
  • Optimize resource usage: your RAM memory is used more efficiently than in other browsers
  • Enhanced privacy: free and unlimited VPN integrated
  • No ads: built-in Ad Blocker speeds up loading of pages and protects against data-mining
  • Gaming friendly: Opera GX is the first and best browser for gaming
  • Download Opera

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.docks how to add browser source to obs studio
  2. Now, you can double-click on the Browser source you already have and see all the settings that you can change.browser how to add browser source to obs studio
  3. You will also be able to see the URL of the browser that you had included.url how to add browser source to obs studio

Expert Tip: Some PC issues are hard to tackle, especially when it comes to corrupted repositories or missing Windows files. If you are having troubles fixing an error, your system may be partially broken. We recommend installing Restoro, a tool that will scan your machine and identify what the fault is.
Click here to download and start repairing.

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.docks how to add browser source to obs studio
  2. Now, click on the plus button under the Sources dock and select the Browser option from the list displayed.browser-dock how to add browser source to obs studio
  3. Enter the browser’s name that you want to add, then click on OK.browser-name how to add browser source to obs studio
  4. Finally, enter the URL of the browser that you want to display and configure its layout settings then click on OK.set-url how to add browser source to obs studio

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!

idee restoro Still having issues? Fix them with this tool:
  1. Download this PC Repair Tool rated Great on (download starts on this page).
  2. Click Start Scan to find Windows issues that could be causing PC problems.
  3. Click Repair All to fix issues with Patented Technologies (Exclusive Discount for our readers).

Restoro has been downloaded by 0 readers this month.

This article covers:Topics: