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> <td>
<input class="slider" disabled type="range" id="stream-quality-slider"> <input class="slider" disabled type="range" id="stream-quality-slider">
</td> </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>
<tr> <tr>
<td>Max FPS:</td> <td>Max FPS:</td>
<td> <td>
<input class="slider" disabled type="range" id="stream-desired-fps-slider"> <input class="slider" disabled type="range" id="stream-desired-fps-slider">
</td> </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>
<tr class="feature-disabled" id="stream-mode"> <tr class="feature-disabled" id="stream-mode">
<td>Video mode:</td> <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") tr(id="stream-quality" class="feature-disabled")
td JPEG quality: td JPEG quality:
td #[input(disabled type="range" id="stream-quality-slider" class="slider")] 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 tr
td Max FPS: td Max FPS:
td #[input(disabled type="range" id="stream-desired-fps-slider" class="slider")] 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") tr(id="stream-mode" class="feature-disabled")
td Video mode: td Video mode:
td 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.sliderSetParams($("stream-quality-slider"), 5, 100, 5, 80);
tools.sliderSetOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value)); 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.sliderSetParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
tools.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value)); tools.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
@@ -451,18 +454,18 @@ export function Streamer() {
if (state.streamer) { if (state.streamer) {
wm.setElementEnabled($("stream-quality-slider"), true); wm.setElementEnabled($("stream-quality-slider"), true);
if ($("stream-quality-slider").value !== state.streamer.encoder.quality) { __setIfChanged($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue);
$("stream-quality-slider").value = state.streamer.encoder.quality;
__updateQualityValue(state.streamer.encoder.quality);
}
$("stream-desired-fps-slider").min = state.limits.desired_fps.min; if (state.features.h264) {
$("stream-desired-fps-slider").max = state.limits.desired_fps.max; __setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate);
wm.setElementEnabled($("stream-desired-fps-slider"), true); wm.setElementEnabled($("stream-h264-bitrate-slider"), true);
if ($("stream-desired-fps-slider").value !== state.streamer.source.desired_fps) { __setIfChanged($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue);
$("stream-desired-fps-slider").value = state.streamer.source.desired_fps;
__updateDesiredFpsValue(state.streamer.source.desired_fps);
} }
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); let resolution_str = __makeStringResolution(state.streamer.source.resolution);
if (__makeStringResolution(__resolution) !== resolution_str) { if (__makeStringResolution(__resolution) !== resolution_str) {
@@ -487,6 +490,7 @@ export function Streamer() {
} else { } else {
wm.setElementEnabled($("stream-quality-slider"), false); wm.setElementEnabled($("stream-quality-slider"), false);
wm.setElementEnabled($("stream-h264-bitrate-slider"), false);
wm.setElementEnabled($("stream-desired-fps-slider"), false); wm.setElementEnabled($("stream-desired-fps-slider"), false);
wm.setElementEnabled($("stream-resolution-selector"), 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) { var __updateQualityValue = function(value) {
$("stream-quality-value").innerHTML = `${value}%`; $("stream-quality-value").innerHTML = `${value}%`;
}; };
@@ -539,6 +555,10 @@ export function Streamer() {
$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value); $("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
}; };
var __updateH264BitrateValue = function(value) {
$("stream-h264-bitrate-value").innerHTML = value;
};
var __clickModeRadio = function() { var __clickModeRadio = function() {
if (_Janus !== null) { if (_Janus !== null) {
let mode = tools.radioGetValue("stream-mode-radio"); let mode = tools.radioGetValue("stream-mode-radio");