h264 bitrate slider

3 files changed, 44 insertions, 13 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 5c580c6f..0b9f7c37 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -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>
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index 3d32c260..c9db94f4 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -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
diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 10e87190..66c78855 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -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);
+
+				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);
 
-				$("stream-desired-fps-slider").min = state.limits.desired_fps.min;
-				$("stream-desired-fps-slider").max = state.limits.desired_fps.max;
+				__setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps);
 				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);
-				}
+				__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");