Capture Scrolling Webpage Screenshots in OBS Studio

While OBS Studio is primarily known for video recording and live streaming, it is also a powerful tool for capturing high-resolution, full-page scrolling screenshots of websites. By utilizing OBS Studio’s built-in “Browser” source and adjusting the canvas resolution to fit an entire webpage, you can bypass the need for third-party browser extensions and capture ultra-high-definition, seamless images of long web pages. This guide will walk you through the precise steps to set up your canvas, load the website, and export a high-resolution screenshot.

Step 1: Configure a Custom High-Resolution Canvas

To capture a full scrolling webpage, you must temporarily increase OBS Studio’s canvas height to match the vertical length of the target website.

  1. Open OBS Studio.
  2. Click on Settings in the bottom-right Controls dock (or go to File > Settings).
  3. Select the Video tab from the left sidebar.
  4. In the Base (Canvas) Resolution field, manually type in a custom high-resolution aspect ratio. For example, use 1920x4000 or 1920x8000 depending on how long the webpage is.
  5. In the Output (Scaled) Resolution field, type the exact same resolution to prevent any downscaling and preserve image quality.
  6. Click Apply and then OK. Your preview window will now appear as a tall, narrow vertical strip.

Step 2: Add and Configure the Browser Source

Instead of capturing your actual desktop browser, you will load the webpage directly inside OBS as a source to ensure it renders at the exact resolution of your canvas.

  1. Go to the Sources dock at the bottom of the screen.
  2. Click the + (Add) icon and select Browser.
  3. Name the source (e.g., “Webpage Screenshot”) and click OK.
  4. In the Properties window, paste the destination URL into the URL field.
  5. Set the Width to 1920 (or your preferred width).
  6. Set the Height to match your custom canvas height (e.g., 4000 or 8000).
  7. Scroll down and check the box for Refresh browser when scene becomes active to ensure the page loads cleanly.
  8. Click OK. The webpage will load and stretch to fill the entire tall preview window.

Step 3: Interact with the Webpage (Optional)

If you need to accept cookie banners, close pop-ups, log in, or scroll down to trigger lazy-loading images before taking the screenshot:

  1. Right-click the Browser source in your Sources list.
  2. Select Interact from the context menu.
  3. A separate window will open allowing you to click, type, and scroll through the webpage as you would in a normal browser. Close the window when finished.

Step 4: Capture and Save the Screenshot

Once the page is fully loaded and rendered on your preview canvas, you can take the high-resolution capture.

  1. Right-click your Browser source in the Sources list (or right-click directly on the preview window).
  2. Select Screenshot (Source) from the menu. This captures the raw browser source at its native high-resolution.
  3. Alternatively, you can select Screenshot (Preview) to capture the entire canvas.
  4. To find your saved screenshot, go to the top menu bar of OBS and click File > Show Recordings. Your high-resolution scrolling screenshot will be saved there in PNG format.