Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for setting page zoom for browser sources #432

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

alyssais
Copy link

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.

Screenshot of the properties of a browser source, with a zoom level field below width and height.  Zoom level is set to 5, and the preview of the browser source is obviously heavily zoomed in.

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:

  • My code has been run through clang-format.
  • I have read the contributing document.
  • My code is not on the master branch.
  • The code has been tested.
  • 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.

@alyssais alyssais changed the title Add support for setting page zoom Add support for setting page zoom for browser sources Jan 25, 2024
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.

To make it possible to do this properly, 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.
@WizardCM
Copy link
Member

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
Copy link
Author

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
Copy link

i2 commented Jan 30, 2024

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

@Warchamp7
Copy link
Member

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants