Connect OBS Browser Source to Local JavaScript

This guide explains how to set up an OBS Studio browser source to run and interact with local JavaScript files. You will learn how to create your local HTML and JavaScript files, import them into OBS Studio, interact with the web page directly inside the OBS interface, and leverage the built-in OBS JavaScript integration.

Step 1: Create Your Local HTML and JavaScript Files

To get started, you need to create a basic web page and a JavaScript file on your local computer. Place both files in the same folder.

Create a file named index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OBS Local JS Test</title>
    <style>
        body {
            background-color: transparent;
            color: white;
            font-family: Arial, sans-serif;
            text-shadow: 2px 2px 4px #000;
            overflow: hidden;
        }
        #output {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="output">Waiting for interaction...</div>
    <button id="clickBtn">Click Me</button>

    <script src="app.js"></script>
</body>
</html>

Next, create a file named app.js in the same directory:

document.getElementById('clickBtn').addEventListener('click', () => {
    const output = document.getElementById('output');
    output.innerText = 'Hello from local JavaScript!';
    output.style.color = '#00FF00';
});

Step 2: Add the Browser Source to OBS Studio

Now that your local files are ready, you need to load them into OBS Studio.

  1. Open OBS Studio.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (Add) icon and select Browser.
  4. Name your source (e.g., “Local JS Source”) and click OK.
  5. In the properties window, check the box labeled Local file.
  6. Click the Browse button next to the “Local file” field.
  7. Navigate to your folder and select the index.html file you created.
  8. Set the Width and Height to match your canvas size (e.g., 1920x1080).
  9. Click OK.

Your HTML page and button should now appear on your OBS canvas.

Step 3: Interact with the JavaScript Source

Because the browser source runs inside an embedded browser engine, you cannot click the button directly on the canvas preview. To interact with it:

  1. Right-click the Local JS Source in your OBS Sources list.
  2. Select Interact from the context menu.
  3. A new window will pop up showing your HTML page.
  4. Click the Click Me button in this window.

The text on your OBS canvas will instantly update to “Hello from local JavaScript!”, demonstrating that your local JavaScript file is working.

Step 4: Access the OBS Studio JavaScript API

OBS Studio injects a special helper object into the browser source environment named window.obsstudio. You can use this object in your local JavaScript to detect if the page is running inside OBS and to get status updates.

To use it, update your app.js file with this code:

if (window.obsstudio) {
    document.getElementById('output').innerText = 'Running inside OBS Studio';
    
    // Listen for scene changes
    window.addEventListener('obsSceneChanged', function(event) {
        document.getElementById('output').innerText = 'Scene changed to: ' + event.detail.name;
    });
} else {
    document.getElementById('output').innerText = 'Running in a standard web browser';
}

This API allows your local JavaScript to dynamically respond to stream events, scene changes, and source transitions.