├── CNAME
├── transferSettings.bat
├── .gitignore
├── LICENSE.md
├── transferSettings.ps1
├── scanconnect.html
├── README.md
└── OBSliveTally.html


/CNAME:
--------------------------------------------------------------------------------
1 | obstally.lebaston100.de


--------------------------------------------------------------------------------
/transferSettings.bat:
--------------------------------------------------------------------------------
1 | powershell.exe -ExecutionPolicy Bypass -NoProfile -noLogo -file "transferSettings.ps1"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.7z
 2 | *.zip
 3 | *.log
 4 | .DS_Store
 5 | .DS_Store?
 6 | ._*
 7 | .Spotlight-V100
 8 | .Trashes
 9 | *.code-workspace
10 | ehthumbs.db
11 | Thumbs.db


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018-2024 lebaston100
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/transferSettings.ps1:
--------------------------------------------------------------------------------
 1 | # Path to the old ini config
 2 | $iniFilePath = "$env:appdata\obs-studio\global.ini"
 3 | 
 4 | try {
 5 |     # try to get variables from obs global.ini file (old location)
 6 |     $server_password = (Select-String -Path $iniFilePath -List -Pattern "(?<=ServerPassword=)\S+").Matches[0].Value
 7 |     $server_port = (Select-String -Path $iniFilePath -List -Pattern "(?<=ServerPort=)\S+").Matches[0].Value
 8 | } catch {
 9 |     Write-Output "No configuration data found at old location"
10 | }
11 | 
12 | # Path to the new JSON file location
13 | $jsonFilePath = "$env:appdata\obs-studio\plugin_config\obs-websocket\config.json"
14 | 
15 | # Check if the json file exists
16 | if (Test-Path -Path $jsonFilePath) {
17 |     try {
18 |         # Read the file
19 |         $jsonContent = Get-Content -Path $jsonFilePath -Raw | ConvertFrom-Json
20 |         $server_port = $jsonContent.server_port
21 |         $server_password = $jsonContent.server_password
22 |         Write-Output "Read data from new location"
23 |     } catch {
24 |         Write-Output "Error reading from new json file"
25 |     }
26 | }
27 | 
28 | # print out variables
29 | Write-Host $server_password
30 | Write-Host $server_port
31 | 
32 | $destinationFile = "OBSliveTally.html"
33 | 
34 | # replace text in html with new values
35 | $controller = Get-Content -Path $destinationFile
36 | $controller = $controller -creplace "YourPasswordHERE", $server_password
37 | $controller = $controller -creplace "4455", $server_port
38 | $controller | Set-Content -Path $destinationFile


--------------------------------------------------------------------------------
/scanconnect.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 | <title>QR-Code Connector</title>
  6 | <script>
  7 |     let stream = null;
  8 |     let detection = null;
  9 |     let player = null;
 10 |     let [host, password] = ["null", "null"];
 11 | 
 12 |     window.addEventListener("DOMContentLoaded", init);
 13 |     async function init() {
 14 |         player = document.getElementById("player");
 15 |         document.getElementById("bttConnect").addEventListener("click", connect);
 16 | 
 17 |         await getMedia();
 18 |     }
 19 | 
 20 |     const barcodeDetector = new BarcodeDetector({ formats: ["qr_code"] });
 21 |     async function runBarcodeDetection() {
 22 |             // Try to read barcode
 23 |             let result = await barcodeDetector.detect(player);
 24 |             // Keep scanning while no qrcode is found
 25 |             if (result.length == 0) return;
 26 | 
 27 |             // Get first obsws barcode we find
 28 |             let wscode = result.find(barcode => barcode.rawValue.startsWith("obsws://"))?.rawValue;
 29 |             if (!wscode) return;
 30 | 
 31 |             // Stop scanning on ok-read
 32 |             clearInterval(detection);
 33 |             // Handle further processing
 34 |             handleUrlScan(wscode);
 35 |     }
 36 | 
 37 |     async function handleUrlScan(url) {
 38 |         await closeCamera();
 39 |         // Show resultbox div
 40 |         document.getElementById("resultbox").style.display = "block";
 41 | 
 42 |         // Parse url
 43 |         [host, password] = url.replace("obsws://", "").split("/", 2);
 44 |         document.getElementById("infotext").innerHTML = `Host: ${host}<br>Password: ${password}`;     
 45 |     }
 46 | 
 47 |     function connect(event) {
 48 |         let urlparams = `?host=${encodeURIComponent(host)}&password=${password}`;
 49 |         console.log(urlparams);
 50 | 
 51 |         const cl = window.location;
 52 |         if (cl.protocol == "file:" || cl.protocol == "http:") {
 53 |             // for file or http url, we can just toss the parameter
 54 |             window.location.href = "OBSliveTally.html" + urlparams;
 55 |         } else if (cl.protocol == "https:") {
 56 |             // for https redirect to http page
 57 |             window.location.href = `http://${cl.host}/OBSliveTally.html${urlparams}`;
 58 |         }
 59 |     }
 60 | 
 61 |     async function closeCamera() {
 62 |         // Hide scanbox
 63 |         document.getElementById("scanbox").style.display = "none";
 64 |         // Stop media stream
 65 |         stream.getTracks().forEach(track => track.readyState == "live" && track.stop());
 66 |     }
 67 | 
 68 |     async function getMedia() {
 69 |         if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 70 |             console.log("getUserMedia Supported");
 71 |         } else {
 72 |             console.log("getUserMedia not Supported");
 73 |         }
 74 | 
 75 |         try {
 76 |             
 77 |             const constraints = {
 78 |                 video: {
 79 |                     width: 1920,
 80 |                     hight: 1080,
 81 |                     framerate: 15,
 82 |                     facingMode: "environment"
 83 |                 },
 84 |                 audio: false
 85 |             };
 86 | 
 87 |             stream = await navigator.mediaDevices.getUserMedia(constraints);
 88 |             player.srcObject = stream;
 89 |             console.log(stream);
 90 |             console.log(stream.getVideoTracks());
 91 |             detection = setInterval(runBarcodeDetection, 200);
 92 |         } catch (err) {
 93 |             console.error(err);
 94 |         }
 95 |     }
 96 | </script>
 97 | <style>
 98 | body {
 99 |     margin: 5px;
100 |     padding: 0;
101 | }
102 | button {
103 |     height: 8em;
104 |     width: 99%;
105 | }
106 | #scanbox {
107 |     width: 95%;
108 |     margin: auto;
109 | }
110 | #player {
111 |     max-width: 100%;
112 |     border: 2px solid;
113 | }
114 | #resultbox {
115 |     display: none;
116 | }
117 | #infotext {
118 |     margin-bottom: 10px;
119 | }
120 | </style>
121 | </head>
122 | <body>
123 | 	<div id="scanbox">
124 |         <div>Open Tools -> WebSocket Server Settings -> Show Connect Info and scan the QR Code to connect</div>
125 |         <video id="player" autoplay muted></video>
126 |     </div>
127 |     <div id="resultbox">
128 |         <div id="infotext"></div>
129 |         <button id="bttConnect">Connect</button>
130 |     </div>
131 | </body>
132 | 
133 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OBSliveTally
 2 | 
 3 | This html page connects to any OBS 30 (and later) instance on the local network and displays either the stream status (live/offline), recording status(idle/recording) or tally information(on air/in preview/neither) for a scene or input. It can also show a small image preview.
 4 | 
 5 | ## Usage example
 6 | 
 7 | ![Image](https://cdn.lebaston100.de/git/obslivetally/animation_small.gif)
 8 | 
 9 | ## Setup
10 | 
11 | - Start OBS, open the "Tools" menu and select "obs-websocket Settings"
12 | - Make sure that "Enable Websocket server" is checked
13 | - [Download this repository](https://github.com/lebaston100/OBSliveTally/archive/master.zip) and unpack or clone it
14 | 
15 | Simple setup on windows:
16 | - Launch the "transferSettings.bat". This will find the configuration values in your locally installed obs and put them into the right place for you. This can only be done once.
17 | 
18 | Simple setup on mobile devices:
19 | - Open "scanconnect.html" (for online hosted [here](https://lebaston100.github.io/OBSliveTally/scanconnect.html))
20 | - Allow camera access
21 | - Open the "Tools", select "obs-websocket Settings" and click on "Show Connect Info"
22 | - Scan the QR-Code with the phone camera
23 | - Click "Connect"
24 | - (Optional) Long press on a blank page segment to bring up the context menu and enable auto-reconnect
25 | 
26 | Setup otherwise:
27 | - In the "obs-websocket Settings" copy the websocket password (If "Enable Authentication" is enabled) for later by clicking on "Show Connect Info"-Button -> Next to the "Server Password" field -> "Copy"-Button
28 | - Make sure that "Server Port" is 4455
29 | - If a websocket passwort is set, paste it into line 12 of OBSliveTally.html
30 | 
31 | By default it is setup to connect to the IP of the machine you run it on(127.0.0.1). You can change that default start value by editing the IP address and/or the port in line 11 with a text editor.
32 | You can open the file directly with a webbrowser or use a simple webserver somewhere on the network to serv it to local clients.
33 | An internet connection is required for it to load. (See more info at the bottom)
34 | 
35 | The newest version is always [hosted here](http://lebaston100.github.io/OBSliveTally/OBSliveTally.html) thanks to github pages.
36 | 
37 | ## General Usage
38 | - Open the OBSliveTally.html in a web browser (On a pc, laptop, tablet, smartphone)
39 | - You can enter or change the ip to the address of your obs machine. If you edited it in the file as mentioned above it will show up here already filled in.
40 | - Click on the "Connect to OBS" button
41 | - If the connection to the obs machine was successful, a list of buttons will show up with all your inputs and sources from obs and two other buttons on top for "Stream Status" and "Recording Status"
42 | - As soon as you click the "Connect to OBS" button, the IP address entered will be saved on the device with the localStorage API if available. If you then reload the page on the device it will auto-fill the IP field with the saved value so you don't have to re-enter it every time.
43 | 
44 | ### Show Stream or Recording Status
45 | - Click the "Stream Status" or "Recording Status" button
46 | - That's it. It will show OFFLINE/IDLE and a white background if you're not streaming/recording and LIVE/REC with a red background when the stream is live/recording is active
47 | 
48 | ### Show Scene Tally
49 | - Click on the scene name you want that are listed under "Scenes"
50 | - It will show the name of the scene on top of the page.
51 | - If the scene is neither in preview or program, the background will be black
52 | - If the scene is in preview, the background will be green
53 | - If the scene is in program, the background will be red
54 | - If a transition (like a fade) is started where the destination scene is the scene you selected, then it will light up red
55 | - If studio mode is disabled there will be only a red and black display, no green and also no red state while a transition is active
56 | - If a scene is nested into another scene (1-level deep) then it will also show tally for the scenes including the selected scene
57 | 
58 | ### Show Input Tally
59 | You can also show the tally status for individual sources. Every scene that containes a SceneItem of that Input will be handled like described in Show Scene Tally above.
60 | 
61 | The tool will keep track of changes to the scenes/innputs like add, delete or renames and will automatically adjust.
62 | 
63 | ### Advanced options
64 | - If you want the page to be displayed in fullscreen then right-click the page and click "Toggle fullscreen". This can't be stored between reloads thanks to browser "security".
65 | - If you want to see a small image preview of the current program scene in the bottom left corner that updates every X seconds then then right-click the page and click "Enable PGM screenshot". This will be saved across reloads. To disable just open the context menu again and choose "Disable PGM screenshot". Size and interval can be adjusted in line 15/16. Showing transitions is not supported.
66 | - If you want the page to automatically connect to obs without making any default selection then right-click the page and click "Enable auto connect". This will be saved across reloads. To disable just open the context menu again and choose "Disable auto connect".
67 | - If you want to automatically restore what you last selected in terms of Stream/Rec Status / Scene / Input then right-click the page and click "Enable auto restore". This will be saved across reloads. To disable just open the context menu again and choose "Disable auto restore". You can combine this will auto connect for the full experience.
68 | - If you want to delete all of the locally stored data (obs connection settings, advanced options) then right-click the page and click "Clear all saved settings". This will clear the data and reload the page.
69 | - If you want to use the tool offline aka without an internet connection you need to download [this file](https://cdn.jsdelivr.net/npm/obs-websocket-js@5.0/dist/obs-ws.min.js) making sure not to rename it, place it in the same folder as the OBSliveTally.html, uncomment line 7 and comment out line 6(also in the OBSliveTally.html).
70 | - If you want to provide the obs host and password as URL parameters, you can do that. Just append ?host=yourhost&password=yourpassword to the url. Make sure to URL-encode it.
71 | 
72 | If you find any bugs, please report them as a Github Issue or join my [Discord Server](https://discord.gg/PCYQJwX)
73 | 
74 | ### Troubleshooting
75 | 
76 | - If the page does not connect to obs:
77 |     - Make sure you have a working internet connection or have prepared it for offline usage as listed in "Advanced options"
78 |     - Check if host, port and password are correct
79 |     - Check the connection is allowed in your firewall
80 |     - Make sure the page is run with either a file:// or http:// url. https:// will not work.
81 |     - Open web browser's dev tools and check console for any errors
82 |     - Enable debug logging in the websocket settings and check the obs log for any errors
83 | - If the scanner cann not access the camera
84 |     - Make sure the page is running in a "secure context" aka https:// or a file:// or http://localhost url
85 | 
86 | ## Tested on/with:
87 | - Win 11 23H2
88 | - OBS 31.0.0
89 | - Brave (with Brave Protection switched of)
90 | - Nothing Phone 2a
91 | 
92 | ## Thanks
93 | 
94 | Thanks to [alexdean](https://github.com/alexdean) for refactoring it at some point in 2020 and fixing a few state bug's that came up.


--------------------------------------------------------------------------------
/OBSliveTally.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 | <title>OBS Tally</title>
  6 | <script src="https://cdn.jsdelivr.net/npm/obs-websocket-js@5.0/dist/obs-ws.global.min.js"></script>
  7 | <!-- <script src="obs-ws.min.js"></script> -->
  8 | 
  9 | <script>
 10 | 	var obsSettings = {
 11 | 		host: "127.0.0.1:4455",      // set obs ip/port here
 12 | 		password: "YourPasswordHERE"  // set obs password here
 13 | 	}
 14 | 
 15 | 	const screenShotInterval = 4000;
 16 | 	const screenShotSize = 300;
 17 | 
 18 | //------------------------------------------------------------------------------------------------------------------------
 19 | 	// Internal variables, do not change anything here unless you know what you are doing
 20 | 	// OBS related
 21 | 	const obs = new OBSWebSocket();
 22 | 	const urlParams = new URLSearchParams(window.location.search);
 23 | 	var reconnectInt = null;
 24 | 	var connectionIsOpen = false;
 25 | 	var iCanHazLocalStorage = typeof(localStorage)  == "undefined" ? false : true;
 26 | 	var obsDefaultSettings = structuredClone(obsSettings);
 27 | 
 28 | 	// DOm objects
 29 | 	var DOobsHost = null;
 30 | 	var DOobsPw = null;
 31 | 	var DOsettingsBox = null;
 32 | 	var DOselectionBox = null;
 33 | 	var DOselectedTitleBox = null;
 34 | 	var DOselectedTitleText = null;
 35 | 	var DOsrStatusBox = null;
 36 | 	var DOsrStatusText = null;
 37 | 	var DOcMenableAutoConnect = null;
 38 | 	var DOcMenableAutoRestore = null;
 39 | 	var DOcMenableScreenshot = null;
 40 | 	var DOscreenshotBox = null;
 41 | 	var DOscreenshotImg = null;
 42 | 
 43 | 	// Screenshot stuff
 44 | 	var screenShotIntervalId = null;
 45 | 
 46 | 	// State stuff
 47 | 	let currentState = new Proxy({
 48 | 		"watching": null,          // Can be null=none, "StreamState", "RecordingState", "Scene", "Input"
 49 | 		"studioModeEnabled": null, // If studio mode in obs is enabled
 50 | 		"RecActive": false,        // Recording Status
 51 | 		"StreamActive": false,     // Streaming Status
 52 | 		"prvScn": "",              // Current preview scene
 53 | 		"pgmScns": [],             // Current program Scene (can be 2 while transitioning)
 54 | 		"wtchInput": "",           // Name of Input if we watching one
 55 | 		"wtchScenes": []           // Names of the Scenes we are watching (1= for Scene, >=1 for Input but generated by us)
 56 | 	}, {
 57 | 		set(obj, prop, newval) {
 58 | 			// Override set handler to get change events
 59 | 			// Only update if value is different (we'll see if it works like that)
 60 | 			if (obj[prop] !== newval) {
 61 | 				//console.log(`Changed currentState.${prop} to ${newval}`);
 62 | 				obj[prop] = newval;
 63 | 
 64 | 				if (prop == "StreamActive") {
 65 | 					onStreamStatusChanged(newval);
 66 | 				} else if (prop == "RecActive") {
 67 | 					onRecordingStatusChanged(newval);
 68 | 				} else if ((prop == "prvScn" || prop == "pgmScns") && (obj.watching == "Scene" || obj.watching == "Input")) {
 69 | 					updateSceneOrInputFrontend();
 70 | 				} else if (prop == "watching" && newval && !screenShotIntervalId) {
 71 | 					// If screenshot is enabled, start it
 72 | 					if (localStorage.getItem("screenshot.enable") == "Yes") startScreenshots();
 73 | 				}
 74 | 				return true;
 75 | 			}
 76 | 			return false;
 77 | 		}
 78 | 	});
 79 | 
 80 | 	window.addEventListener("DOMContentLoaded", init);
 81 | 	async function init() {
 82 | 		// Gather DOM elements
 83 | 		DOobsHost = document.getElementById("obsHost");
 84 | 		DOobsPw = document.getElementById("obsPw");
 85 | 		DOsettingsBox = document.getElementById("settingsBox");
 86 | 		DOselectionBox = document.getElementById("selectionBox");
 87 | 		DOselectedTitleBox = document.getElementById("selectedTitleBox");
 88 | 		DOselectedTitleText = document.getElementById("selectedTitleText");
 89 | 		DOsrStatusBox = document.getElementById("srStatusBox");
 90 | 		DOsrStatusText = document.getElementById("srStatusText");
 91 | 		DOcMenableAutoConnect = document.getElementById("cMenableAutoConnect");
 92 | 		DOcMenableAutoRestore = document.getElementById("cMenableAutoRestore");
 93 | 		DOcMenableScreenshot = document.getElementById("cMenableScreenshot");
 94 | 		DOscreenshotBox = document.getElementById("screenshotBox");
 95 | 		DOscreenshotImg = document.getElementById("screenshotImg");
 96 | 		
 97 | 		// Show https warning if page was loaded over https
 98 | 		if (window.location.protocol == "https:") {
 99 | 			document.getElementById("httpswarning").style.display = "block";
100 | 		}
101 | 
102 | 		// Update obs connection settings from localstorage if available and no url param is defined
103 | 		if (!urlParams.has("host") && iCanHazLocalStorage) await readLocalStorageConnectionSettings();
104 | 
105 | 		// If url params are defined overwrite settings
106 | 		if (urlParams.has("host")) {
107 | 			obsSettings.host = urlParams.get("host");
108 | 			obsSettings.password = urlParams.get("password") ?? "";
109 | 		}
110 | 
111 | 		// Update frontend fields with values
112 | 		setValue(DOobsHost, obsSettings.host);
113 | 		setValue(DOobsPw, obsSettings.password);
114 | 
115 | 		// Initialize custom context menu
116 | 		await prepareContextMenu();
117 | 
118 | 		// If url params are defined or the user whished to, automatically try to connect
119 | 		if (urlParams.has("host") || (iCanHazLocalStorage && localStorage.getItem("connect.auto") == "Yes" && (DOcMenableAutoConnect.innerText = "Disable auto connect")))  {
120 | 			await attemptObsConnection();
121 | 		}
122 | 
123 | 		// Update auto restore text
124 | 		if (iCanHazLocalStorage && localStorage.getItem("connect.restore") == "Yes") DOcMenableAutoRestore.innerText = "Disable auto restore";
125 | 
126 | 		// Update screenshot text
127 | 		if (iCanHazLocalStorage && localStorage.getItem("screenshot.enable") == "Yes") DOcMenableScreenshot.innerText = "Disable PGM screenshot";
128 | 	}
129 | 
130 | 	async function connectWithQr() {
131 | 		await contextMenuButtonClickHandlers['connectWithScan'](null);
132 | 	}
133 | 
134 | 	// Try to connect to obs
135 | 	async function attemptObsConnection() {
136 | 		// Make sure to cancel any reconnect timer
137 | 		if (reconnectInt) clearInterval(reconnectInt);
138 | 		reconnectInt = null;
139 | 
140 | 		// Get host and pw from input fields
141 | 		obsSettings.host = DOobsHost.value;
142 | 		obsSettings.password = decodeURIComponent(DOobsPw.value);
143 | 
144 | 		// The connect
145 | 		try {
146 | 			const {
147 | 				obsWebSocketVersion,
148 | 				negotiatedRpcVersion
149 | 			} = await obs.connect(`ws://${obsSettings.host}`, obsSettings.password, {rpcVersion: 1});
150 | 			console.log(`Connected to obs-websocket ${obsWebSocketVersion} (using RPC ${negotiatedRpcVersion})`);
151 | 		} catch (error) {
152 | 			console.error("Failed to connect", error.code, error.message);
153 | 			document.getElementById("errorlog").innerHTML = `Failed to connect: ${error.code} ${error.message}`;
154 | 		}
155 | 	}
156 | 
157 | 	// obs-websocket connection was closed for whatever reason
158 | 	obs.on("ConnectionClosed", () => {
159 | 		console.log("Connection to obs-websocket was closed");
160 | 		connectionIsOpen = false;
161 | 		if (!reconnectInt) reconnectInt = setInterval(attemptObsConnection, 2000);
162 | 		// Maybe show somewhere that the connection was disconnected and status might not beaccurate
163 | 	});
164 | 
165 | 	// Identified is the new open
166 | 	obs.on("Identified", async () => {
167 | 			clearInterval(reconnectInt);
168 | 			connectionIsOpen = true;
169 | 			reconnectInt = null;
170 | 
171 | 			// Save the current obs connection settings to localStorage
172 | 			if (iCanHazLocalStorage) await saveLocalStorageConnectionSettings();
173 | 
174 | 			// If not already done generate selection boxes
175 | 			if (!currentState.watching) await getWatchSelectionItems();
176 | 
177 | 			// Hide connection settings box
178 | 			DOsettingsBox.style.display = "none";
179 | 
180 | 			// Get initial states
181 | 			await getInitialObsStates();
182 | 
183 | 			// If session restore is enabled, try it
184 | 			if (localStorage.getItem("connect.restore") == "Yes") restoreWatchStatus();
185 | 	});
186 | 
187 | 	// obs event StreamStateChanged
188 | 	obs.on("StreamStateChanged", async (event) => {
189 | 		let { outputState } = event;
190 | 		if (outputState == "OBS_WEBSOCKET_OUTPUT_STOPPED") {
191 | 			currentState.StreamActive = false;
192 | 		} else {
193 | 			currentState.StreamActive = true;
194 | 		}
195 | 	});
196 | 
197 | 	// obs event RecordStateChanged
198 | 	obs.on("RecordStateChanged", async (event) => {
199 | 		let { outputState } = event;
200 | 		if (outputState == "OBS_WEBSOCKET_OUTPUT_STOPPED") {
201 | 			currentState.RecActive = false;
202 | 		} else {
203 | 			currentState.RecActive = true;
204 | 		}
205 | 	});
206 | 
207 | 	// obs event StreamStateChanged
208 | 	obs.on("CurrentProgramSceneChanged", async (event) => {
209 | 		currentState.pgmScns = [event.sceneName];
210 | 	});
211 | 
212 | 	// obs event CurrentPreviewSceneChanged
213 | 	obs.on("CurrentPreviewSceneChanged", async (event) => {
214 | 		currentState.prvScn = event.sceneName
215 | 	});
216 | 
217 | 	// obs event SceneTransitionStarted
218 | 	obs.on("SceneTransitionStarted", async (event) => {
219 | 		currentState.pgmScns.push(currentState.prvScn);
220 | 		updateSceneOrInputFrontend();
221 | 	});
222 | 
223 | 	// obs event StudioModeStateChanged
224 | 		obs.on("StudioModeStateChanged", async (event) => {
225 | 		currentState.studioModeEnabled = event.studioModeEnabled;
226 | 		updateSceneOrInputFrontend();
227 | 	});
228 | 
229 | 
230 | 	// obs event SceneRemoved
231 | 	obs.on("SceneRemoved", async (event) => {
232 | 		const { sceneName } = event;
233 | 		// if we are watching that scene for any reason
234 | 		if (currentState.wtchScenes.includes(sceneName)) {
235 | 			let posInList = currentState.wtchScenes.indexOf(sceneName);
236 | 			currentState.wtchScenes.splice(posInList, 1); // remove from watchlist
237 | 			updateSceneOrInputFrontend();
238 | 			if (currentState.watching == "Scene" && posInList == 0) await getWatchSelectionItems();
239 | 		}
240 | 	});
241 | 
242 | 	// obs event SceneNameChanged
243 | 	obs.on("SceneNameChanged", async (event) => {
244 | 		const { oldSceneName, sceneName } = event;
245 | 		// If we are watching that scene, remove the old name, add the new name
246 | 		if (currentState.wtchScenes.includes(oldSceneName)) {
247 | 			currentState.wtchScenes.splice(currentState.wtchScenes.indexOf(oldSceneName), 1); // remove old name entry
248 | 			currentState.wtchScenes.unshift(sceneName); // add new one
249 | 			// Update name in pgmScns array
250 | 			if (currentState.pgmScns.includes(oldSceneName)) currentState.pgmScns[currentState.pgmScns.indexOf(oldSceneName)] = sceneName;
251 | 			// Update prvScn variable
252 | 			if (currentState.prvScn == oldSceneName) currentState.prvScn = sceneName;
253 | 			updateSceneOrInputFrontend();
254 | 			DOselectedTitleText.textContent = sceneName; // Update title text
255 | 			saveWatchParameters();
256 | 		}
257 | 	});
258 | 
259 | 	// obs event InputRemoved
260 | 	obs.on("InputRemoved", async (event) => {
261 | 		const { inputName } = event;
262 | 		if (currentState.wtchInput == inputName) await getWatchSelectionItems();
263 | 	});
264 | 
265 | 	// obs event InputNameChanged
266 | 	obs.on("InputNameChanged", async (event) => {
267 | 		const { oldInputName, inputName } = event;
268 | 		// If it's the input name we were watching
269 | 		if (currentState.wtchInput == oldInputName) {
270 | 			currentState.wtchInput = inputName;
271 | 			DOselectedTitleText.textContent = inputName; // Update title text
272 | 		}
273 | 	});
274 | 
275 | 	// obs event SceneItemCreated
276 | 	obs.on("SceneItemCreated", async (event) => {
277 | 		const { sourceName, sceneName } = event;
278 | 		// If this scene item is of the input we are watching right now
279 | 		// .. and scene is not yet known to us
280 | 		// OR if we are watching a scene and the newly created scene item is the scene we're watching
281 | 		// ... add it to the current list of watched scenes
282 | 		if ((currentState.wtchInput == sourceName && !currentState.wtchScenes.includes(sceneName)) ||
283 | 		(currentState.watching == "Scene" && sourceName == currentState.wtchScenes[0] && !currentState.wtchScenes.includes(sceneName))) {
284 | 			currentState.wtchScenes.push(sceneName); // Add to watchlist
285 | 			updateSceneOrInputFrontend();
286 | 		}
287 | 	});
288 | 
289 | 	// obs event SceneItemRemoved
290 | 	obs.on("SceneItemRemoved", async (event) => {
291 | 		const { sceneName, sourceName } = event;
292 | 		const { sceneItems } = await obs.call("GetSceneItemList", {sceneName: sceneName});
293 | 		if ((currentState.wtchInput == sourceName && !sceneItems.some(el => el.sourceName == sourceName)) ||
294 | 		((currentState.watching == "Scene" && currentState.wtchScenes[0] == sourceName && !sceneItems.some(el => el.sourceName == sourceName)))) {
295 | 			currentState.wtchScenes.splice(currentState.wtchScenes.indexOf(sceneName), 1);
296 | 			updateSceneOrInputFrontend();
297 | 			// Check if there are any scenes leftover
298 | 			if (currentState.wtchScenes.length == 0)  await getWatchSelectionItems();
299 | 		}
300 | 	});
301 | 
302 | 	// Get initial status values from obs
303 | 	async function getInitialObsStates() {
304 | 		// Studio mode status
305 | 		const { studioModeEnabled } = await obs.call("GetStudioModeEnabled");
306 | 		currentState.studioModeEnabled = studioModeEnabled;
307 | 
308 | 		if (currentState.studioModeEnabled) {
309 | 			// Current preview scene
310 | 			const { currentPreviewSceneName } = await obs.call("GetCurrentPreviewScene");
311 | 			currentState.prvScn = currentPreviewSceneName;
312 | 		}
313 | 
314 | 		// Current program scene
315 | 		const { currentProgramSceneName } = await obs.call("GetCurrentProgramScene");
316 | 		currentState.pgmScns = [currentProgramSceneName];
317 | 
318 | 		// Current streaming status
319 | 		const { outputActive: streamActive } = await obs.call("GetStreamStatus");
320 | 		currentState.StreamActive = streamActive;
321 | 
322 | 		// Current recording status
323 | 		const { outputActive: recActive } = await obs.call("GetRecordStatus");
324 | 		currentState.RecActive = recActive;
325 | 	}
326 | 
327 | 	function startScreenshots() {
328 | 		DOscreenshotBox.style.display = "block";
329 | 		if (!screenShotIntervalId) screenShotIntervalId = setInterval(takeObsScreenshot, screenShotInterval);
330 | 	}
331 | 
332 | 	async function takeObsScreenshot() {
333 | 		if (!currentState.pgmScns[0]) return;
334 | 		const { imageData } = await obs.call("GetSourceScreenshot", {
335 | 			"sourceName": currentState.pgmScns[0],
336 | 			"imageFormat": "jpg",
337 | 			"imageWidth": screenShotSize,
338 | 			"imageCompressionQuality": 30
339 | 		});
340 | 		DOscreenshotImg.src = imageData;
341 | 	}
342 | 
343 | 	function onStreamStatusChanged(status) {
344 | 		if (currentState.watching == "StreamState") {
345 | 			DOsrStatusText.textContent = status ? "LIVE" : "OFFLINE";
346 | 			document.body.style.backgroundColor = status ? "red" : "white";
347 | 		}
348 | 	} 
349 | 
350 | 	function onRecordingStatusChanged(status) {
351 | 		if (currentState.watching == "RecordingState") {
352 | 			DOsrStatusText.textContent = status ? "REC" : "IDLE";
353 | 			document.body.style.backgroundColor = status ? "red" : "white";
354 | 		}
355 | 	}
356 | 
357 | 	function updateSceneOrInputFrontend() {
358 | 		// Check if we care
359 | 		if (!(currentState.watching == "Scene" || currentState.watching == "Input")) return;
360 | 
361 | 		// Set color depending on state
362 | 		// 2nd will overwrite first in case pgm scene was put in prv
363 | 		bgColor = "black";
364 | 		if (currentState.studioModeEnabled && currentState.wtchScenes.includes(currentState.prvScn)) {
365 | 			bgColor = "green";
366 | 		}
367 | 		if (currentState.pgmScns.some(e => currentState.wtchScenes.includes(e))) {
368 | 			bgColor = "red";
369 | 		}
370 | 
371 | 		// Update page background color
372 | 		document.body.style.backgroundColor = bgColor;
373 | 
374 | 		// Set text background to white in case the site background is black
375 | 		DOselectedTitleText.style.backgroundColor = (bgColor == "black") ? "white" : "transparent";
376 | 	}
377 | 
378 | 	// Request data from obs and hand over to frontend creation function
379 | 	async function getWatchSelectionItems() {
380 | 		const { scenes } = await obs.call("GetSceneList");
381 | 		const { inputs } = await obs.call("GetInputList");
382 | 		const specialInputs = await obs.call("GetSpecialInputs");
383 | 		drawSelectionBoxes(scenes, inputs, specialInputs);
384 | 	}
385 | 
386 | 	async function setWatchStreamStatus(event=null) {
387 | 		currentState.watching = "StreamState";
388 | 		DOselectionBox.style.display = "none";  // Hide selection div
389 | 		DOsrStatusBox.style.display = "block";  // Show status box
390 | 		DOsrStatusText.textContent = "OFFLINE";
391 | 		onStreamStatusChanged(currentState.StreamActive); // Draw initial frontend state
392 | 		saveWatchParameters(); // Save watch status to localstorage
393 | 	}
394 | 
395 | 	async function setWatchRecordingStatus(event=null) {
396 | 		currentState.watching = "RecordingState";
397 | 		DOselectionBox.style.display = "none";  // Hide selection div
398 | 		DOsrStatusBox.style.display = "block";  // Show status box
399 | 		DOsrStatusText.textContent = "IDLE";
400 | 		onRecordingStatusChanged(currentState.RecActive); // Draw initial frontend state
401 | 		saveWatchParameters(); // Save watch status to localstorage
402 | 	}
403 | 
404 | 	async function setWatchScene(event=null, name=null) {
405 | 		if (event) {
406 | 			var watchedScene = event.target.getAttribute("data-watchname");
407 | 		}
408 | 		if (name) {
409 | 			var watchedScene = name;
410 | 		}
411 | 		currentState.watching = "Scene";
412 | 		let watch = [watchedScene];
413 | 		// Add scenes which include the requested Scene as a source (1-level depth)
414 | 		watch = watch.concat(await getScenesFeaturingInput(watchedScene));
415 | 		currentState.wtchScenes = watch;
416 | 
417 | 		// Frontend stuff
418 | 		DOselectionBox.style.display = "none"; // Hide selection div
419 | 		DOselectedTitleBox.style.display = "block"; // Show title text
420 | 		DOselectedTitleText.textContent = watchedScene; // Set title text to selected scene
421 | 
422 | 		// Draw initial frontend state
423 | 		updateSceneOrInputFrontend();
424 | 
425 | 		saveWatchParameters(); // Save watch status to localstorage
426 | 	}
427 | 
428 | 	async function setWatchInput(event=null, name=null) {
429 | 		currentState.watching = "Input";
430 | 
431 | 		if (event) currentState.wtchInput = event.target.getAttribute("data-watchname");
432 | 		if (name) currentState.wtchInput = name;
433 | 
434 | 		// Frontend stuff
435 | 		DOselectionBox.style.display = "none"; // Hide selection div
436 | 		DOselectedTitleBox.style.display = "block"; // Show title text
437 | 		DOselectedTitleText.textContent = currentState.wtchInput; // Set title text to selected input
438 | 
439 | 		currentState.wtchScenes = await getScenesFeaturingInput(currentState.wtchInput);
440 | 
441 | 		updateSceneOrInputFrontend(); // Draw initial frontend state
442 | 
443 | 		saveWatchParameters(); // Save watch status to localstorage
444 | 	}
445 | 
446 | 	// Return an array of all sources that feature a specific Input
447 | 	async function getScenesFeaturingInput(Input) {
448 | 		let ftScenes = [];
449 | 		const { scenes } = await obs.call("GetSceneList");
450 | 		for (const scene in scenes) {
451 | 			let { sceneItems } = await obs.call("GetSceneItemList", {sceneName: scenes[scene].sceneName});
452 | 			if (sceneItems.some(el => el.sourceName == Input)) ftScenes.push(scenes[scene].sceneName);
453 | 		}
454 | 		return ftScenes;
455 | 	}
456 | 
457 | 	async function restoreWatchStatus() {
458 | 		if (!iCanHazLocalStorage) return;
459 | 		let type = localStorage.getItem("watchSettings.type")||null;
460 | 		let name = localStorage.getItem("watchSettings.name")||null;
461 | 		switch(type) {
462 | 			case "StreamState":
463 | 				await setWatchStreamStatus();
464 | 				break;
465 | 			case "RecordingState":
466 | 				await setWatchRecordingStatus();
467 | 				break;
468 | 			case "Scene":
469 | 				await setWatchScene(null, name);
470 | 				break;
471 | 			case "Input":
472 | 				await setWatchInput(null, name);
473 | 				break;
474 | 			default:
475 | 				return;
476 | 		}
477 | 	}
478 | 
479 | 	async function readLocalStorageConnectionSettings() {
480 | 		obsSettings.host = localStorage.getItem("obsSettings.host")||obsDefaultSettings.host;
481 | 		obsSettings.password = localStorage.getItem("obsSettings.password")||obsDefaultSettings.password;
482 | 	}
483 | 
484 | 	async function saveLocalStorageConnectionSettings() {
485 | 		localStorage.setItem("obsSettings.host", obsSettings.host);
486 | 		localStorage.setItem("obsSettings.password", obsSettings.password);
487 | 	}
488 | 
489 | 	// Save the watch parameters to localStorage
490 | 	async function saveWatchParameters() {
491 | 		if (iCanHazLocalStorage) {
492 | 			localStorage.setItem("watchSettings.type", currentState.watching);
493 | 			let name = (currentState.watching == "Input") ? currentState.wtchInput : (currentState.watching == "Scene") ? currentState.wtchScenes[0] : ""; 
494 | 			localStorage.setItem("watchSettings.name", name);
495 | 		}
496 | 	}
497 | 
498 | 	// build buttons which allow user to select which scene to watch
499 | 	function drawSelectionBoxes(scenes, inputs, specialInputs) {
500 | 		// First let's clean up the frontend state
501 | 		DOselectedTitleBox.style.display = "none"; // Hide title text
502 | 		document.body.style.backgroundColor = "white"; // Cleanup background color
503 | 
504 | 		// Make sure to clean all current watching state
505 | 		currentState.watching = null;
506 | 
507 | 		let div = document.getElementById("selectionBox"); // Get our button holder div
508 | 		div.replaceChildren(); // Make sure the div is clean
509 | 
510 | 		let headerText = document.createElement("div");
511 | 		headerText.appendChild(document.createTextNode("Select what you want to watch:"));
512 | 		div.appendChild(headerText);
513 | 
514 | 		let scenesText = document.createElement("div");
515 | 		scenesText.appendChild(document.createTextNode("Scenes:"));
516 | 		let inputsText = document.createElement("div");
517 | 		inputsText.appendChild(document.createTextNode("Inputs:"));
518 | 
519 | 		let ssb = document.createElement("button");
520 | 		ssb.appendChild(document.createTextNode("Stream Status"));
521 | 		ssb.addEventListener("click", setWatchStreamStatus);
522 | 		div.appendChild(ssb);
523 | 
524 | 		let rsb = document.createElement("button");
525 | 		rsb.appendChild(document.createTextNode("Recording Status"));
526 | 		rsb.addEventListener("click", setWatchRecordingStatus);
527 | 		div.appendChild(rsb);
528 | 
529 | 		// Selection boxes for scenes
530 | 		div.appendChild(scenesText);
531 | 		scenes.reverse().forEach(scene => {
532 | 			b = document.createElement("button");
533 | 			b.appendChild(document.createTextNode(scene.sceneName));
534 | 			b.setAttribute("data-watchName", scene.sceneName);
535 | 			b.addEventListener("click", setWatchScene);
536 | 			div.appendChild(b);
537 | 		});
538 | 
539 | 		// Selection boxes for inputs
540 | 		div.appendChild(inputsText);
541 | 		specialInputs = Object.values(specialInputs);
542 | 		inputs = inputs.filter(input => !specialInputs.includes(input.inputName)); // Remove specialInputs because we can't really watch them
543 | 		inputs.forEach(input => {
544 | 			b = document.createElement("button");
545 | 			b.appendChild(document.createTextNode(input.inputName));
546 | 			b.setAttribute("data-watchName", input.inputName);
547 | 			b.addEventListener("click", setWatchInput);
548 | 			div.appendChild(b);
549 | 		});
550 | 		// Show selection div
551 | 		DOselectionBox.style.display = "block";
552 | 	}
553 | 
554 | 	// Context menu handlers
555 | 	var contextMenuButtonClickHandlers = {
556 | 		"fullscreen": toggleFullscreen,
557 | 		"toggleScreenshot": async function(event) {
558 | 			if (iCanHazLocalStorage) {
559 | 				let auto = localStorage.getItem("screenshot.enable")||"No";
560 | 				if (auto == "No") {
561 | 					localStorage.setItem("screenshot.enable", "Yes");
562 | 					DOcMenableScreenshot.innerText = "Disable PGM screenshot";
563 | 					startScreenshots();
564 | 				} else {
565 | 					clearInterval(screenShotIntervalId);
566 | 					screenShotIntervalId = null;
567 | 					localStorage.setItem("screenshot.enable", "No");
568 | 					DOcMenableScreenshot.innerText = "Enable PGM screenshot";
569 | 					DOscreenshotBox.style.display = "none";
570 | 				}
571 | 			}
572 | 		},
573 | 		"toggleAutoConnect": async function(event) {
574 | 			if (iCanHazLocalStorage) {
575 | 				let auto = localStorage.getItem("connect.auto")||"No";
576 | 				if (auto == "No") {
577 | 					localStorage.setItem("connect.auto", "Yes");
578 | 					DOcMenableAutoConnect.innerText = "Disable auto connect";
579 | 				} else {
580 | 					localStorage.setItem("connect.auto", "No");
581 | 					DOcMenableAutoConnect.innerText = "Enable auto connect";
582 | 				}
583 | 			} else {
584 | 				alert("localStorage support not detected, auto connect will not work");
585 | 			}
586 | 		},
587 | 		"toggleAutoRestore": async function(event) {
588 | 			if (iCanHazLocalStorage) {
589 | 				let auto = localStorage.getItem("connect.restore")||"No";
590 | 				if (auto == "No") {
591 | 					localStorage.setItem("connect.restore", "Yes");
592 | 					DOcMenableAutoRestore.innerText = "Disable auto restore";
593 | 				} else {
594 | 					localStorage.setItem("connect.restore", "No");
595 | 					DOcMenableAutoRestore.innerText = "Enable auto restore";
596 | 				}
597 | 			} else {
598 | 				alert("localStorage support not detected, auto connect will not work");
599 | 			}
600 | 		},
601 | 		"reload": async function(event) {
602 | 			location.reload();
603 | 		},
604 | 		"clrSavedData": async function(event) {
605 | 			await clearLocalStorage();
606 | 			// Remove any url params since they count as saved parameters
607 | 			window.history.pushState({}, "", window.location.href.replace(window.location.search, ""));
608 | 			location.reload();
609 | 		},
610 | 		"connectWithScan": async function(event) {
611 | 			// if it's http and not localhost, redirect to http version
612 | 			if (window.location.protocol == "http:" && !window.location.hostname.includes("localhost")) {
613 | 				window.location.href = `https://${window.location.host}/scanconnect.html`;
614 | 			} else {
615 | 				window.location.href = "scanconnect.html";
616 | 			}
617 | 		}
618 | 	}
619 | 
620 | 	// Context menu stuff
621 | 	async function prepareContextMenu() {
622 | 		// Get the context menu div
623 | 		const contextMenu = document.getElementById("contextMenu");
624 | 
625 | 		// Handle right clicks
626 | 		window.addEventListener("contextmenu", handleRightClick);
627 | 		async function handleRightClick(event) {
628 | 			event.preventDefault(); // Block default right click menu
629 | 			contextMenu.style.top = `${event.y}px`;
630 | 			contextMenu.style.left = `${event.x}px`;
631 | 			contextMenu.classList.add("visible");
632 | 		}
633 | 
634 | 		// Handle close-(left)-clicks
635 | 		window.addEventListener("click", handleCloseClick);
636 | 		async function handleCloseClick(event) {
637 | 			if (contextMenu.classList.contains("visible")) contextMenu.classList.remove("visible");
638 | 		}
639 | 
640 | 		// Handle button clicks
641 | 		contextMenu.addEventListener("click", handleMenuClick);
642 | 		async function handleMenuClick(event) {
643 | 			handler = event.target.getAttribute("data-handler");
644 | 			if (handler) contextMenuButtonClickHandlers[handler](event);
645 | 		}
646 | 	}
647 | 
648 | 	// Check if fullscreen is active, if not activate, deactivate
649 | 	async function toggleFullscreen() {
650 | 		if (!document.fullscreen) {
651 | 			await document.documentElement.requestFullscreen();
652 | 		} else {
653 | 			await document.exitFullscreen();
654 | 		}
655 | 	}
656 | 
657 | 	async function clearLocalStorage() {
658 | 		localStorage.removeItem("obsSettings.host");
659 | 		localStorage.removeItem("obsSettings.password");
660 | 		localStorage.removeItem("watchSettings.type");
661 | 		localStorage.removeItem("watchSettings.name");
662 | 		localStorage.removeItem("connect.auto");
663 | 		localStorage.removeItem("connect.restore");
664 | 		localStorage.removeItem("screenshot.enable");
665 | 	}
666 | 
667 | 	function setValue(element, value) {
668 | 		element.value = value;
669 | 	}
670 | </script>
671 | <style>
672 | html {
673 | 	height: 100%;
674 | 	width: 100%;
675 | }
676 | 
677 | body {
678 | 	height: 100%;
679 | 	width: 100%;
680 | 	overflow: hidden;
681 | 	font-family: monospace;
682 | }
683 | 
684 | #selectionBox {
685 | 	height: 98%;
686 | 	width: auto;
687 | 	overflow-y: scroll;
688 | 	overflow-x: auto;
689 | 	padding-left: 15px;
690 | 	font-size: 1.5em;
691 | 	display: none;
692 | }
693 | 
694 | #selectionBox button {
695 | 	font-size: 1em;
696 | }
697 | 
698 | #settingsBox {
699 | 	margin: 20px;
700 | }
701 | 
702 | #selectedTitleBox {
703 | 	display: none;
704 | 	text-align: center;
705 | }
706 | 
707 | #selectedTitleText {
708 | 	font-weight: bold;
709 | 	font-size: 3em;
710 | }
711 | 
712 | button {
713 | 	margin: 8px;
714 | 	font-size: 1.5em;
715 | 	display: block;
716 | }
717 | 
718 | input {
719 | 	margin: 8px;
720 | 	font-size: 1.5em;
721 | }
722 | 
723 | #srStatusBox {
724 | 	display: none;
725 | 	text-align: center;
726 | }
727 | 
728 | #srStatusText {
729 | 	font-weight: bold;
730 | 	font-size: 24vw;
731 | }
732 | 
733 | #screenshotBox {
734 | 	z-index: 100;
735 | 	display: none;
736 | 	position: fixed;
737 |     bottom: 5%;
738 | }
739 | 
740 | #screenshotImg {
741 | 	padding: auto;
742 | 	border: 5px solid black;
743 | }
744 | 
745 | #contextMenu {
746 | 	position: fixed;
747 | 	z-index: 1000;
748 | 	width: auto;
749 | 	background: #1b1a1a;
750 | 	border-radius: 5px;
751 | 	display: none;
752 | }
753 | 
754 | #contextMenu.visible {
755 | 	display: block;
756 | }
757 | 
758 | #contextMenu .item {
759 | 	padding: 8px 10px;
760 | 	font-size: 20px;
761 | 	color: #eee;
762 | 	cursor: pointer;
763 | }
764 | 
765 | #contextMenu .item:hover {
766 | 	background: #343434;
767 | }
768 | 
769 | #httpswarning {
770 | 	display: none;
771 | }
772 | </style>
773 | </head>
774 | <body>
775 | 	<div id="httpswarning">The page is currently loaded via https, this will likely not work. Change the url to http and disable automatic http upgrade in your browser's privacy options.</div>
776 | 	<div id="contextMenu">
777 | 		<div class="item" data-handler="fullscreen">Toggle fullscreen</div>
778 | 		<div class="item" data-handler="toggleScreenshot" id="cMenableScreenshot">Enable PGM screenshot</div>
779 | 		<div class="item" data-handler="toggleAutoConnect" id="cMenableAutoConnect">Enable auto connect</div>
780 | 		<div class="item" data-handler="toggleAutoRestore" id="cMenableAutoRestore">Enable auto restore</div>
781 | 		<div class="item" data-handler="reload">Reload page</div>
782 | 		<div class="item" data-handler="clrSavedData">Clear all saved settings</div>
783 | 		<div class="item" data-handler="connectWithScan">Connect via QR-Code</div>
784 | 	</div>
785 | 	<div id="screenshotBox">
786 | 		<img id="screenshotImg" src="">
787 | 	</div>
788 | 	<div id="settingsBox">
789 | 		Host/IP + Port:<input type="text" id="obsHost" placeholder="obs host">
790 | 		Websocket Password:<input type="text" id="obsPw" placeholder="obs password">
791 | 		<button type="button" onclick="attemptObsConnection();">Connect to OBS</button>
792 | 		<button type="button" onclick="connectWithQr();">Connect via QR-Code</button>
793 | 		<div id="errorlog"></div>
794 | 	</div>
795 | 	<div id="selectionBox"></div>
796 | 	<div id="selectedTitleBox">
797 | 		<span id="selectedTitleText"></span>
798 | 	</div>
799 | 	<div id="srStatusBox">
800 | 		<span id="srStatusText"></span>
801 | 	</div>
802 | </body>
803 | 


--------------------------------------------------------------------------------