OBS/Streaming Support

[codemann8]

It would be really nice if there was a way to include these bingo cards on our streams. Adding a window capture source on a browser window that can have varying sizes is not a practical solution. Instead, a browser source pointing to a room as a spectator would be ideal. The problem is when you add the room as a browser source, it instead shows a "login box" instead of the bingo card.

A possible solution is to have the username, password, and spectator flag as GET variables that we can tag onto the end of the URL. And each new card we can just swap in new URLs with the proper GET variables.

[kbuzsaki]

It looks like there are a few different OBS browser plugins? Could you link to the one that you think is the latest?

Ideally, is there a description of the constraints imposed by the browser source?

I'd prefer not to include the password in the URL because it gets logged in a bunch of places :\

[codemann8]

Browser plugins? I'm using OBS Studio v23.2.1. Browser Source properties only give you the option to supply a URL, as in the same as you do when you type a URL in the address bar of a web browser.

[kbuzsaki]

Sorry, I meant "OBS plugins for browser source". These are some of the top google hits for "obs browser source":

• https://obsproject.com/forum/resources/browser-plugin.115/
• https://obsproject.com/forum/resources/clr-browser-source-plugin-obs-classic-only.22/

I also found this, which seems authoritative: https://obsproject.com/wiki/Sources-Guide#browsersource

And this forum post which seems to indicate that there's a way to interact with the browser source data, e.g. to do a captcha? https://obsproject.com/forum/threads/security-check-in-browser-source.76464/

[Lordmau5]

The Browser Source is a native plugin in OBS, no need to install anything else. I assume those resources are only there for legacy reasons (Last updated 2015 and 2014 respectively)

As for including just the board in OBS, I've made some CSS that you can put into the Custom CSS field in the Browser Source so it will only show the board (and for the login, only necessary information).

This is what it looks like when you need to authorize:

After you've joined the room it will only have the board and nothing else:

Extra info:

• Make sure the Width is set to 525 and the Height to 475 in the Browser Source
• Right-click the source -> Transform -> Edit Transform... and make sure to set Crop on Right to 15 (so it hides the invisible scrollbar)

And now for the CSS:

body {
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    max-height: 475px !important;
}

td.unselectable.popout,
.container > div:nth-child(1):not(.page-container),
.panel-body > .form-horizontal > div:nth-child(4),
.panel-body > .form-horizontal > div:nth-child(5),
.container > div:nth-child(2) > div:nth-child(2),
#color-chooser {
    display: none;
}

.flex-col-content > div {
    margin: unset !important;
}

.container {
    left: 0px;
    margin-left: 0px;
    padding-left: 0px;
}

.fill-parent {
    text-align: unset !important;
}

So basically what it does is it hides every element that isn't the board itself, forces the max. height to 475px and fixes some styling issues with what I've butchered.

It's not a perfect solution but it's good enough for my use-cases for now up until a popout solution is available 😁

I thought I'd share this in case other people might be looking for something similar, too.

[Lego6245]

Thanks for the great guide, @Lordmau5!

Would like to echo a desire for a "more proper" support for this use case. I saw #87 potentially as helpful. It would also (potentially) be nice to allow for API access to be more functional (i.e. similar to the ask in #80 which would make 3rd party "clients" feasible).

[kngrace]

A similar fix works for SLOBS (streamlabs OBS) but the browser source is a bit fuzzier than the window capture. Normally I get around this by having the browser render in a higher resolution then scale it down to the screen because for some reason that makes it less fuzzy. To accomplish this I'll need to use some CSS magic to resize the bingoboard itself. Before I deep dive into that, I wanted to check if anyone else has perhaps already used CSS to resize the table and has it handy? <3 Thanks in advance!

[kbuzsaki]

How useful would a popout be that still requires you to be logged in as normal but that opens as a popout window with a fixed initial size containing only the board and none of the rest of the UI?

I have this (and a bit of other refactoring) in the popout-dev branch. 6bd08fdce091561e290e9db93aa418e2bc7e1df6 is the WIP commit adding the actual popout. It looks like this and allows interacting with the board normally (clicking on squares), though the "starring" of goals doesn't sync because that's entirely client-side:

[Lordmau5]

That doesn't look too bad! Would it be possible to perhaps add an optional parameter to the URL to hide the column and row indicators? (Dark blue bars left and top)

What would that popout look like if I were to open it while not being logged in? Do I end up seeing the login screen and after that just the board? (Kinda like my hacky CSS)

[kbuzsaki]

I can certainly hide the row/col headers, though I figured people might want those. A URL param to control it sounds fine.

It's not possible in general to hide the address bar, for security reasons: https://stackoverflow.com/questions/15926105/hiding-the-address-bar-of-a-browser-popup

The logged-out behavior hasn't been implemented yet but my intention is what you describe, that it shows the login screen and then just the board. One issue with that is that you can't control your color from the popup session, so it would only be suitable for viewing. If you open the popup normally without needing to log in it uses your same "player" and your color choice will sync across the sessions.

I could implement a temporary token system to "transfer your login", but that's more complexity and work than just requiring another login from the popup window, so I may not implement it unless the utility seems high enough to be worth it.

[Lordmau5]

I can certainly hide the row/col headers, though I figured people might want those. A URL param to control it sounds fine.

Alright :D

It's not possible in general to hide the address bar, for security reasons: stackoverflow.com/questions/15926105/hiding-the-address-bar-of-a-browser-popup

That is fine, if you put it into a Browser Source in OBS it won't show the address bar anyway and I feel that'd be the main use case anyway

The logged-out behavior hasn't been implemented yet but my intention is what you describe, that it shows the login screen and then just the board. One issue with that is that you can't control your color from the popup session, so it would only be suitable for viewing. If you open the popup normally without needing to log in it uses your same "player" and your color choice will sync across the sessions.

Oh that's pretty neat then - and yeah, a spectator-only popout would also be pretty handy for events like Bingothon or just streaming with the board where you aren't interacting with it through OBS (if a login is still required I'd assume anonymous / auto generated usernames could suffice with the current system, similar to how Twitch handles anonymous chat with JustinfanXYZ accounts)

I could implement a temporary token system to "transfer your login", but that's more complexity and work than just requiring another login from the popup window, so I may not implement it unless the utility seems high enough to be worth it.

I think having it with the login for now is fine, it's not super urgent to be honest

---

Very cool to see progress on what I feel will be a not-as-heavily-used feature, thank you so much for this :)

[rrff666]

Hey @Lordmau5 how can you log into the room in the OBS Browser? I can only see the join room page and I don't know how to continue :(

[Lordmau5]

Hey @Lordmau5 how can you log into the room in the OBS Browser? I can only see the join room page and I don't know how to continue :(

When you have the browser source with the Bingosync link selected, either right-click it and select "Interact" or left-click it and it should appear in the bar below the preview

Once you click that, a new window will popup in which you can click on buttons and type in textboxes :)