Browser Source (Streamelements) resolution not scaling correctly

H

henlo56

New Member
This is an issue I have had for over a year now. Google searches with keywords such as Streamelements + Browser Source + Scaling (or resolution) don't bring up anything related.

My Scenes created in Streamelements are set at a 720 resolution (720x1280 for all references to 720 in this post). My OBS canvas is also set at 720 (not downscaling). The browser properties in OBS are set at a 720 resolution. However, once the overlay is added in OBS, the scaling of the content inside the browser is not correct.

Here is an example. I created a new Scene in Streamelements with a 720 canvas. I added an image (a solid green box) which was also 720. I made sure the image was fully scaled and positioned to match the size of the canvas (ie, it does not extend past the border of the canvas). I added a new 720 browser source to OBS and the contents don't match.

I am currently using OBS Studio 30.2.3 (64 bit).

Of note: the actions inside the browser source function (alerts and so forth).
 

Attachments

  • Resolution1.png
    Resolution1.png
    563.8 KB · Views: 114
  • resolution2.png
    resolution2.png
    20.5 KB · Views: 98
  • resolution3.png
    resolution3.png
    5.7 KB · Views: 106
  • resolution4.png
    resolution4.png
    48.8 KB · Views: 96
  • resolution5.png
    resolution5.png
    41.2 KB · Views: 100
  • resolution6.png
    resolution6.png
    30.8 KB · Views: 94
  • resolution7.PNG
    resolution7.PNG
    51.1 KB · Views: 99
citymanlive said:
I'm having the exact same problem right now. Did you manage to solve it somehow?
Click to expand...
I did find a solution.

Keep in mind that this issue is for OBS using StreamElements browser overlays, NOT the StreamElements version of OBS.


I use a custom dock that is a capture of the StreamElements activity feed. This would be native to the StreamElements OBS but since it is so bloated I chose to use plain OBS and a capture of the activity feed from the StreamElements site.

However, I had reduced the font in that dock (making the fonts smaller). As soon as I reset the font to 100% my overlays using StreamElements URLs scaled properly.

It took me a LONG time to figure this out.
 
Found the actual root cause for this after a lot of digging, in case it helps anyone else.

My Problem: Every StreamElements URL renders too small, but the browser source's own settings, OBS's DPI compatibility settings, cache refresh, and even fully recreating the source made no difference.

The real cause: OBS stores a per-site zoom level for streamelements.com in %appdata%\obs-studio\plugin_config\obs-browser\UserPrefs.json, under partition.per_host_zoom_levels.x.
​
In my case it had been set to -1.224 (about 80% zoom) at some point resizing a "Custom Browser Dock" - I added an "Activity Feed" from the StreamElements "Data & Reports". As this shares this exact same site-level zoom setting with every StreamElements browser source I had - Everyone got scaled too.​

Fix1: Scale the "Custom Browser Dock" back to 100% or use StreamElements OBS's own (from: Menu>StreamElements>SE.Live Docks>Activity Feed) - Which is a totally independent 'Browser', so can be scaled on its own.
Fix2: Fully close OBS, open that JSON file, find the streamelements.com entry under per_host_zoom_levels.x, and delete it (leave "x": {}), then save and reopen OBS.

Fixed every StreamElements source instantly with zero scale hacks needed.​
 
You must log in or register to reply here.
Back
Top