function Stream() { // var self = this; /********************************************************************************/ var __prev_state = false; var __resolution = {width: 640, height: 480}; var __size_factor = 1; var __client_id = ""; var __fps = 0; var __init__ = function() { $("stream-led").title = "Stream inactive"; $("stream-quality-slider").min = 10; $("stream-quality-slider").max = 100; $("stream-quality-slider").step = 5; $("stream-quality-slider").value = 80; tools.setOnUpSlider($("stream-quality-slider"), 1000, function(value) { $("stream-quality-value").innerHTML = value + "%"; }, __sendQuality); $("stream-soft-fps-slider").min = 1; $("stream-soft-fps-slider").max = 30; $("stream-soft-fps-slider").step = 1; $("stream-soft-fps-slider").value = 30; tools.setOnUpSlider($("stream-soft-fps-slider"), 1000, function(value) { $("stream-soft-fps-value").innerHTML = value; }, __sendSoftFps); $("stream-size-slider").min = 20; $("stream-size-slider").max = 200; $("stream-size-slider").step = 5; $("stream-size-slider").value = 100; $("stream-size-slider").oninput = () => __resize(); $("stream-size-slider").onchange = () => __resize(); tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton); tools.setOnClick($("stream-reset-button"), __clickResetButton); __startPoller(); }; /********************************************************************************/ // XXX: In current implementation we don't need this event because Stream() has own state poller var __startPoller = function() { var http = tools.makeRequest("GET", "/streamer/ping", function() { if (http.readyState === 4) { var response = (http.status === 200 ? JSON.parse(http.responseText) : null); if (http.status !== 200) { if (__prev_state) { 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"; $("stream-screenshot-button").disabled = true; __setStreamerControlsDisabled(true); __updateStreamHeader(false); __fps = 0; __prev_state = false; } } else if (http.status === 200) { if (!$("stream-soft-fps-slider").activated) { $("stream-soft-fps-slider").disabled = false; if ($("stream-soft-fps-slider").value !== response.source.soft_fps) { $("stream-soft-fps-slider").value = response.source.soft_fps; $("stream-soft-fps-value").innerHTML = response.source.soft_fps; } } if (!$("stream-quality-slider").activated) { $("stream-quality-slider").disabled = false; if ($("stream-quality-slider").value !== response.source.quality) { $("stream-quality-slider").value = response.source.quality; $("stream-quality-value").innerHTML = response.source.quality + "%"; } } if (__resolution.width !== response.source.resolution.width || __resolution.height !== response.source.resolution.height) { __resolution = response.source.resolution; if ($("stream-auto-resize-checkbox").checked) { __adjustSizeFactor(); } else { __applySizeFactor(); } } var client_id = tools.getCookie("stream_client_id"); if (client_id) { __client_id = client_id; } if (response.stream.clients_stat.hasOwnProperty(__client_id)) { __fps = response.stream.clients_stat[__client_id].fps; } else { __fps = 0; } __updateStreamHeader(true); if (!__prev_state) { var path = "/streamer/stream?t=" + new Date().getTime(); if (tools.browser.is_chrome || tools.browser.is_blink) { // uStreamer fix for Blink https://bugs.chromium.org/p/chromium/issues/detail?id=527446 tools.info("Stream: using advance_headers=1 to fix Blink MJPG bugs"); path += "&advance_headers=1"; } else 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"); path += "&dual_final_frames=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"; $("stream-screenshot-button").disabled = false; $("stream-reset-button").disabled = false; __prev_state = true; tools.info("Stream: acquired"); } } } }); setTimeout(__startPoller, 1000); }; var __updateStreamHeader = function(online) { var el_grab = document.querySelector("#stream-window-header .window-grab"); var el_info = $("stream-info"); if (online) { el_grab.innerHTML = el_info.innerHTML = "Stream – " + __resolution.width + "x" + __resolution.height + " / " + __fps + " fps"; } else { el_grab.innerHTML = el_info.innerHTML = "Stream – offline"; } }; var __clickScreenshotButton = function() { var el_a = document.createElement("a"); el_a.href = "/streamer/snapshot"; el_a.target = "_blank"; document.body.appendChild(el_a); el_a.click(); setTimeout(() => document.body.removeChild(el_a), 0); }; var __clickResetButton = function() { __setStreamerControlsDisabled(true); var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() { if (http.readyState === 4) { if (http.status !== 200) { ui.error("Can't reset stream:
", http.responseText); } } }); }; var __sendQuality = function(value) { __setStreamerControlsDisabled(true); var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?quality=" + value, function() { if (http.readyState === 4) { if (http.status !== 200) { ui.error("Can't configure stream:
", http.responseText); } $("stream-quality-slider").activated = false; } }); }; var __sendSoftFps = function(value) { __setStreamerControlsDisabled(true); var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?soft_fps=" + value, function() { if (http.readyState === 4) { if (http.status !== 200) { ui.error("Can't configure stream:
", http.responseText); } $("stream-soft-fps-slider").activated = false; } }); }; var __setStreamerControlsDisabled = function(disabled) { $("stream-reset-button").disabled = disabled; $("stream-quality-slider").disabled = disabled; $("stream-soft-fps-slider").disabled = disabled; }; var __resize = function(center=false) { var size = $("stream-size-slider").value; $("stream-size-value").innerHTML = size + "%"; __size_factor = size / 100; __applySizeFactor(center); }; var __adjustSizeFactor = function() { var el_window = $("stream-window"); var el_slider = $("stream-size-slider"); var view = ui.getViewGeometry(); for (var size = 100; size >= el_slider.min; size -= el_slider.step) { tools.info("Stream: adjusting size:", size); $("stream-size-slider").value = size; __resize(true); var rect = el_window.getBoundingClientRect(); if ( rect.bottom <= view.bottom && rect.top >= view.top && rect.left >= view.left && rect.right <= view.right ) { break; } } }; var __applySizeFactor = function(center=false) { var el_stream_image = $("stream-image"); el_stream_image.style.width = __resolution.width * __size_factor + "px"; el_stream_image.style.height = __resolution.height * __size_factor + "px"; ui.showWindow($("stream-window"), false, center); }; __init__(); }