script.js

////////////////
// PARAMETERS //
////////////////

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

const obsServerAddress = urlParams.get("address") || "127.0.0.1";
const obsServerPort = urlParams.get("port") || "4455";
const obsServerPassword = urlParams.get("password") || "";
const obsMicInput = urlParams.get("audio") || "";
const background = urlParams.get("background") || "";

if (obsMicInput != "")
	document.getElementById("theMotherOfAllVolumeContainers").style.visibility = "visible";

if (background != "")
{
	document.body.style.backgroundImage = `url("frames/${background}.png")`
}

let ws = new WebSocket("ws://" + obsServerAddress + ":" + obsServerPort + "/");

let previousOutputTimecode = 0;
let previousOutputBytes = 0;
let activeFps;

function connectws() {
	if ("WebSocket" in window) {

		ws = new WebSocket("ws://" + obsServerAddress + ":" + obsServerPort + "/");

		// Reconnect
		ws.onclose = function () {
			SetConnectionStatus(false);
			setTimeout(connectws, 5000);
		};

		ws.onopen = async function () {
		}

		ws.onmessage = async function (event) {
			let data = JSON.parse(event.data);

			switch (data.op) {
				case 0:		// Hello OpCode
				case 3:		// Reidentify OpCode
					let salt = data.d.authentication != null ? data.d.authentication.salt : "";
					let challenge = data.d.authentication != null ? data.d.authentication.challenge : "";

					let secret = await sha256(obsServerPassword + salt);
					let base64_secret = hexToBase64(secret);

					let auth_string = await sha256(base64_secret + challenge);
					let base64_auth_string = hexToBase64(auth_string);

					ws.send(
						JSON.stringify({
							op: 1,
							d: {
								rpcVersion: 1,
								authentication: base64_auth_string,
								eventSubscriptions: 1 << 16
							}
						}
						));
					break;
				case 2:		// Identify OpCode
					console.log("Connected to OBS!");
					SetConnectionStatus(true);
					break;
				case 5:		// Event OpCode
					switch (data.d.eventType) {
						case ("InputVolumeMeters"):
							let eventData = data.d.eventData;
							eventData.inputs.forEach((input) => {
								if (input.inputName == obsMicInput) {
									if (input.inputLevelsMul.length == 0) {
										document.getElementById("theMotherOfAllVolumeContainers").style.visibility = `hidden`;
									}
									else {
										let leftMeter = document.getElementById("theGreenShitThatsInsideTheOtherContainerLeft");
										let rightMeter = document.getElementById("theGreenShitThatsInsideTheOtherContainerRight");

										var tl = new TimelineMax();
										tl
											.to(leftMeter, 0.1, { height: + 100 * input.inputLevelsMul[0][1] + "%", ease: Linear.easeNone });

										tl = new TimelineMax();
										tl
											.to(rightMeter, 0.1, { height: + 100 * input.inputLevelsMul[1][1] + "%", ease: Linear.easeNone });

										document.getElementById("theMotherOfAllVolumeContainers").style.visibility = `visible`;
									}
								}
							});
							break;
					}
					break;
				case 7:		// RequestResponse OpCode
					switch (data.d.requestType) {
						case "GetStats":
							{
								let responseData = data.d.responseData;
								activeFps = `${responseData.activeFps.toFixed(1)}`;
								const cpu = `${responseData.cpuUsage.toFixed(1)}%`;
								const memory = `${responseData.memoryUsage.toFixed(1)}MB`;
								
								const averageFrameRenderTime = `${responseData.averageFrameRenderTime.toFixed(1)}ms`;
								const outputSkippedFrames = responseData.outputSkippedFrames;
								const outputTotalFrames = responseData.outputTotalFrames;
								const outputSkippedFramesPerc = outputTotalFrames > 0 ? `${(100 * outputSkippedFrames / outputTotalFrames).toFixed(1)}%` : `0%`;
								const renderSkippedFrames = responseData.renderSkippedFrames;
								const renderTotalFrames = responseData.renderTotalFrames;
								const renderSkippedFramesPerc = `${(100 * renderSkippedFrames / renderTotalFrames).toFixed(1)}%`

								document.getElementById("statsLabel").innerHTML = `CPU: ${cpu} • MEM: ${memory} • RENDER TIME: ${averageFrameRenderTime}`;
								document.getElementById("advancedStatsLabel").innerHTML = `MISSED FRAMES ${outputSkippedFramesPerc} • SKIPPED FRAMES ${renderSkippedFramesPerc}`;
								document.getElementById("fps").innerHTML = `${activeFps}`;

								GetVideoSettings();
							}
							break;
						case "GetVideoSettings":
							{
								let responseData = data.d.responseData;
								const fpsNumerator = responseData.fpsNumerator;
								const fpsDenominator = responseData.fpsDenominator;

								const fps = fpsNumerator / fpsDenominator;
								const fpsMeterValue = activeFps / fps;

								let fpsMeter = document.getElementById("fpsMeter");
								var tl = new TimelineMax();
								tl
									.to(fpsMeter, 0.1, { height: + 100 * fpsMeterValue + "%", ease: Linear.easeNone });

								if (fpsMeterValue >= 1)
									document.getElementById("fpsMeter").style.backgroundColor = `#37d247`;
								else if (fpsMeterValue > 0.9)
									document.getElementById("fpsMeter").style.backgroundColor = `#e5af24`;
								else
									document.getElementById("fpsMeter").style.backgroundColor = `#D12025`;
							}
							break;
						case "GetRecordStatus":
							{
								let responseData = data.d.responseData;

								if (responseData.outputActive === false) {
									document.getElementById("recordingLabel").innerHTML = ``;
									document.getElementById("recordTimecodeLabel").innerHTML = ``;
									document.getElementById("recordOutputFilesize").innerHTML = ``;
									document.getElementById("recordingRing").style.visibility = 'hidden';
									document.getElementById("recordInfo").style.visibility = `hidden`;
								}
								else {
									document.getElementById("recordingLabel").innerHTML = `REC 🔴`;
									document.getElementById("recordTimecodeLabel").innerHTML = `${RemoveMilliseconds(responseData.outputTimecode)}`;
									document.getElementById("recordOutputFilesize").innerHTML = `${ConvertToMegabytes(responseData.outputBytes)}MB`;
									document.getElementById("recordingRing").style.visibility = 'visible';
									document.getElementById("recordInfo").style.visibility = `visible`;
								}
							}
							break;
						case "GetStreamStatus":
							{
								let responseData = data.d.responseData;

								if (responseData.outputActive === false) {
									document.getElementById("streamingRing").style.visibility = 'hidden';
									document.getElementById("streamInfo").style.visibility = `hidden`;
								}
								else {
									let outputTimecode = TimeToMilliseconds(responseData.outputTimecode);
									let outputBytes = responseData.outputBytes;

									let kbps = ((outputBytes - previousOutputBytes) / (outputTimecode - previousOutputTimecode) * 8);

									previousOutputTimecode = outputTimecode;
									previousOutputBytes = outputBytes;

									document.getElementById("streamBitrateLabel").innerHTML = `${Math.floor(kbps)} kb/s`;
									document.getElementById("streamTimecodeLabel").innerHTML = `${RemoveMilliseconds(responseData.outputTimecode)}`;
									GetStreamServiceSettings();

									document.getElementById("streamingRing").style.visibility = 'visible';
									document.getElementById("streamInfo").style.visibility = `visible`;
								}
							}
							break;
						case "GetStreamServiceSettings":
							{
								let responseData = data.d.responseData;
								switch (responseData.streamServiceSettings.service) {
									case "Twitch":
										document.getElementById("streamPlatformLabel").innerHTML = "🟣 Twitch";
										break;
									case "YouTube":
										document.getElementById("streamPlatformLabel").innerHTML = "🔴 YouTube";
										break;
									case undefined:
										document.getElementById("streamPlatformLabel").innerHTML = "🔴 LIVE";
										break;
									default:
										document.getElementById("streamPlatformLabel").innerHTML = `🔴 ${responseData.streamServiceSettings.service}`;
										break;
								}
							}
							break;
						case "GetProfileList":
							{
								let responseData = data.d.responseData;
								document.getElementById("profileLabel").innerHTML = `Profile: ${responseData.currentProfileName}`;
							}
							break;
						case "GetInputMute":
							{
								let responseData = data.d.responseData;
								console.log(responseData);
								if (responseData.inputMuted)
									document.getElementById("micMuteIcon").style.visibility = `visible`;
								else
									document.getElementById("micMuteIcon").style.visibility = `hidden`;
							}
							break;
					}
					break;

			}
		}
	}
}



//////////////////////
// HELPER FUNCTIONS //
//////////////////////

function obswsSendRequest(ws, data) {
	ws.send(
		JSON.stringify({
			"op": 6,
			"d": data
		}
		));
}

function TimeToMilliseconds(hms) {
	const [hours, minutes, seconds] = hms.split(':');
	const totalSeconds = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds);
	return totalSeconds * 1000;
}

function RemoveMilliseconds(timecode) {
	const parts = timecode.split('.');
	return parts[0];
}

function ConvertToMegabytes(bytes) {
	return ((bytes / 1024) / 1024).toFixed(2);
}

function CreateGuid() {
	function _p8(s) {
		var p = (Math.random().toString(16) + "000000000").substr(2, 8);
		return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p;
	}
	return _p8() + _p8(true) + _p8(true) + _p8();
}

function sha256(ascii) {
	function rightRotate(value, amount) {
		return (value >>> amount) | (value << (32 - amount));
	};

	var mathPow = Math.pow;
	var maxWord = mathPow(2, 32);
	var lengthProperty = 'length'
	var i, j; // Used as a counter across the whole file
	var result = ''

	var words = [];
	var asciiBitLength = ascii[lengthProperty] * 8;

	//* caching results is optional - remove/add slash from front of this line to toggle
	// Initial hash value: first 32 bits of the fractional parts of the square roots of the first 8 primes
	// (we actually calculate the first 64, but extra values are just ignored)
	var hash = sha256.h = sha256.h || [];
	// Round constants: first 32 bits of the fractional parts of the cube roots of the first 64 primes
	var k = sha256.k = sha256.k || [];
	var primeCounter = k[lengthProperty];
	/*/
	var hash = [], k = [];
	var primeCounter = 0;
	//*/

	var isComposite = {};
	for (var candidate = 2; primeCounter < 64; candidate++) {
		if (!isComposite[candidate]) {
			for (i = 0; i < 313; i += candidate) {
				isComposite[i] = candidate;
			}
			hash[primeCounter] = (mathPow(candidate, .5) * maxWord) | 0;
			k[primeCounter++] = (mathPow(candidate, 1 / 3) * maxWord) | 0;
		}
	}

	ascii += '\x80' // Append Ƈ' bit (plus zero padding)
	while (ascii[lengthProperty] % 64 - 56) ascii += '\x00' // More zero padding
	for (i = 0; i < ascii[lengthProperty]; i++) {
		j = ascii.charCodeAt(i);
		if (j >> 8) return; // ASCII check: only accept characters in range 0-255
		words[i >> 2] |= j << ((3 - i) % 4) * 8;
	}
	words[words[lengthProperty]] = ((asciiBitLength / maxWord) | 0);
	words[words[lengthProperty]] = (asciiBitLength)

	// process each chunk
	for (j = 0; j < words[lengthProperty];) {
		var w = words.slice(j, j += 16); // The message is expanded into 64 words as part of the iteration
		var oldHash = hash;
		// This is now the undefinedworking hash", often labelled as variables a...g
		// (we have to truncate as well, otherwise extra entries at the end accumulate
		hash = hash.slice(0, 8);

		for (i = 0; i < 64; i++) {
			var i2 = i + j;
			// Expand the message into 64 words
			// Used below if 
			var w15 = w[i - 15], w2 = w[i - 2];

			// Iterate
			var a = hash[0], e = hash[4];
			var temp1 = hash[7]
				+ (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1
				+ ((e & hash[5]) ^ ((~e) & hash[6])) // ch
				+ k[i]
				// Expand the message schedule if needed
				+ (w[i] = (i < 16) ? w[i] : (
					w[i - 16]
					+ (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15 >>> 3)) // s0
					+ w[i - 7]
					+ (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2 >>> 10)) // s1
				) | 0
				);
			// This is only used once, so *could* be moved below, but it only saves 4 bytes and makes things unreadble
			var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
				+ ((a & hash[1]) ^ (a & hash[2]) ^ (hash[1] & hash[2])); // maj

			hash = [(temp1 + temp2) | 0].concat(hash); // We don't bother trimming off the extra ones, they're harmless as long as we're truncating when we do the slice()
			hash[4] = (hash[4] + temp1) | 0;
		}

		for (i = 0; i < 8; i++) {
			hash[i] = (hash[i] + oldHash[i]) | 0;
		}
	}

	for (i = 0; i < 8; i++) {
		for (j = 3; j + 1; j--) {
			var b = (hash[i] >> (j * 8)) & 255;
			result += ((b < 16) ? 0 : '') + b.toString(16);
		}
	}
	return result;
};

function hexToBase64(hexstring) {
	return btoa(hexstring.match(/\w{2}/g).map(function (a) {
		return String.fromCharCode(parseInt(a, 16));
	}).join(""));
}



//////////////////////
// WEBSOCKET STATUS //
//////////////////////

// This function sets the visibility of the Streamer.bot status label on the overlay
function SetConnectionStatus(connected) {
	let statusContainer = document.getElementById("statusContainer");
	
	if (connected) {
		statusContainer.style.background = "#2FB774";
		statusContainer.innerText = "Connected!";
		mainContainer.style.visibility = `visible`;
		var tl = new TimelineMax();
		tl
			.to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone });
	}
	else {
		statusContainer.style.background = "#D12025";
		statusContainer.innerText = "Connecting...";
		statusContainer.style.opacity = 1;
		mainContainer.style.visibility = `hidden`;
	}
}

connectws();

setInterval(GetStreamStatus, 1000);
function GetStreamStatus() {
	if (ws.readyState !== WebSocket.CLOSED) {
		let data =
		{
			"requestType": "GetStreamStatus",
			"requestId": CreateGuid(),
			"requestData": {
			}
		}
		obswsSendRequest(ws, data);
	}
}

function GetStreamServiceSettings() {
	let data =
	{
		"requestType": "GetStreamServiceSettings",
		"requestId": CreateGuid(),
		"requestData": {
		}
	}
	obswsSendRequest(ws, data);
}

setInterval(GetProfileList, 200);
function GetProfileList() {
	let data =
	{
		"requestType": "GetProfileList",
		"requestId": CreateGuid(),
		"requestData": {
		}
	}
	obswsSendRequest(ws, data);
}

setInterval(GetStats, 1000);
function GetStats() {
	let data =
	{
		"requestType": "GetStats",
		"requestId": CreateGuid(),
		"requestData": {
		}
	}
	obswsSendRequest(ws, data);
}

setInterval(GetRecordStatus, 500);
function GetRecordStatus() {
	let data =
	{
		"requestType": "GetRecordStatus",
		"requestId": CreateGuid(),
		"requestData": {
		}
	}
	obswsSendRequest(ws, data);
}


if (obsMicInput != "")
{
	setInterval(GetInputMute, 500);
	function GetInputMute() {
		let data =
		{
			"requestType": "GetInputMute",
			"requestId": CreateGuid(),
			"requestData": {
				"inputName": obsMicInput
			}
		}
		obswsSendRequest(ws, data);
	}
}


function GetVideoSettings() {
	let data =
	{
		"requestType": "GetVideoSettings",
		"requestId": CreateGuid(),
		"requestData": {
		}
	}
	obswsSendRequest(ws, data);
}