mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 09:10:30 +08:00
refactoring
This commit is contained in:
Devaev Maxim
parent
f6e02e7219
commit
aaa60e63a4
@ -37,7 +37,6 @@ export function Streamer() {
|
||||
var __client_key = tools.makeId();
|
||||
var __client_id = "";
|
||||
var __client_fps = -1;
|
||||
var __prev = false;
|
||||
|
||||
var __init__ = function() {
|
||||
$("stream-led").title = "Stream inactive";
|
||||
@ -69,34 +68,31 @@ export function Streamer() {
|
||||
|
||||
self.setState = function(state) {
|
||||
if (state && state.state) {
|
||||
let encoder = state.state.encoder;
|
||||
let source = state.state.source;
|
||||
let stream = state.state.stream;
|
||||
|
||||
if (!__prev) {
|
||||
$("stream-quality-slider").activated = false;
|
||||
$("stream-desired-fps-slider").activated = false;
|
||||
}
|
||||
let max_fps = state.limits.max_fps;
|
||||
state = state.state;
|
||||
|
||||
if (!$("stream-quality-slider").activated) {
|
||||
wm.switchDisabled($("stream-quality-slider"), false);
|
||||
if ($("stream-quality-slider").value !== encoder.quality) {
|
||||
$("stream-quality-slider").value = encoder.quality;
|
||||
__updateQualityValue(encoder.quality);
|
||||
if ($("stream-quality-slider").value !== state.encoder.quality) {
|
||||
$("stream-quality-slider").value = state.encoder.quality;
|
||||
__updateQualityValue(state.encoder.quality);
|
||||
}
|
||||
}
|
||||
|
||||
if (!$("stream-desired-fps-slider").activated) {
|
||||
$("stream-desired-fps-slider").max = state.limits.max_fps;
|
||||
$("stream-desired-fps-slider").max = max_fps;
|
||||
wm.switchDisabled($("stream-desired-fps-slider"), false);
|
||||
if ($("stream-desired-fps-slider").value !== source.desired_fps) {
|
||||
$("stream-desired-fps-slider").value = source.desired_fps;
|
||||
__updateDesiredFpsValue(source.desired_fps);
|
||||
if ($("stream-desired-fps-slider").value !== state.source.desired_fps) {
|
||||
$("stream-desired-fps-slider").value = state.source.desired_fps;
|
||||
__updateDesiredFpsValue(state.source.desired_fps);
|
||||
}
|
||||
}
|
||||
|
||||
if (__resolution.width !== source.resolution.width || __resolution.height !== source.resolution.height) {
|
||||
__resolution = source.resolution;
|
||||
if (
|
||||
__resolution.width !== state.source.resolution.width
|
||||
|| __resolution.height !== state.source.resolution.height
|
||||
) {
|
||||
__resolution = state.source.resolution;
|
||||
if ($("stream-auto-resize-checkbox").checked) {
|
||||
__adjustSizeFactor();
|
||||
} else {
|
||||
@ -104,20 +100,51 @@ export function Streamer() {
|
||||
}
|
||||
}
|
||||
|
||||
if (__ensureStream(state.stream.clients_stat)) {
|
||||
$("stream-image").className = "stream-image-active";
|
||||
$("stream-box").classList.remove("stream-box-inactive");
|
||||
$("stream-led").className = "led-green";
|
||||
$("stream-led").title = "Stream is active";
|
||||
wm.switchDisabled($("stream-screenshot-button"), false);
|
||||
wm.switchDisabled($("stream-reset-button"), false);
|
||||
$("stream-quality-slider").activated = false;
|
||||
$("stream-desired-fps-slider").activated = false;
|
||||
tools.info("Stream: active");
|
||||
}
|
||||
|
||||
__updateStreamHeader(true);
|
||||
|
||||
} else {
|
||||
$("stream-image").className = "stream-image-inactive";
|
||||
$("stream-box").classList.add("stream-box-inactive");
|
||||
$("stream-led").className = "led-gray";
|
||||
$("stream-led").title = "Stream inactive";
|
||||
wm.switchDisabled($("stream-screenshot-button"), true);
|
||||
wm.switchDisabled($("stream-reset-button"), true);
|
||||
wm.switchDisabled($("stream-quality-slider"), true);
|
||||
wm.switchDisabled($("stream-desired-fps-slider"), true);
|
||||
tools.info("Stream: inactive");
|
||||
|
||||
__updateStreamHeader(false);
|
||||
}
|
||||
};
|
||||
|
||||
var __ensureStream = function(clients_stat) {
|
||||
let stream_client = tools.getCookie("stream_client");
|
||||
if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) {
|
||||
tools.info("Stream: found acceptable stream_client cookie:", stream_client);
|
||||
__client_id = stream_client.slice(stream_client.indexOf("/") + 1);
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(stream.clients_stat, __client_id)) {
|
||||
__client_fps = stream.clients_stat[__client_id].fps;
|
||||
if (__client_id && __client_id in clients_stat) {
|
||||
__client_fps = clients_stat[__client_id].fps;
|
||||
return false;
|
||||
} else {
|
||||
__clearState();
|
||||
}
|
||||
__client_key = tools.makeId();
|
||||
__client_id = "";
|
||||
__client_fps = -1;
|
||||
|
||||
if (!__prev) {
|
||||
let path = "/streamer/stream?key=" + __client_key;
|
||||
let path = `/streamer/stream?key=${__client_key}`;
|
||||
if (tools.browser.is_safari || tools.browser.is_ios) {
|
||||
// uStreamer fix for WebKit
|
||||
tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs");
|
||||
@ -127,49 +154,11 @@ export function Streamer() {
|
||||
tools.info("Stream: using advance_headers=1 to fix Blink MJPG bugs");
|
||||
path += "&advance_headers=1";
|
||||
}
|
||||
$("stream-image").src = path;
|
||||
$("stream-image").className = "stream-image-active";
|
||||
$("stream-box").classList.remove("stream-box-inactive");
|
||||
$("stream-led").className = "led-green";
|
||||
$("stream-led").title = "Stream is active";
|
||||
wm.switchDisabled($("stream-screenshot-button"), false);
|
||||
wm.switchDisabled($("stream-reset-button"), false);
|
||||
tools.info("Stream: acquired");
|
||||
__prev = true;
|
||||
}
|
||||
|
||||
__updateStreamHeader(true);
|
||||
|
||||
} else {
|
||||
__clearState();
|
||||
}
|
||||
};
|
||||
|
||||
var __clearState = function() {
|
||||
tools.info("Stream: refreshing ...");
|
||||
|
||||
$("stream-image").className = "stream-image-inactive";
|
||||
$("stream-box").classList.add("stream-box-inactive");
|
||||
$("stream-led").className = "led-gray";
|
||||
$("stream-led").title = "Stream inactive";
|
||||
wm.switchDisabled($("stream-screenshot-button"), true);
|
||||
wm.switchDisabled($("stream-reset-button"), true);
|
||||
wm.switchDisabled($("stream-quality-slider"), true);
|
||||
wm.switchDisabled($("stream-desired-fps-slider"), true);
|
||||
|
||||
__client_key = tools.makeId();
|
||||
__client_id = "";
|
||||
__client_fps = -1;
|
||||
__prev = false;
|
||||
__updateStreamHeader(false);
|
||||
};
|
||||
|
||||
var __updateQualityValue = function(value) {
|
||||
$("stream-quality-value").innerHTML = value + "%";
|
||||
};
|
||||
|
||||
var __updateDesiredFpsValue = function(value) {
|
||||
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
|
||||
$("stream-image").src = path;
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
var __updateStreamHeader = function(online) {
|
||||
@ -183,6 +172,14 @@ export function Streamer() {
|
||||
}
|
||||
};
|
||||
|
||||
var __updateQualityValue = function(value) {
|
||||
$("stream-quality-value").innerHTML = value + "%";
|
||||
};
|
||||
|
||||
var __updateDesiredFpsValue = function(value) {
|
||||
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
|
||||
};
|
||||
|
||||
var __clickScreenshotButton = function() {
|
||||
let el_a = document.createElement("a");
|
||||
el_a.href = "/streamer/snapshot";
|
||||
|
||||
@ -24,14 +24,14 @@
|
||||
|
||||
|
||||
export var tools = new function() {
|
||||
let __debug = (new URL(window.location.href)).searchParams.get("debug");
|
||||
|
||||
this.setDefault = function(dict, key, value) {
|
||||
if (!(key in dict)) {
|
||||
dict[key] = value;
|
||||
}
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
this.makeRequest = function(method, url, callback, body=null, content_type=null) {
|
||||
let http = new XMLHttpRequest();
|
||||
http.open(method, url, true);
|
||||
@ -44,6 +44,8 @@ export var tools = new function() {
|
||||
return http;
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
this.makeId = function() {
|
||||
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let id = "";
|
||||
@ -53,6 +55,8 @@ export var tools = new function() {
|
||||
return id;
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
this.getCookie = function(name) {
|
||||
let matches = document.cookie.match(new RegExp(
|
||||
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
|
||||
@ -106,13 +110,24 @@ export var tools = new function() {
|
||||
};
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
let __debug = (new URL(window.location.href)).searchParams.get("debug");
|
||||
|
||||
this.debug = function(...args) {
|
||||
if (__debug) {
|
||||
console.log("LOG/DEBUG", ...args); // eslint-disable-line no-console
|
||||
__log("DEBUG", ...args);
|
||||
}
|
||||
};
|
||||
this.info = (...args) => console.log("LOG/INFO", ...args); // eslint-disable-line no-console
|
||||
this.error = (...args) => console.error("LOG/ERROR", ...args); // eslint-disable-line no-console
|
||||
this.info = (...args) => __log("INFO", ...args);
|
||||
this.error = (...args) => __log("ERROR", ...args);
|
||||
|
||||
let __log = function(label, ...args) {
|
||||
let now = (new Date()).toISOString().split("T")[1].replace("Z", "");
|
||||
console.log(`[${now}] LOG/${label} --`, ...args);
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
this.browser = new function() {
|
||||
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user