OBS – Websocket Stays Open After Exiting

I have been plagued by this issue for a while: After closing OBS, a zombie process would continue to block the TCP port previously used by OBS’s websocket plugin. Trying to query the process ID never yielded any results. So what gives?

In my case, it turns out that the likely culprit was the OBS Droidcam plugin, which just received an update to mitigate exactly this misbehaviour.

After installing the update I can confirm that the zombie process and the listening TCP port no longer occur.

Building a video soundboard in OBS

Despite the fact that I do not stream as much anymore, I continue to tinker with OBS on a daily basis. For a while now I wanted to have what I would call a “video soundboard”, a simple mechanism that allows me to quickly play short clips during my stream.

Now, this doesn’t really sound too hard. Create many scenes, add media sources, slap a StreamDeck button on top of that – boom, you are done. This is a crappy solution because it requires a ton of additional work to add new videos into the mix.

I wanted to have a mechanism that relies entirely on one single scene with one single media source for all the content. Control over what gets played is wholly set on the StreamDeck and the StreamDeck only, meaning that adding new content is as easy as adding a single new command to a new button on the StreamDeck.

Sounds interesting? Here is how it works.

Prerequisites

Before we start, you will need the following things ready:

The Basic Setup

Create a new button on your StreamDeck with the Text File Tools plugin.

Specify a target filename and set the Input Text to the location of your desired media file (i.e. C:/Temp/heheboi.mp4). Leave the “Append” checkbox unchecked so the entire file gets rewritten.

This is all you will need to do to add new media to the scene. We can now set up OBS.

Within OBS, create a new scene (i.e. “Scene – Memes”) and add a media source to that scene (i.e. “Media Source – Memes”). Make sure this is a media source and not a VLC source!

Open the properties of the media source and be sure to check the “Local File” checkbox, “Restart playback when source becomes active”, “Use hardware decoding when available” and “Show nothing when playback ends”.

Hide the media source via the Sources list by clicking on the “eye” icon in the source list.

Setting up Advanced Scene Switcher macros

Now open the Advanced Scene Switcher plugin via Tools – Advanced Scene Switcher, navigate to the Macro tab and add a new Macro called “Meme Scene (Start)”.

Check the “Perform actions only on condition change” checkbox and add the following condition:

[ If ] [ File ]
Content of [ local file ] [ <PATH ON STREAMDECK BUTTON> ] matches:
.*

(Yes, that is dot asterisk – no space or anything else before, after or inbetween)
Check the “use regular expressions” checkbox and the “if modification date changed” checkbox, and leave “if content changed” unchecked.

Now add the following actions:

[ Switch scene ]
Switch to scene [ Scene - Memes ]
Check the "Wait until transition to target scene is complete" checkbox.

[ Scene item visibility ]
On [ Scene - Memes ] [ Show ] [ Source ] [ Media Source - Memes ]

This takes care of actually playing the video when a change in the file is detected. But we also want to switch back to the previous scene when playback has finished, so we must add another macro.

Add the second macro “Meme Scene (End)”, check the “Perform actions only on condition change” checkbox and add the following conditions:

[ If ] [ Scene ]
[ Current scene is ] [ Scene - Memes ]

[ And ] [ Scene item visibility ] (Click the clock) [ For at least] [ 1.00 ] [ seconds ]
On [ Scene - Memes ] [ Media Source - Memes ] is [ Shown ]

[ And ] [ Media ]
[ Media Source - Memes ] state is [ Ended ]

Add the following actions to the second macro:

[ Switch scene ]
Switch to scene [ Previous Scene ]
(Check the "Wait until transition to target scene is complete" checkbox)

[ Scene item visibility ]
On [ Scene - Memes ] [ Hide ] [ Source ] [ Media Source - Memes ]

Now we should be good, right? Well, almost. While we react to changes in the file thanks to the macro and switch between the scenes, we still do not set the media file on the source. This is handled by the Lua script which we must set up as a final step.

Setting up the Lua script

Open the Scripts window via Tools – Scripts and add the VideoFileFromText.lua script.

You should see some options on the right side of the window.

Set the interval to 50ms, browse to select the same text file you used on the Elgato StreamDeck button for the Video File List, and select the “Scene – Memes” scene for the Scene, as well as the “Media Source – Memes” for the Media Source. Finally, check the “Enable script” button and you are done.

Tying it all together

Be sure that the Advanced Scene Switcher is active and press the button on the StreamDeck. The scene should switch to your Meme scene, play the video and then switch back. Add another button on the StreamDeck that writes a different video file path to the same text file.

Now press the new button, and the second video file should play.

This makes adding short clips really simple and pain-free. No need to manually create multiple scenes or deal with multi-action steps on the StreamDeck. Adding a new video is as quick as adding a new button, setting the path to the desired media file and giving it a nice button image.

Of course, this is just the solution that I came up with, so your mileage may vary.

However, I do think that the inherent simplicity makes it an ideal solution. What do you think?

Streamlining your OBS workflow

Building a stream layout is a lot of work. Design elements like colours, fonts and layouts have to be consistent. In the past, I used to design things in Photoshop or Affinity Photo, cut the assets up into smaller pieces and then either use them in OBS directly or run them through DaVinci Resolve for some basic animation. This approach works fine on a rather static layout.

Now I’ve been toying around with the idea of what I call “After Dark” streams that have their own, slightly different style. The fonts and layouts stay the same, however, all the colours change. With my old workflow I would either need to re-export and edit all the assets… or find another way.

For a while, I have been doing my layouts as HTML documents now. Using CSS animations and jQuery as a base for dynamic data processing, I can easily switch things around.

Since I am on Windows, reading/writing the contents of a JSON file is really easy with Powershell. So I can map some Stream Deck keys to perform value toggles in the JSON, causing my layout to dynamically adjust.

Same for the “Now Playing on Pretzel” widget. It processes the JSON file generated by Pretzel’s desktop client, dynamically resizes the widget and even fades out once music stops playing.

HTML stream layout comparison

The overall advantage is obvious: If I ever choose to edit the colour scheme, it is one edit within one CSS file. New font? A couple of changes. Changing the stream title, metadata et al is also just a simple set of nodes in a JSON file – the rest of the layout dynamically adjusts. And it is all easily accessible through one press on my Stream Deck.

Additionally, this approach reduces the number of required scenes/elements drastically. Whereas you would either need to toggle the visibility of sources or duplicate scenes on a more traditional setup, everything runs in proper code here. I have no dedicated intermission scene… the title card simply transforms into it, keeping all elements coherent within the scene.

“But Tsukasa, the performance impact”, people will yell. I dare say that any blur effect on a fullscreen video in OBS has probably a heavier impact on the performance than a reusable browser source. The entire title card sits at around 10% CPU usage, with a good portion of that going towards the VLC video source.

Dynamic changes to the layout

So I feel it is high time people stop using video-based layouts and migrate to proper HTML-based ones.