gh-obsproject/obs-browser
Watch
1
0
Fork
You've already forked obs-browser
 0
Code Issues 37 Pull requests 13 Releases 15 Wiki Activity

Add support for setting page zoom for browser sources #432

Open
alyssais wants to merge 1 commit from alyssais/zoom into master
pull from: alyssais/zoom
merge into: gh-obsproject:master
Conversation 5 Commits 1 Files changed 5 +21 -1
alyssais commented 2024-01-25 07:09:08 -06:00 (Migrated from github.com)

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.
<!--- Please fill out the following template, which will help other contributors review your Pull Request. --> <!--- Make sure you’ve read the contribution guidelines here: https://github.com/obsproject/obs-studio/blob/master/CONTRIBUTING.rst --> ### 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.](https://github.com/obsproject/obs-browser/assets/2768870/d13c30e1-065b-4998-b41b-701cb3dacb6b) ### 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: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] My code has been run through [clang-format](https://github.com/obsproject/obs-studio/blob/master/.clang-format). - [x] I have read the [**contributing** document](https://github.com/obsproject/obs-studio/blob/master/CONTRIBUTING.rst). - [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. <ins>The KB article on the browser source will need to be updated, but I don't see any way for me to do that.</ins>
WizardCM commented 2024-01-25 18:53:50 -06:00 (Migrated from github.com)

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.

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 commented 2024-01-29 11:05:07 -06:00 (Migrated from github.com)

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.

I'm using a browser source to embed [owncast](https://owncast.online/) 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](https://reddit.com/r/obs/comments/g6um4t/scaling_of_browser_source/)'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 commented 2024-01-29 19:15:52 -06:00 (Migrated from github.com)

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

I think this PR is useful and would like this feature to be added. Thanks!
Warchamp7 commented 2024-01-29 22:24:06 -06:00 (Migrated from github.com)

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?

> I'm using a browser source to embed [owncast](https://owncast.online/) 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](https://reddit.com/r/obs/comments/g6um4t/scaling_of_browser_source/)'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 commented 2024-01-30 10:00:59 -06:00 (Migrated from github.com)

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.

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.
This pull request has changes conflicting with the target branch.
  • browser-client.cpp
  • browser-client.hpp
  • obs-browser-plugin.cpp
  • obs-browser-source.cpp
View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin 'alyssais/zoom:alyssais/zoom'
git switch 'alyssais/zoom'

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch 'master'
git merge --no-ff 'alyssais/zoom'
git switch 'alyssais/zoom'
git rebase 'master'
git switch 'master'
git merge --ff-only 'alyssais/zoom'
git switch 'alyssais/zoom'
git rebase 'master'
git switch 'master'
git merge --no-ff 'alyssais/zoom'
git switch 'master'
git merge --squash 'alyssais/zoom'
git switch 'master'
git merge --ff-only 'alyssais/zoom'
git switch 'master'
git merge 'alyssais/zoom'
git push origin 'master'
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
area/accessibility
Improves accessibility of the program

  
area/dependency
Issue is in external library or dependency, not OBS itself

  
Confirmed

   
Crash Report

   
Delayed
Merging has been delayed due to an issue

  
Design Issue
There is an issue with incorporating this pull request's design. It may take some time to finalize.

  
Duplicate

   
Feedback required
Issue does not contain enough information or is missing the template

  
Good first issue
New to contributing to OBS? Start here!

  
kind/bug
Categorizes issue or PR as related to a bug.

  
kind/cleanup
Non-breaking change which makes code smaller or more readable

  
kind/enhancement
Enhancements are not bugs or new features but can improve usability or performance.

  
platform/linux

   
platform/macos

   
platform/windows

   
priority/high
This is an important PR

  
Question

   
Request for Comments
More feedback & discussion is requested

  
Seeking Other Contributors
This PR needs help from any other developers who are willing to give a crack at this code

  
Seeking Testers

   
Won't Fix / By Design
No labels
area/accessibility
area/dependency
Confirmed
Crash Report
Delayed
Design Issue
Duplicate
Feedback required
Good first issue
kind/bug
kind/cleanup
kind/enhancement
platform/linux
platform/macos
platform/windows
priority/high
Question
Request for Comments
Seeking Other Contributors
Seeking Testers
Won't Fix / By Design
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
gh-obsproject/obs-browser!432
No description provided.