Add support for setting page zoom for browser sources

[alyssais]

Description

I've implemented support for setting the zoom level of the browser, equivalent to pressing Ctrl-+ / Ctrl-- in a browser.

The range of [-6, 9] comes from kPresetZoomFactorsArray in Chromium. Zoom levels are indexes into this array, offset so that a 0 zoom level is 1.0.

Motivation and Context

Previously, the only way to scale up a page was to use custom CSS, which may or may not work well depending on how the CSS rules of the page being displayed were written, or to transform the browser source, which would be blurry.

How Has This Been Tested?

I tested on Linux, by setting the zoom level of a browser source to various different values in the properties, as well as checking that the zoom level persisted when the URL was changed to a different site.

Types of changes

• New feature (non-breaking change which adds functionality)

Checklist:

• [x] My code has been run through clang-format.
• [x] I have read the contributing document.
• [x] My code is not on the master branch.
• [x] The code has been tested.
• [x] All commit messages are properly formatted and commits squashed where appropriate.
• [ ] I have included updates to all appropriate documentation. The KB article on the browser source will need to be updated, but I don't see any way for me to do that.

[WizardCM]

Hi! Thanks for your PR. Could you elaborate on your use case and motivation? The intent of the browser source is to allow rendering of web-based overlays that are purpose-build. If a page needs to be zoomed to render correctly in an OBS source context, then it's likely not intended to be used here. As it is, we've had no requests before now for zoom capabilities within browser sources.

[alyssais]

I'm using a browser source to embed owncast chat in my stream, with a little custom CSS to animate messages to fade out after they've been displayed for a few seconds. The only problem is that it's a bit small.

Presumably if all overlays used in OBS are supposed to be purpose-built, there'd be no need for the custom CSS feature, since the CSS could all be part of the purpose built page?

Even if the page were purpose built, a zoom feature is still useful because currently, if I increase the resolution of my video, the overlay will get proportionally smaller. So the page would have to support multiple different scales itself, which is a lot more difficult to implement than using the browser native scaling.

Here's an example of somebody else asking about this feature. The solution proposed in that thread, of just streaming a real browser window, would not work in cases where the page has transparency.

[i2]

I think this PR is useful and would like this feature to be added. Thanks!

[Warchamp7]

I'm using a browser source to embed owncast chat in my stream, with a little custom CSS to animate messages to fade out after they've been displayed for a few seconds. The only problem is that it's a bit small.

Presumably if all overlays used in OBS are supposed to be purpose-built, there'd be no need for the custom CSS feature, since the CSS could all be part of the purpose built page?

Even if the page were purpose built, a zoom feature is still useful because currently, if I increase the resolution of my video, the overlay will get proportionally smaller. So the page would have to support multiple different scales itself, which is a lot more difficult to implement than using the browser native scaling.

Here's an example of somebody else asking about this feature. The solution proposed in that thread, of just streaming a real browser window, would not work in cases where the page has transparency.

Is there a reason you can't use the zoom or transform: scale() css properties to accomplish this?

[alyssais]

I spent a long time with zoom and transform. I managed to figure out what the right values should be, but it interfered the with JavaScript that tries to keep the chat scrolled to the bottom. Browser zoom doesn't have this problem.