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

web: orientation changing for media

Browse Source
This commit is contained in:
Maxim Devaev 2025-02-03 09:51:25 +02:00
parent c8df621172
commit 1c179da857
2 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,10 +72,10 @@ 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.
// Also don't reset Streamer 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
if (["janus", "media"].includes(__streamer.getMode())) {
let orient = parseInt(tools.radio.getValue("stream-orient-radio"));
tools.storage.setInt("stream.orient", orient);
if (__streamer.getOrientation() !== orient) {
@ -299,19 +299,22 @@ export function Streamer() {
mode = __streamer.getMode();
}
__streamer.stopStream();
let orient = tools.storage.getInt("stream.orient", 0);
if (mode === "janus") {
__streamer = new JanusStreamer(__setActive, __setInactive, __setInfo,
tools.storage.getInt("stream.orient", 0), !$("stream-video").muted, $("stream-mic-switch").checked);
let allow_audio = !$("stream-video").muted;
let allow_mic = $("stream-mic-switch").checked;
__streamer = new JanusStreamer(__setActive, __setInactive, __setInfo, orient, allow_audio, allow_mic);
// Firefox doesn't support RTP orientation:
// - https://bugzilla.mozilla.org/show_bug.cgi?id=1316448
tools.feature.setEnabled($("stream-orient"), !tools.browser.is_firefox);
} else {
if (mode === "media") {
__streamer = new MediaStreamer(__setActive, __setInactive, __setInfo);
__streamer = new MediaStreamer(__setActive, __setInactive, __setInfo, orient);
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
tools.feature.setEnabled($("stream-mic"), false); // Ditto
}

63
web/share/js/kvm/stream_media.js
View File

@ -26,7 +26,7 @@
import {tools, $} from "../tools.js";
export function MediaStreamer(__setActive, __setInactive, __setInfo) {
export function MediaStreamer(__setActive, __setInactive, __setInfo, __orient) {
var self = this;
/************************************************************************/
@ -43,11 +43,12 @@ export function MediaStreamer(__setActive, __setInactive, __setInfo) {
var __ctx = __canvas.getContext("2d");
var __state = null;
var __frames = 0;
var __fps_accum = 0;
/************************************************************************/
self.getName = () => "HTTP H.264";
self.getOrientation = () => __orient;
self.getName = () => "Direct H.264";
self.getMode = () => "media";
self.getResolution = function() {
@ -110,8 +111,8 @@ export function MediaStreamer(__setActive, __setInactive, __setInfo) {
if (__decoder && __decoder.state === "configured") {
let online = !!(__state && __state.source.online);
let info = `${__frames} fps dynamic`;
__frames = 0;
let info = `${__fps_accum} fps dynamic`;
__fps_accum = 0;
__setInfo(true, online, info);
}
} catch (ex) {
@ -145,7 +146,7 @@ export function MediaStreamer(__setActive, __setInactive, __setInfo) {
__decoder = null;
}
__missed_heartbeats = 0;
__frames = 0;
__fps_accum = 0;
__ws = null;
if (!__stop) {
setTimeout(() => __ensureMedia(true), 1000);
@ -203,18 +204,7 @@ export function MediaStreamer(__setActive, __setInactive, __setInfo) {
}
__decoder = new VideoDecoder({ // eslint-disable-line no-undef
"output": (frame) => {
try {
if (__canvas.width !== frame.displayWidth || __canvas.height !== frame.displayHeight) {
__canvas.width = frame.displayWidth;
__canvas.height = frame.displayHeight;
}
__ctx.drawImage(frame, 0, 0);
__frames += 1;
} finally {
frame.close();
}
},
"output": __drawFrame,
"error": (err) => __logInfo(err.message),
});
__codec = `avc1.${formats.h264.profile_level_id}`;
@ -225,6 +215,43 @@ export function MediaStreamer(__setActive, __setInactive, __setInfo) {
}));
};
var __drawFrame = function(frame) {
try {
let width = frame.displayWidth;
let height = frame.displayHeight;
switch (__orient) {
case 90: case 270:
width = frame.displayHeight;
height = frame.displayWidth;
}
if (__canvas.width !== width || __canvas.height !== height) {
__canvas.width = width;
__canvas.height = height;
}
if (__orient === 0) {
__ctx.drawImage(frame, 0, 0);
} else {
__ctx.save();
try {
switch(__orient) {
case 90: __ctx.translate(0, height); __ctx.rotate(-Math.PI / 2); break;
case 180: __ctx.translate(width, height); __ctx.rotate(-Math.PI); break;
case 270: __ctx.translate(width, 0); __ctx.rotate(Math.PI / 2); break;
}
__ctx.drawImage(frame, 0, 0);
} finally {
__ctx.restore();
}
}
__fps_accum += 1;
} finally {
frame.close();
}
};
var __decoderDestroy = function() {
if (__decoder !== null) {
__decoder.close();