Issue #1076: Orientation options for H.264

PKGBUILD

@@ -91,7 +91,7 @@ depends=(
 	certbot
 	platform-io-access
 	raspberrypi-utils
-	"ustreamer>=6.1"
+	"ustreamer>=6.4"
 
 	# Systemd UDEV bug
 	"systemd>=248.3-2"

web/kvm/index.html

@@ -227,6 +227,21 @@
                 </div>
               </td>
             </tr>
+            <tr class="feature-disabled" id="stream-orient">
+              <td>Orientation:</td>
+              <td>
+                <div class="radio-box">
+                  <input checked type="radio" id="stream-orient-radio-0" name="stream-orient-radio" value="0">
+                  <label for="stream-orient-radio-0">Default</label>
+                  <input type="radio" id="stream-orient-radio-90" name="stream-orient-radio" value="90">
+                  <label for="stream-orient-radio-90">90&deg;</label>
+                  <input type="radio" id="stream-orient-radio-180" name="stream-orient-radio" value="180">
+                  <label for="stream-orient-radio-180">180&deg;</label>
+                  <input type="radio" id="stream-orient-radio-270" name="stream-orient-radio" value="270">
+                  <label for="stream-orient-radio-270">270&deg;</label>
+                </div>
+              </td>
+            </tr>
             <tr class="feature-disabled" id="stream-audio">
               <td>Audio volume:</td>
               <td class="value-slider">

web/kvm/navbar-system.pug

@@ -50,6 +50,18 @@ li(id="system-dropdown" class="right")
 						label(for="stream-mode-radio-mjpeg") MJPEG / HTTP
 						input(type="radio" id="stream-mode-radio-janus" name="stream-mode-radio" value="janus")
 						label(for="stream-mode-radio-janus") H.264 / WebRTC
+			tr(id="stream-orient" class="feature-disabled")
+				td Orientation:
+				td
+					div(class="radio-box")
+						input(checked type="radio" id="stream-orient-radio-0" name="stream-orient-radio" value="0")
+						label(for="stream-orient-radio-0") Default
+						input(type="radio" id="stream-orient-radio-90" name="stream-orient-radio" value="90")
+						label(for="stream-orient-radio-90") 90°
+						input(type="radio" id="stream-orient-radio-180" name="stream-orient-radio" value="180")
+						label(for="stream-orient-radio-180") 180°
+						input(type="radio" id="stream-orient-radio-270" name="stream-orient-radio" value="270")
+						label(for="stream-orient-radio-270") 270°
 			tr(id="stream-audio", class="feature-disabled")
 				td Audio volume:
 				td(class="value-slider") #[input(type="range" id="stream-audio-volume-slider" class="slider")]

web/share/js/kvm/stream.js

@@ -70,6 +70,19 @@ export function Streamer() {
 
 		tools.radio.setOnClick("stream-mode-radio", __clickModeRadio, false);
 
+		// Not getInt() because of radio is a string container.
+		// Also don't reset Janus at class init.
+		tools.radio.clickValue("stream-orient-radio", tools.storage.get("stream.orient", 0));
+		tools.radio.setOnClick("stream-orient-radio", function() {
+			if (__streamer.getMode() === "janus") { // Right now it's working only for H.264
+				let orient = parseInt(tools.radio.getValue("stream-orient-radio"));
+				tools.storage.setInt("stream.orient", orient);
+				if (__streamer.getOrientation() != orient) {
+					__resetStream();
+				}
+			}
+		}, false);
+
 		tools.slider.setParams($("stream-audio-volume-slider"), 0, 100, 1, 0, function(value) {
 			$("stream-video").muted = !value;
 			$("stream-video").volume = value / 100;
@@ -248,9 +261,12 @@ export function Streamer() {
 		}
 		__streamer.stopStream();
 		if (mode === "janus") {
-			__streamer = new JanusStreamer(__setActive, __setInactive, __setInfo, !$("stream-video").muted);
+			__streamer = new JanusStreamer(__setActive, __setInactive, __setInfo,
+				tools.storage.getInt("stream.orient", 0), !$("stream-video").muted);
+			tools.feature.setEnabled($("stream-orient"), true);
 		} else { // mjpeg
 			__streamer = new MjpegStreamer(__setActive, __setInactive, __setInfo);
+			tools.feature.setEnabled($("stream-orient"), false);
 			tools.feature.setEnabled($("stream-audio"), false); // Enabling in stream_janus.js
 		}
 		if (wm.isWindowVisible($("stream-window"))) {

web/share/js/kvm/stream_janus.js

@@ -29,7 +29,7 @@ import {tools, $} from "../tools.js";
 var _Janus = null;
 
 
-export function JanusStreamer(__setActive, __setInactive, __setInfo, __allow_audio) {
+export function JanusStreamer(__setActive, __setInactive, __setInfo, __orient, __allow_audio) {
 	var self = this;
 
 	var __stop = false;
@@ -45,6 +45,7 @@ export function JanusStreamer(__setActive, __setInactive, __setInfo, __allow_aud
 	var __state = null;
 	var __frames = 0;
 
+	self.getOrientation = () => __orient;
 	self.isAudioAllowed = () => __allow_audio;
 
 	self.getName = () => (__allow_audio ? "H.264 + Audio" : "H.264");
@@ -329,9 +330,12 @@ export function JanusStreamer(__setActive, __setInactive, __setInfo, __allow_aud
 
 	var __sendWatch = function() {
 		if (__handle) {
-			__logInfo(`Sending WATCH(audio=${__allow_audio}) + FEATURES ...`);
+			__logInfo(`Sending WATCH(orient=${__orient}, audio=${__allow_audio}) + FEATURES ...`);
 			__handle.send({"message": {"request": "features"}});
-			__handle.send({"message": {"request": "watch", "params": {"audio": __allow_audio}}});
+			__handle.send({"message": {"request": "watch", "params": {
+				"orientation": __orient,
+				"audio": __allow_audio,
+			}}});
 		}
 	};
 

web/share/js/tools.js

@@ -392,6 +392,9 @@ export var tools = new function() {
 			},
 			"set": (key, value) => window.localStorage.setItem(key, value),
 
+			"getInt": (key, default_value) => parseInt(self.storage.get(key, default_value)),
+			"setInt": (key, value) => self.storage.set(key, value),
+
 			"getBool": (key, default_value) => !!parseInt(self.storage.get(key, (default_value ? "1" : "0"))),
 			"setBool": (key, value) => self.storage.set(key, (value ? "1" : "0")),