StreamGen: Because dantarion is Lazy
So, I have found myself wanting to not only make more youtube videos, but also enter the Twitch/Hitbox arena. Now, one of the things that makes my streaming efforts a lot different than others is that I have a LOT of things I need to display at once for my stream to work, other than just game, cam, and a blurb of info.
When I stream KenBot, id like to show the game itself, the GUI of the bot, and possibly the monitor I am using to code. Now, OBS is perfectly capable of doing what I want, but when it comes time to polish it and make overlays+backdrops, I found myself annoyed.
I am perfectly capable of opening up Photoshop, creating something that looks amazing, and then using that on my stream. However, one thing that bugs me is that if I wanted say, lower the gamesize by 20% and increase everything else in my stream layout to match, I’d have to go through the following process.
- Make whatever adjustments I need to do in my PSD in photoshop.
- Export to PNG
- Move around sources in OBS and resize them to fit perfectly on the new layout
Now, this is fine for a streamer that only has a couple different layouts, but I wanted a bit more flexibility! I am a web developer by trade, so my initial thought was, why not HTML!
Tools of the trade
I decided to use XHTML, LESS CSS preprocessor, a bit of JQuery, and a CSS/MySQL backend and ended up with something a bit like this.
The important things to look at about this is the tab-based editor in the top left. The Global LESS tab applies CSS rules and LESS variables that apply to all layouts, allowing for theming of layouts pretty easily. The Layout LESS tab is what positions the content blocks for that layout, and for each content block, an additional tab is generated that lets you edit the raw html content of each block. The thing that makes this awesome is that with each keystroke, the layout is updated immediately, for both LESS and XHTML.
With a simple click of save, this data is saved into the database, and things are good to go.
Getting layouts into OBS
Now, I have decided to drink the koolaid and step into the fun world of using OBS-Studio. OBS-Studio is the replacement for OBS, and is also called OBS Multiplatform, as it supports Windows, Linux, and Mac. OBS-Studio stores each scene collection in a JSON file, making it very easy to write from an outside source. I wrote a python script that connects to my backend, gets a JSON config containing the positions, types, etc, for each scene, and creates scenes as needed. However, a smart reader will notice that I did something tricky there.
Where did the positions Come from!
Now, anyone that has worked with CSS knows that everything is relative. It takes significant amounts of work to get the X,Y,Width, and Height from just CSS rules. So, how did I get them? I use the browser. When a layout it saved, JS is used to retrieve the X,Y,Width, and Height of each content block, and that in formation is saved alongside the other information that makes up the layout
This is NOT at all user friendly. Ideally, the end user wouldn’t need to edit LESS at all, and would use a WYSIWIG editor instead of editing raw HTML. That is the part that comes next. I need to establish a UI that hides the internals of the stream system and presents it to the end user in a meaningful way. More posts on this later!