Kruiz Control Widget

Kruiz Control Widget is a template for connecting browser sources to Kruiz Control through the OBS websocket.

@Kruiser8 | Trello (Roadmap) | Patreon | Support Discord

Table of Contents

• Overview
• Installation
  • OBS Websocket
  • Add as Browser Source
• Configure the Script
  • Send Messages from Kruiz Control
  • Send Messages from the Widget
• Support Kruiz Control
• Credits

---

Overview

Kruiz Control Widget requires that you use OBS and the OBS websocket. This allows Kruiz Control to pass information from Kruiz Control to the Widget through the websocket and vice versa.

Note: (September 13, 2022) Fixed authentication issue when multiple widgets connect simultaneously to the websocket by adding random delay to the widget connection. If you'd like to disable or configure this delay, see line 26 of js/KCConnection.js.

Note: (March 18, 2021) Fixed authentication issue when multiple widgets connect simultaneously to the websocket by adding random delay to the widget connection. If you'd like to disable or configure this delay, see line 26 of js/KCConnection.js.

⚠️ SLOBS Not Supported

The Kruiz Control Widget is not compatible with SLOBS (Streamlabs OBS).

---

Installation

OBS Websocket

To use this widget, install the obs-websocket plugin. If using the OBS websocket v4.9.x or below, download version 1.0.0 of the widget. Reopen OBS after installing.

In OBS, click Tools > WebSockets Server Settings and enable the websocket server.

It is highly recommended to use a password!

In js/index.js, update the OBS websocket url and password to match the settings you configured in the WebSockets Server Settings window mentioned above.

Add as Browser Source

Add the index.html file as a browser source within your broadcast software. It is recommended to add this source to one scene that is included in all other scenes (like your alert scene) rather than recreate this source in every scene.

Steps for adding to OBS

• In OBS, under Sources click the + icon to add a new Browser source.
• Name it and select OK.
• Check the Local file checkbox.
• Click Browse and open the index.html file within the Kruiz Control Widget directory.

---

Configure the Script

Send Messages from Kruiz Control

In Kruiz Control, send messages to the widget by passing them through the OBS websocket.

# Send data when a command happens
OnCommand b 0 !tada
OBS Send MyCustomMessage {user}

Receive the data in the widget using kcConn.on(event, callback). Any data that follows the message (like {user}) will be passed as a string input to the callback.

kcConn.on('MyCustomMessage', function(data) {
  console.log(data); // data is the value of {user}
});

Send Messages from the Widget

In the widget, send messages to Kruiz Control by passing them through kcConn.send(message, data) function.

kcConn.send('MyOtherCustomMessage', 'Hey there!');

Receive the data in Kruiz Control using OnOBSCustomMessage. data will be passed to the OnOBSCustomMessage as a parameter.

# {data} is 'Hey there!' in the below example
OnOBSCustomMessage MyOtherCustomMessage
Chat Send {data}

---

Support Kruiz Control

There are a number of ways to support this project.

• Support Kruiser through Patreon.
• Translate the Kruiz Control documentation.
• Help others in the Support Discord.
• Contribute ideas for the roadmap.
• Spread the word!

I do take commissions to implement custom functionality when necessary. Please reach out if you have a specific request.

---

Credits

• obs-websocket-js by Brendan Hagan (haganbmj)