JavaScript Video Tutorial: Controlling OBS in JavaScript

In this tutorial I suggest you discover how to control OBS Studio from a page using JavaScript and WebSockets

The basic principle

To begin with, we will install OBS WebSocket which allows you to automatically launch a WebSocket server when the software is launched. It will then be possible to connect to this server in order to be informed of events that take place on the software or to send messages to perform certain actions.

An example: scene selector

To simplify the communication with the WebSocket server we are going to use the OBS WebSocket JS library which offers an API which greatly simplifies the communication.

To start, we connect to the WebSocket server.

const obs = new OBSWebsocket ();
await obs.connect ({address: "192.168.0.35:4444", password: "obscontrol"});

Once connected, you can send a message to the server to request the list of scenes. The server will then respond with a message that contains the list of our scenes and the associated sources. The bookstore takes care of this round trip via a promise.

const data = await obs.send ("GetSceneList");

You can then loop through all the scenes to generate one button per scene. A message will then be sent to request a change of scene when clicking on this button.

for (const scene of data.scenes) {
  const button = document.createElement ("button");
  button.innerText = scene.name;
  button.addEventListener ("click", () => {
    obs.send ("SetCurrentScene", {"scene-name": scene});
  });
  document.body.appendChild (button);
}

And There you go ! You can now switch scenes remotely.

For further

The example given here is rather simple but it is possible to do much more complex things.