Download Roboflow OBS Controller Zip from GitHub: Download OBS Controller
After unzipping, open “roboflow.js” because we need to change a few variables before running the code.
After opening we are going to focus on LINES 5 - 21.
With main.js still open, we are going to open up OBS to get the first line of information we need from OBS which is the websocket IP and Port.
The most recent versions of OBS come with the OBS Websocket Settings installed.
After opening the OBS Websocket Settings we are going to be presented with a panel like below. Click “Enable WebSocket server” if it isn’t already enabled. This will allow us to use the websocket of OBS.
This panel also has a button called “Show Connection Info” which after clicking we can see the Server IP, Port Number and Password which is required for logging into this OBS instance.
Set a password if you don’t already have one and copy those three variables to a notepad. We will be using them in the next step.
After successfully navigating the settings and enabling OBS websockets, you should have something like this:
IP: 192.168.1.2 PORT: 4455 PASSWORD: Roboflow
We are now going to construct the websocket address which will be used in our main.js on LINE 5.
Required config: "ws://IP:PORT"
Example config: "ws://192.168.1.2:4455”
On LINE 5 -> Replace your IP and PORT number in the required config above to make something similar to the example config. If you have all the appropriate
On LINE 6 -> Replace the PASSWORD with the password you set in the OBS-Websocket Settings.
To run the current version of the Roboflow OBS Controller we will need to create two scenes inside of OBS.
One named “WebcamScene” and another called “WebcamScene2” which we will use to switch between. We will also need to set up a source object called “Lenny” which will be controlled by the “Up”, “Down”, “Stop” and “Grab” gesture.
Here are the lines in main.js that control which scenes and sources that we will be controlling.
It is important to know that the scene names in the main.js, need to match the scene and source names that you create in OBS. Matching the scene and source names is how we are going to get Roboflow.js controlling your OBS environment.
Here is Scene_1 set up in OBS, you will notice that the scene is named “WebcamScene” and we have two sources, one running our webcam and the other is called “Lenny” which is holding our “lenny.png” which is included in the .zip folder.
This is Scene_2 set up in OBS, which is only set up to demo transitioning. If you have another webcam, you can set it as a source in “WebcamScene2”. Secondary webcam is not required to demo scene transitions.
Go to Roboflow Workspace Settings to get Publishable Key: https://app.roboflow.com/settings/account
Replace LINE 14 in roboflow.js with your own Publishable Key.
Replace LINE 15 in roboflow.js with your project model ID which is the first string with the red arrow.
Replace LINE 16 in roboflow.js with your project Version ID which is the number at the end of your project URL.
TURN ON YOUR OBS VIRTUAL CAMERA AND FEED IT AS INPUT TO ROBOFLOW.JS
If everything is configured correctly, you should be able to use the up and down gesture to switch scenes, and the grab and stop gesture to control Lenny.png