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%; }

 

[King_Gorillaz]

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

Hello !
Can you please elaborate a bit how did it help with the performance ? Like.. consuming less ? Working better ? What kind of obs browser sources did you use ? ( some are heavy )
Also, any issues that you came across while having those flags ? Please provide some specs, too <3

Also, I wanted to point out that you have this flag : --ignore-gpu-blacklist that on the note you provided , it says it should be --ignore-gpu-blocklist ( not blacklist )
And that within the code, last thing that can be seen is --enable-gpu but there are 13 options with a follow-up, nothing with just " --enable-gpu ", if you could complete the follow-ups, please <3 Thank you !