Search browser plugin

[Romie]

Hello,
i am looking for a browser plugin between OBS and Browser. In my case, that would be the Firefox browser. The plugin should stop the browser stream when the recording software is paused. It would be practical via the OBS source browser. A user name and password are usually entered in the OBS source browser. An alternative option would be to record the window in the OBS source.

Thank you very much.

Postscript: Translated with deepl.com.

 

[AromaPunk]

Hello Romie!
Here’s a small JavaScript file that uses WebSockets to listen for pause events from OBS via the OBS WebSocket plugin.

---

Using a Tampermonkey Script​

Tampermonkey is a browser extension that allows you to run custom JavaScript on websites. Here's a step-by-step guide to implement the solution using Tampermonkey:

Step 1: Install Tampermonkey​

1. Install Tampermonkey in Firefox:
   • Go to the Firefox Add-ons page and search for Tampermonkey.
     OR CLICK HERE -> https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/
     Install the Tampermonkey extension.
     
     

Step 2: Create a New Tampermonkey Script​

1. Open Tampermonkey:
   • After installing Tampermonkey, click on its icon in the Firefox toolbar.
   • Select Create a new script.
     click on the + and a new Script will appaer
     
     
2. Add the JavaScript Code:
   • Delete all the Default Information first -
     
     
     
     
     
     
     

   • ---

     Below insert the full Tampermonkey script. It listens for OBS WebSocket events
     and pauses or resumes video elements (or other actions) accordingly
     and then Copy & Paste the Script
     
     
   • 
     
     
     
     
     
     

   • Step 3: Save and Activate the Script​

     1. Save the Script:
        • Once you've pasted the script, click on File > Save in the Tampermonkey editor.
          
     2. Adjust the @match Directive:
        • The
          // @match *://*/* directive makes this script run on all websites.
          
          If you only want it to work on specific sites
          (e.g., a specific streaming platform),
          change this to match the exact URL.
          For example (you can use more then one specific sites):
          
          // @match https://youtube.com/*
          // @match https://example2.com/*
          // @match https://example3-com/*
          

---

Step 4: Test the Script​

1. OBS Setup:
   • Ensure that the OBS WebSocket plugin is installed and running. The default WebSocket address is ws://localhost:4444. Adjust the OBS_WEBSOCKET_URL if needed.
   • If you have set a WebSocket password in OBS, include it in the OBS_WEBSOCKET_PASSWORD variable.
     
2. Open the Target Website:
   • Go to the website where you want the script to control the stream (e.g., a video platform).
     
3. OBS Actions:
   • Start recording/streaming in OBS. When you pause/resume recording, the script will detect it and trigger the appropriate action in the browser (such as pausing/resuming a video).
     

---

How It Works​

• The script establishes a WebSocket connection with OBS.
• When OBS is paused or resumed, the WebSocket sends an event to the script.
• The script then acts on that event by either pausing or playing a video element on the page. You can customize this logic to control other aspects of the webpage if needed.

Feel free to modify the script to suit your specific use case. Let me know if you need further assistance!

If you need further customization or integration, feel free to ask!

---

FRESH GREETZ
Made by "AromaPunk", with Love and Peace and OVERunity

here the script again:

// ==UserScript==
// @name OBS Pause Handler
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Handle OBS Pause Events
// @match *://*/* // Set this to the correct URL of the webpage
// @grant none
// @author (C) AromaPunk 2024 - OSTTIROL
// ==/UserScript==
//
// █████╗ ██████╗ ██████╗ ███╗ ███╗ █████╗ ██████╗ ██╗ ██╗███╗ ██╗██╗ ██╗
// ██╔══██╗██╔══██╗██╔═══██╗████╗ ████║██╔══██╗██╔══██╗██║ ██║████╗ ██║██║ ██╔╝
// ███████║██████╔╝██║ ██║██╔████╔██║███████║██████╔╝██║ ██║██╔██╗ ██║█████╔╝
// ██╔══██║██╔══██╗██║ ██║██║╚██╔╝██║██╔══██║██╔═══╝ ██║ ██║██║╚██╗██║██╔═██╗
// ██║ ██║██║ ██║╚██████╔╝██║ ╚═╝ ██║██║ ██║██║ ╚██████╔╝██║ ╚████║██║ ██╗
// ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚═╝ ╚═╝

(function() {
'use strict';
// Hier den WebSocket-Code einfügen

// WebSocket URL to connect to OBS WebSocket plugin
const OBS_WEBSOCKET_URL = "ws://localhost:4444"; // Default URL, change if necessary
const OBS_WEBSOCKET_PASSWORD = ""; // Add password if needed

// Create a WebSocket connection to OBS
const socket = new WebSocket(OBS_WEBSOCKET_URL);

// Function to authenticate to OBS WebSocket if a password is required
socket.onopen = function () {
console.log("Connected to OBS WebSocket");

// If OBS WebSocket has a password, you need to authenticate
if (OBS_WEBSOCKET_PASSWORD) {
const authMessage = {
"op": 1,
"d": {
"rpcVersion": 1,
"authentication": OBS_WEBSOCKET_PASSWORD
}
};
socket.send(JSON.stringify(authMessage));
}
};

// Event listener for messages from OBS WebSocket
socket.onmessage = function (event) {
const message = JSON.parse(event.data);

// Check for the event type
if (message.op === 0 && message.d.eventType === "StreamStateChanged") {
const streamState = message.d.eventData.outputState;

if (streamState === "OBS_WEBSOCKET_OUTPUT_PAUSED") {
console.log("OBS recording paused, stopping browser stream...");
stopBrowserStream();
}

if (streamState === "OBS_WEBSOCKET_OUTPUT_RESUMED") {
console.log("OBS recording resumed, starting browser stream...");
startBrowserStream();
}
}
};

// Event handler for WebSocket errors
socket.onerror = function (error) {
console.error("WebSocket error:", error);
};

// Close the WebSocket connection cleanly
socket.onclose = function () {
console.log("WebSocket connection closed.");
};

// Function to stop the stream or perform an action in the browser
function stopBrowserStream() {
// Implement logic to stop your stream here
console.log("Stopping the stream...");
// Example: pause a video element
const video = document.querySelector("video");
if (video) {
video.pause();
}
}

// Function to start the stream or perform an action in the browser
function startBrowserStream() {
// Implement logic to start your stream here
console.log("Starting the stream...");
// Example: play a video element
const video = document.querySelector("video");
if (video) {
video.play();
}
}
})();