Question / Help BrowserSource is blurry.

[chrisyroid]

Hi. I'm having a problem with BrowserSource. I have an HTML page I load from it but the resulting output from it is blurry. Is there any way I can fix this?

 

[carlmmii]

That looks like you're upscaling the browser source, which is why it looks blurry -- you're taking the lower resolution of the browser, and expanding that smaller image to fit the scene.

Ideally what you want to do is set the browser source's page size to be big enough for the intended size on the canvas, so you're dealing with natively larger elements from the browser.

 

[chrisyroid]

That looks like you're upscaling the browser source, which is why it looks blurry -- you're taking the lower resolution of the browser, and expanding that smaller image to fit the scene.

Ideally what you want to do is set the browser source's page size to be big enough for the intended size on the canvas, so you're dealing with natively larger elements from the browser.

Oh gosh. Okay. I figured that might be the problem. Also I increased the size of the font in the document and that fixed it. Thank you for your swift reply!

 

[macharborguy]

One thing you could try is apply a Scaling Filter to the Browser Source. Right click the source in the Sources list, find "Scale Filtering" and choose Disable. This will prevent any softening of the Browser Source when you increase its size. It will look blocky, but it will be sharper than it would have been. Note: this will not add extra quality to the Browser Source itself, it will simply make the pixels bigger.

 

[Exabytes]

Hi guys, i do have exactly the same problem and i don't really do any kind of scaling, and i am maximizing the browser to the full screen size when i import the html,but still not working and its blurring and when i open the html by the firefox or google chrome or any browser is just working perfectly even if i make it so big still zero pixel , please advise. kindly find the attached Picture

 

[Streamfog_kev]

I had the same problem and stumbled upon this note that says you can pass flags to the OBS shortcut and they will be forwarded to the chromium browser source.

Adding those flags improved the performance of my browser sources immensely:

"C:\Program Files\obs-studio\bin\64bit\obs64.exe" --ignore-gpu-blacklist --enable-zero-copy --disable-software-rasterizer --enable-native-gpu-memory-buffers --disable-gpu-vsync --enable-gpu

 

[13lade]

Hey,
I know I am late to the party, but the OBS browser supports zoom.

You can use the following CSS:

body { zoom: 200%; }