Creating and controling OBS Widgets with Hype and Node.JS

Share your Work
1

TL;DR:

This example demonstrates using Hype to create OBS widgets and an external UI for controlling these widgets using Hype's functions. This allows remote execution of Hype functions from another window or device.

Steps:

  1. Install Node.js.
  2. Install Socket.IO (npm install socket.io).
  3. In the terminal (macOS) or PowerShell (Windows), navigate to the directory where server.js and the html folder are located.
  4. Run the included server.js (node server.js).
  5. Open the KovaakUI or add it to OBS as a "Browser" element using the URL http://localhost:3000/kovaakui/.
  6. Launch the RemoteUI using the URL http://localhost:3000/remote/.
  7. Control KovaakUI from the RemoteUI. You can access the RemoteUI from another browser or device, such as a smartphone. To run the RemoteUI from an external device like a smartphone, replace "localhost" with the IP address of the computer running KovaakUI.

There is a video about this on the bottom.

Sup!

It's been a while since I last showed up here. I was involved in interactive projects, but honestly, my JavaScript skills couldn't meet the challenges. Eventually, I had to turn down some projects and stopped coding commercially. I now use Hype exclusively for personal projects.

Around 2021, I started to take my gaming passion more seriously and gave Kovaak a try. Back then, Kovaak didn't have any kind of graph to compare performance. So, I created one using Hype:

OBS Widgets with Hype and Node.JS

While I saw the potential to use Hype to make interactive OBS widgets (Open Broadcaster Software), the problem was handling interactivity. Manually selecting the widgets on OBS, selecting "interact," and managing only one widget at a time was quite troublesome. Additionally, having the interactive elements visible on the widget was not ideal and could discourage people from using them during live streaming sessions.

Now, with the advent of ChatGPT and AI, I decided to take up the challenge again armed with AI knowledge in code development. AND IT WORKED!:

You can even control it using another device like a smartphone, tablet, or laptop as long as they are on the same network. With this capability, you can create a Hype control panel that can manage the content of multiple widgets. For streamers, it becomes faster and more intuitive to trigger different actions and contents for the OBS widgets.

You can find my talk with ChatGPT here
https://chat.openai.com/share/7e5878af-340e-440b-be3b-3d7616bdd5f2

While in THAT conversation, it finally worked, it took around 2 days of personal research. While ChatGPT is indeed smart, if you ask the wrong questions or lack proper understanding of how the code works, ChatGPT can provide accurate answers that may not work in the context of your content. That's why I had to be super specific in that last conversation.

Now, regarding that tutorial, I don't think I am equipped with the knowledge to create a tutorial from scratch. However, the code is simple enough for me to make a video explaining how to set up the configuration so that it can work for any project.

Download the HTML and Hype files here:

https://www.dropbox.com/scl/fo/auqmh6xjeg8hcmowmrro2/h?rlkey=td2mm1zqwa0wlokmdddk3j242&dl=1

6 Likes
2

Really nice. Possibilities are endless… for live situations, one could even add Pusher.com to the mix. That would allow interactions from remote servers.

1 Like
3

Yeah, as a streamer, if someone has a cheap tablet, they can create their own control dashboard. This way, they don't have to alt+tab or even touch OBS at all to trigger different actions on the widgets.

In live situations, I can see people watching even being able to interact with the widgets through actions on other websites or triggered by donations and similar content.

2 Likes
5

This is really cool. I was looking for an offline way to control other screens running independent hype projects. You've done the hard work - now to not break your great work while I tweak it for my idea. Thank you!

2 Likes
6

Wow. Really nice!

I'm in the middle of building an App to control OBS, Companion, YouTube Streaming and Hype Animations. Also powered by ChatGPT.

My goal is simplifying the process of conducting, streaming and recording interviews at industry shows. With 6 - 8 live streams in two days, I needed to automate generating lower thirds, title slides, countdown timer, live steams with descriptions, thumbnails, etc.

It is really cool seeing what you have done. And I'm guessing it wil inspire me to do more.

Thank you!

1 Like
7

Yeah, that's the cool thing about using Hype for this because now we can build a control dashboard for all the widgets on OBS. Since we have full control over building these tools, they can be customized for specific needs, like triggering using keyboard keys or running them on a tablet or smartphone.

The only way OBS allows for these interactions is to manually right-click on each widget and click "interact." However, this only allows us to interact with the selected widget, so it's not optimal for more advanced uses.

Also, I just found out that VP9 allows for transparent videos on OBS for both Mac and Windows.

Thanks for the comments.

1 Like