GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 09:01:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui for stream resolution

Browse Source
This commit is contained in:
Devaev Maxim
2020-07-14 09:06:03 +03:00
parent 77f3dab55c
commit e2f2e8b359
4 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
kvmd/apps/kvmd/streamer.py
View File

@@ -248,13 +248,13 @@ class Streamer: # pylint: disable=too-many-instance-attributes
# ===== # =====
async def get_state(self) -> Dict: async def get_state(self) -> Dict:
state = None streamer_state = None
if self.__streamer_task: if self.__streamer_task:
session = self.__ensure_http_session() session = self.__ensure_http_session()
try: try:
async with session.get(self.__make_url("state")) as response: async with session.get(self.__make_url("state")) as response:
htclient.raise_not_200(response) htclient.raise_not_200(response)
state = (await response.json())["result"] streamer_state = (await response.json())["result"]
except (aiohttp.ClientConnectionError, aiohttp.ServerConnectionError): except (aiohttp.ClientConnectionError, aiohttp.ServerConnectionError):
pass pass
except Exception: except Exception:
@@ -270,7 +270,7 @@ class Streamer: # pylint: disable=too-many-instance-attributes
"limits": self.__params.get_limits(), "limits": self.__params.get_limits(),
"params": self.__params.get_params(), "params": self.__params.get_params(),
"snapshot": {"saved": snapshot}, "snapshot": {"saved": snapshot},
"state": state, "streamer": streamer_state,
"features": self.__params.get_features(), "features": self.__params.get_features(),
} }

15
web/kvm/index.html
View File

@@ -142,11 +142,20 @@
<button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button> <button data-force-hide-menu id="show-keyboard-button">&bull; Show keyboard</button>
<button data-force-hide-menu id="show-about-button">&bull; Show about</button> <button data-force-hide-menu id="show-about-button">&bull; Show about</button>
</div> </div>
<div id="stream-resolution" class="feature-disabled">
<hr>
<div class="menu-item-content-text">
Stream resolution:
<div class="stream-param-box">
<select disabled data-dont-hide-menu id="stream-resolution-selector"></select>
</div>
</div>
</div>
<div id="stream-quality" class="feature-disabled"> <div id="stream-quality" class="feature-disabled">
<hr> <hr>
<div class="menu-item-content-text"> <div class="menu-item-content-text">
Stream quality: <span id="stream-quality-value">80%</span> Stream quality: <span id="stream-quality-value">80%</span>
<div class="stream-slider-box"> <div class="stream-param-box">
<input disabled type="range" id="stream-quality-slider" class="slider" /> <input disabled type="range" id="stream-quality-slider" class="slider" />
</div> </div>
</div> </div>
@@ -154,14 +163,14 @@
<hr> <hr>
<div class="menu-item-content-text"> <div class="menu-item-content-text">
Stream FPS: <span id="stream-desired-fps-value">0</span> Stream FPS: <span id="stream-desired-fps-value">0</span>
<div class="stream-slider-box"> <div class="stream-param-box">
<input disabled type="range" id="stream-desired-fps-slider" class="slider" /> <input disabled type="range" id="stream-desired-fps-slider" class="slider" />
</div> </div>
</div> </div>
<hr> <hr>
<div class="menu-item-content-text"> <div class="menu-item-content-text">
Stream size: <span id="stream-size-value">100%</span> Stream size: <span id="stream-size-value">100%</span>
<div class="stream-slider-box"> <div class="stream-param-box">
<input type="range" id="stream-size-slider" class="slider" /> <input type="range" id="stream-size-slider" class="slider" />
</div> </div>
</div> </div>

2
web/share/css/kvm/stream.css
View File

@@ -61,7 +61,7 @@ img.stream-image-inactive {
filter: grayscale(100%) brightness(75%) sepia(75%); filter: grayscale(100%) brightness(75%) sepia(75%);
} }
div.stream-slider-box { div.stream-param-box {
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
} }

59
web/share/js/kvm/stream.js
View File

@@ -33,6 +33,8 @@ export function Streamer() {
/************************************************************************/ /************************************************************************/
var __resolution = {width: 640, height: 480}; var __resolution = {width: 640, height: 480};
var __resolution_str = "640x480";
var __available_resolutions = [];
var __size_factor = 1; var __size_factor = 1;
var __client_key = tools.makeId(); var __client_key = tools.makeId();
var __client_id = ""; var __client_id = "";
@@ -53,6 +55,11 @@ export function Streamer() {
$("stream-desired-fps-slider").value = 0; $("stream-desired-fps-slider").value = 0;
tools.setOnUpSlider($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value)); tools.setOnUpSlider($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
$("stream-resolution-selector").onchange = (() => {
wm.switchEnabled($("stream-resolution-selector"), false);
__sendParam("resolution", $("stream-resolution-selector").value);
});
$("stream-size-slider").min = 20; $("stream-size-slider").min = 20;
$("stream-size-slider").max = 200; $("stream-size-slider").max = 200;
$("stream-size-slider").step = 5; $("stream-size-slider").step = 5;
@@ -68,35 +75,34 @@ export function Streamer() {
self.setState = function(state) { self.setState = function(state) {
if (state) { if (state) {
tools.setFeatureEnabled($("stream-quality"), state.features.quality && (state.state === null || state.state.encoder.quality > 0)); tools.setFeatureEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
tools.setFeatureEnabled($("stream-resolution"), state.features.resolution);
} }
if (state && state.state) { if (state && state.streamer) {
let max_fps = state.limits.max_fps;
state = state.state;
if (!$("stream-quality-slider").activated) { if (!$("stream-quality-slider").activated) {
wm.switchEnabled($("stream-quality-slider"), true); wm.switchEnabled($("stream-quality-slider"), true);
if ($("stream-quality-slider").value !== state.encoder.quality) { if ($("stream-quality-slider").value !== state.streamer.encoder.quality) {
$("stream-quality-slider").value = state.encoder.quality; $("stream-quality-slider").value = state.streamer.encoder.quality;
__updateQualityValue(state.encoder.quality); __updateQualityValue(state.streamer.encoder.quality);
} }
} }
if (!$("stream-desired-fps-slider").activated) { if (!$("stream-desired-fps-slider").activated) {
$("stream-desired-fps-slider").max = max_fps; $("stream-desired-fps-slider").max = state.limits.max_fps;
wm.switchEnabled($("stream-desired-fps-slider"), true); wm.switchEnabled($("stream-desired-fps-slider"), true);
if ($("stream-desired-fps-slider").value !== state.source.desired_fps) { if ($("stream-desired-fps-slider").value !== state.streamer.source.desired_fps) {
$("stream-desired-fps-slider").value = state.source.desired_fps; $("stream-desired-fps-slider").value = state.streamer.source.desired_fps;
__updateDesiredFpsValue(state.source.desired_fps); __updateDesiredFpsValue(state.streamer.source.desired_fps);
} }
} }
if ( if (
__resolution.width !== state.source.resolution.width __resolution.width !== state.streamer.source.resolution.width
|| __resolution.height !== state.source.resolution.height || __resolution.height !== state.streamer.source.resolution.height
) { ) {
__resolution = state.source.resolution; __resolution = state.streamer.source.resolution;
__resolution_str = `${__resolution.width}x${__resolution.height}`;
if ($("stream-auto-resize-checkbox").checked) { if ($("stream-auto-resize-checkbox").checked) {
__adjustSizeFactor(); __adjustSizeFactor();
} else { } else {
@@ -104,7 +110,23 @@ export function Streamer() {
} }
} }
if (__ensureStream(state.stream.clients_stat)) { if (state.features.resolution) {
if (__available_resolutions != state.limits.available_resolutions) {
__available_resolutions = state.limits.available_resolutions;
let resolutions_html = "";
for (let variant of __available_resolutions) {
resolutions_html += `<option value="${variant}">${variant}</option>`;
}
if (!__available_resolutions.includes(__resolution_str)) {
resolutions_html += `<option value="${__resolution_str}">${__resolution_str}</option>`;
}
$("stream-resolution-selector").innerHTML = resolutions_html;
}
document.querySelector(`#stream-resolution-selector [value="${__resolution_str}"]`).selected = true;
wm.switchEnabled($("stream-resolution-selector"), true);
}
if (__ensureStream(state.streamer.stream.clients_stat)) {
$("stream-led").className = "led-green"; $("stream-led").className = "led-green";
$("stream-led").title = "Stream is active"; $("stream-led").title = "Stream is active";
wm.switchEnabled($("stream-screenshot-button"), true); wm.switchEnabled($("stream-screenshot-button"), true);
@@ -114,7 +136,7 @@ export function Streamer() {
tools.info("Stream: active"); tools.info("Stream: active");
} }
__updateStreamWindow(true, state.source.online); __updateStreamWindow(true, state.streamer.source.online);
} else { } else {
$("stream-led").className = "led-gray"; $("stream-led").className = "led-gray";
@@ -123,6 +145,7 @@ export function Streamer() {
wm.switchEnabled($("stream-reset-button"), false); wm.switchEnabled($("stream-reset-button"), false);
wm.switchEnabled($("stream-quality-slider"), false); wm.switchEnabled($("stream-quality-slider"), false);
wm.switchEnabled($("stream-desired-fps-slider"), false); wm.switchEnabled($("stream-desired-fps-slider"), false);
wm.switchEnabled($("stream-resolution-selector"), false);
tools.info("Stream: inactive"); tools.info("Stream: inactive");
__updateStreamWindow(false, false); __updateStreamWindow(false, false);
@@ -177,7 +200,7 @@ export function Streamer() {
if (!online) { if (!online) {
title += "no signal / "; title += "no signal / ";
} }
title += `${__resolution.width}x${__resolution.height}`; title += __resolution_str;
if (__client_fps >= 0) { if (__client_fps >= 0) {
title += ` / ${__client_fps} fps`; title += ` / ${__client_fps} fps`;
} }