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

h264 bitrate slider

Browse Source
This commit is contained in:
Devaev Maxim
2021-05-19 17:05:45 +03:00
parent d18c27744f
commit b66618f12d
3 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/kvm/index.html
View File

@@ -138,14 +138,21 @@
<td>
<input class="slider" disabled type="range" id="stream-quality-slider">
</td>
<td class="value" id="stream-quality-value">80%</td>
<td class="value" id="stream-quality-value" style="min-width: 30px; max-width:30px"></td>
</tr>
<tr class="feature-disabled" id="stream-h264-bitrate">
<td>H.264 kbps:</td>
<td>
<input class="slider" disabled type="range" id="stream-h264-bitrate-slider">
</td>
<td class="value" id="stream-h264-bitrate-value" style="min-width: 30px; max-width:30px"></td>
</tr>
<tr>
<td>Max FPS:</td>
<td>
<input class="slider" disabled type="range" id="stream-desired-fps-slider">
</td>
<td class="value" id="stream-desired-fps-value">0</td>
<td class="value" id="stream-desired-fps-value" style="min-width: 30px; max-width:30px"></td>
</tr>
<tr class="feature-disabled" id="stream-mode">
<td>Video mode:</td>

8
web/kvm/navbar-system.pug
View File

@@ -21,11 +21,15 @@ li(class="right")
tr(id="stream-quality" class="feature-disabled")
td JPEG quality:
td #[input(disabled type="range" id="stream-quality-slider" class="slider")]
td(id="stream-quality-value" class="value") 80%
td(id="stream-quality-value" class="value" style="min-width: 30px; max-width:30px")
tr(id="stream-h264-bitrate" class="feature-disabled")
td H.264 kbps:
td #[input(disabled type="range" id="stream-h264-bitrate-slider" class="slider")]
td(id="stream-h264-bitrate-value" class="value" style="min-width: 30px; max-width:30px")
tr
td Max FPS:
td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")]
td(id="stream-desired-fps-value" class="value") 0
td(id="stream-desired-fps-value" class="value" style="min-width: 30px; max-width:30px")
tr(id="stream-mode" class="feature-disabled")
td Video mode:
td

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

@@ -387,6 +387,9 @@ export function Streamer() {
tools.sliderSetParams($("stream-quality-slider"), 5, 100, 5, 80);
tools.sliderSetOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
tools.sliderSetParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000);
tools.sliderSetOnUp($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value));
tools.sliderSetParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
tools.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
@@ -451,18 +454,18 @@ export function Streamer() {
if (state.streamer) {
wm.setElementEnabled($("stream-quality-slider"), true);
if ($("stream-quality-slider").value !== state.streamer.encoder.quality) {
$("stream-quality-slider").value = state.streamer.encoder.quality;
__updateQualityValue(state.streamer.encoder.quality);
}
__setIfChanged($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue);
$("stream-desired-fps-slider").min = state.limits.desired_fps.min;
$("stream-desired-fps-slider").max = state.limits.desired_fps.max;
wm.setElementEnabled($("stream-desired-fps-slider"), true);
if ($("stream-desired-fps-slider").value !== state.streamer.source.desired_fps) {
$("stream-desired-fps-slider").value = state.streamer.source.desired_fps;
__updateDesiredFpsValue(state.streamer.source.desired_fps);
if (state.features.h264) {
__setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate);
wm.setElementEnabled($("stream-h264-bitrate-slider"), true);
__setIfChanged($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue);
}
tools.featureSetEnabled($("stream-h264-bitrate"), state.features.h264);
__setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps);
wm.setElementEnabled($("stream-desired-fps-slider"), true);
__setIfChanged($("stream-desired-fps-slider"), state.streamer.source.desired_fps, __updateDesiredFpsValue);
let resolution_str = __makeStringResolution(state.streamer.source.resolution);
if (__makeStringResolution(__resolution) !== resolution_str) {
@@ -487,6 +490,7 @@ export function Streamer() {
} else {
wm.setElementEnabled($("stream-quality-slider"), false);
wm.setElementEnabled($("stream-h264-bitrate-slider"), false);
wm.setElementEnabled($("stream-desired-fps-slider"), false);
wm.setElementEnabled($("stream-resolution-selector"), false);
}
@@ -531,6 +535,18 @@ export function Streamer() {
}
};
var __setMinMax = function(el, limits) {
el.min = limits.min;
el.max = limits.max;
};
var __setIfChanged = function(el, value, callback) {
if (el.value !== value) {
el.value = value;
callback(value);
}
};
var __updateQualityValue = function(value) {
$("stream-quality-value").innerHTML = `${value}%`;
};
@@ -539,6 +555,10 @@ export function Streamer() {
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
};
var __updateH264BitrateValue = function(value) {
$("stream-h264-bitrate-value").innerHTML = value;
};
var __clickModeRadio = function() {
if (_Janus !== null) {
let mode = tools.radioGetValue("stream-mode-radio");