How to Record Browser with OBS

Q: “How do you record your browser?” - from r/obs of Reddit

OBS is well-known free and open-source software for live streaming and video recording. Its numerous sources and scenes allow you to record and stream almost all desktop activities on Windows, Mac, and Linux. If you plan to record web browser with OBS, it is better to use Browser Source than to use Window Capture or Display Capture because of its Interact feature. Making use of this function, you will be able to interact with your web browser directly in OBS without having to open all the web pages on your computer. Here comes a step-by-step guide on how to use the Browser source in OBS to record your web browser easily and quickly.

 

• Part 1. What is Browser Source in OBS and Why to Use It
• Part 2. Guide to Record Browser with OBS
• Part 3. Guide to Record Browser with OBS Alternative - Joyoshare VidiKit (Easier-to-use)

Part 1. What is Browser Source in OBS and Why Will You Need It

Browser source is one of the most versatile sources that you can gain access to in OBS. Quite Literally, it means you can add a web browser directly to OBS. A browser source is often used for alerts and widgets and can be added to the scenes of your streaming software. At that time, you will be able to display a web page from a local file or the Internet. You can also use web-based content such as websites, JavaScript applications, etc., and even customize them. Anything that you are able to program to run in a normal browser can be added to OBS directly.

Part 2. How to Record Your Browser with OBS

Step 1 Download and Install OBS

Download OBS from its official site and install it according to the instructions for your operating system. After that, double-click the shortcut icon to run it. You will see there are many sections at the bottom of the screen, such as "Scenes", "Sources", "Mixer", "Scene Transitions", "Controls", etc.

Step 2 Add Browser Source

When you first launch OBS, there is a scene added in by default. Be aware that you cannot drag a browser source like Google Chrome, Firefox, Safari, etc. into OBS. So here you will need to add a source. Go down to the "Sources" box and press the "+" button to select the "Browser" option. Name it whatever you want to name. Now you can copy the URL whatever that browser source is and paste it into the "Properties for 'Browser'" resulting window. You can input the width and height below the "URL" box.

Note: You are suggested to input whatever the base resolution is on your desktop, such as 1920*1080, which will allow you to pull in the full resolution and all of the content of that website.

Once you click on the "OK" button, OBS pulls in your browser just as a browser source. More amazingly, you can press the "Alt" key to drag and resize the website handily in the bounding box if there is a bunch of extra content you might not want to show. Or alternatively, you can also right-click your browser sources to transform them by going down to "Transform" > "Edit Transform...", and you are able to crop and position it in any way you want.

Here comes the coolest thing. Go down and right-click your browser source in the list and then select "Interact" from the pop-up menu. Now you can interact with the actual website itself in OBS. All things you do with your website in the "Interacting with Browser" window will interact with the browser live right here within OBS.

Step 3 Let OBS Record Browser

Now you are able to press the "Start Recording" button on the right side of the main screen to begin to use OBS to record web browser without any hassle.

Part 3. Record Browser with Best OBS Alternative - Joyoshare VidiKit

Joyoshare VidiKit (originated from Joyoshare Screen Recorder) can help record web browsers in a much easier way. Simply start this program and everything that happens on your computer can be recorded in extremely high quality. You will be able to use it to record gameplay, streaming movies, live shows, virtual meetings, video chats, and a whole lot more with no watermark and no time limit.

Supporting a variety of output formats such as 4K video, DivX, M4V, DVD-Video, 3GP2, MPEG-1, ASF, DV, MOV, MKV, AVI, MP4, FLV, WebM, etc. you can save your recordings in any way you like. Using many editing tools that come with Joyoshare VidiKit, you will be able to control your browser record flexibly, such as cutting, inserting a watermark, highlighting clicks and cursor, scheduling tasks, and more. All of them can be done perfectly with a few simple clicks.

Key Features of Joyoshare VidiKit

• Have intuitive and beginner-friendly user interface
• Record browser in full screen or any selected region
• Capture screen with audio in up to 4K quality with no lag
• Adjust codec, quality, resolution, bitrate, frame rate, etc.
• Download video from website without time limitations
• Support many editing tools and a built-in media player

 

Step 1 Start Joyoshare VidiKit on PC/Mac

After installing Joyoshare VidiKit on your computer, you can run it and then open the screen recorder on the "Record" panel. Click on the camera-like icon to turn on the "Record video and audio" mode.

Step 2 Gain Access to More Settings Options

More related settings can be viewed after clicking the gear icon in the lower right corner of the main screen. You will be able to customize your output format, add a self-made watermark to screen recording, let Joyoshare VidiKit start and stop recording automatically, etc.

Step 3 Select a Recording Region

Once you press the "+" icon on the "Capture Area" section of the main screen, you can use the pop-up frame to select any screen size to record your browser freely. Preset standard resolutions are available by clicking on the little triangle button nearby. Please remember to turn on/off system audio and microphone.

Step 4 Begin to Record Browser

Now you are free to open your browser such as Firefox, Edge, Google Chrome, etc. Press the "REC" button of Joyoshare VidiKit now and after a three-second countdown, what you perform on your browser will be recorded smoothly and perfectly. Tap the "Stop" button on the minimized toolbar outside the capturing frame to stop recording browser at any time.

Step 5 Manage Recordings

On the "History" window, you can rename your recordings and use the inbuilt media player to check your videos and audios freely. You can also click on the "Edit" icon to cut and trim unwanted parts of your recordings.

If you want to learn how to fix the OBS window capture black issue and know more about OBS, you can also refer to the source page: https://www.joyoshare.com/record-screen/how-to-record-browser-with-obs.html