# Browser Transition



## Exeldro (Dec 30, 2022)

Exeldro submitted a new resource:

Browser Transition - Plugin for OBS Studio to show a browser source during scene transition



> Plugin for OBS Studio to show a browser source during scene transition
> View attachment 90105



Read more about this resource...


----------



## Exeldro (Jan 2, 2023)

Exeldro updated Browser Transition with a new update entry:

Version 0.0.2



> add volume control when "Control audio via OBS" is enabled



Read the rest of this update entry...


----------



## Exeldro (Jan 2, 2023)

Exeldro updated Browser Transition with a new update entry:

Version 0.1.0



> Add fixed duration
> Add transition point type option
> Add track matte options



Read the rest of this update entry...


----------



## THE R3Y3S (Jan 2, 2023)

Hi, idk if this is only my problem but when i press on transition preview, browser get stucked on preview, so i didn't see the change A - browser - B, but only A - browser.


----------



## Exeldro (Jan 2, 2023)

@THE R3Y3S the preview button indeed seems not to be working correctly after some tries. I will look into that.


----------



## BeoMulf (Jan 3, 2023)

Not sure if we consider this a bug or not, but the default action of the stinger doesn't suppress scroll bars for ~0.5s on load, so they flash at the start of the stinger unless you suppress them in your own CSS. I don't see a use case for scroll bars to ever show for this, so might want to be included in the default css injection?


----------



## Exeldro (Jan 3, 2023)

@BeoMulf the default custom CSS contains `overflow: hidden;` that should work right?
do you have the page reload every time you transition?


----------



## Exeldro (Jan 4, 2023)

Here some javascript I used for testing a page without having to refresh the page every time the transition starts:

```
window.addEventListener('obsSourceActiveChanged', function(event) {
    if(event.detail.active){
        //start transition
    }else{
        //end transition
    }
})
```

For the preview button not working correctly I made a pull request for OBS:








						libobs: Fix stopping transitions that are not active by exeldro · Pull Request #8003 · obsproject/obs-studio
					

Description Fix stopping transitions that are not active Motivation and Context For transitions in the properties dialog (cloned private source) no audio render is done, so the transition never sto...




					github.com


----------



## BeoMulf (Jan 5, 2023)

Exeldro said:


> @BeoMulf the default custom CSS contains `overflow: hidden;` that should work right?
> do you have the page reload every time you transition?


I do have it reloading on every call - that seemed the easiest way to trigger the animation each time. The extension was rendering the scrollbars when my browser source did not have the over: hidden tag. When I wrote it in myself I was able to hide it, but the {overflow: hidden} injection in the extension does not appear to be working in the same way.


----------



## Exeldro (Jan 6, 2023)

@BeoMulf I would advice against reloading the page every time, but use the 'obsSourceActiveChanged' event instead. See the example code in my previous post.


----------



## hmeneses (Jan 6, 2023)

I’m not sure on how to use it, so used a YouTube link, the stinger appeared, but the sound of the video keep going without a way to stop it


----------



## BeoMulf (Jan 6, 2023)

Interesting bug - the browser transition will not render if it is not the selected transition in the Scene Transitions dock - instead, it just fails to render and then transitions to the scene after a given amount of time. This is not the case for other transition options when making use of your transition table.


----------



## Exeldro (Saturday at 4:09 AM)

@hmeneses did you try enable the route audio via obs option?
@BeoMulf I will try and replicate it this weekend


----------



## hmeneses (Saturday at 8:49 PM)

Exeldro said:


> @hmeneses did you try enable the route audio via obs option?
> @BeoMulf I will try and replicate it this weekend


I will try that


----------



## hmeneses (Sunday at 4:44 AM)

ok i'm using this configuration




with the content of this zip file as local file

it's really interesting!


----------



## BeoMulf (Yesterday at 12:12 AM)

This may factor into issues with how OBS handles scene transitions in general, but I have noticed considerable stutter in using the transitions when they do not stutter in a) the preview or b) chrome/firefox/edge test articles. Seems to be slighlty ameliorated by transitioning from blank scene to blank scene (aka no need to unload webcam, etc) but even that doesn't quite fix things.


----------



## Exeldro (Yesterday at 8:46 AM)

@BeoMulf are you reloading the page every time or are you using the obsSourceActiveChanged event?
I changed the example of @hmeneses a bit so that it does not have to reload the page every time, also added time after the animation so the timing can be a bit off. I hope I done it correctly because I have little web development experience.


----------



## hmeneses (Yesterday at 8:55 PM)

Exeldro said:


> @BeoMulf are you reloading the page every time or are you using the obsSourceActiveChanged event?
> I changed the example of @hmeneses a bit so that it does not have to reload the page every time, also added time after the animation so the timing can be a bit off. I hope I done it correctly because I have little web development experience.


i changed my own page to slowdown the "grow" animation, and noticed i need to add loading time for the page in order for the animation to run smoothly, so if my animation is 2 seconds long, i make the stinger 400 ms longer, so your modification helped a lot to make it work properly in different machines


----------

