Responsive Browser Source

[Jasper]

Hey,
maybe it would be a great feature to have the option to resize the browser source responsively instead of just stretching it.

The idea behind that is that someone can create an overlay with html / css / js that behaves responsive to the size of the webcam etc.

 

[Mango]

If you right-click the source, enter Properties, and change the width and height to the width and height of your base resolution, instead of resizing your source by click-and-drag, does that do what you want?

 

[Jasper]

If you right-click the source, enter Properties, and change the width and height to the width and height of your base resolution, instead of resizing your source by click-and-drag, does that do what you want?

No thats not what i mean.
For example you have an overlay above your webcam and if you want to scale it up it gets more detailed like icons appear or some metrics. And if you scale it down it gets more simple.
Just like a website changes from mobile view and Desktop view.

 

[Mango]

I tested this with my employer's website which is responsive and it did work (mobile layout when the width was narrow and desktop layout when the width was wide).

 

[tbmcqueen]

I think Jasper is talking about resizing the Browser Source on the fly by stretching the bounding box?

 

[kelbyprime]

I think Jasper is talking about resizing the Browser Source on the fly by stretching the bounding box?

Yes, is there a plugin that does this?

 

[RonXTCdaBass]

maybe helps a css code snippet a lil bit?

body{ width: 100%; height: 100vh; padding: 0; margin: 0; }

 

[Prukotar]

@Jasper is looking for the exact same thing as me.

I want to create an browser overlay for my camera. When placing the overlay over the kamera and grouping this together it would be extremly easy to resize the whole group and show different informations or rescale the border inside my browser overlay. Currently I have to match my overlaysize using the "Properties" and find the exact pixel value that it matches my camera size.

Also consider the following: You have a browser source as an overlay for your camera and want to use the camera and a browser source in two different szenes. In conjunction with the "Move Transition"-Plugin it would be cool to resize the camera and the browser source at the same time with a cool transition.

Is there any solution to resize the browser without scaling it up or down by dragging the bounding box? That would be as it is when resizing a normal browser window like chrome.

 

[Prukotar]

To clarify, I want that changing the red box in this screenshot directly changes the width and height inside the properties dialog:

 

[Prukotar]

Is there really no way (may be a plugin), that can change the inner width and height when resizing the bounding box of a browser scene item?

 

[marcelovilaca]

Just if anyone is still interested in this...
I found this script that kinda does the job... But it screws up with move transition...

obs-responsive-browser/browser-resize.lua at main · cgsdev0/obs-responsive-browser

OBS script to make browser sources responsive. Contribute to cgsdev0/obs-responsive-browser development by creating an account on GitHub.

github.com

If anyone has a better idea, please let me know it...

 

[marcelovilaca]

Just an FYI that I just did....

So when you install this, it kinda screw up all other browser sources if you have more than 1....

So basically all the other browser sources becomes 1x1