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

stream refactoring, passing janus state

Browse Source
This commit is contained in:
Devaev Maxim 2021-05-06 22:36:33 +03:00
parent 3aa92a87d4
commit 384b444c02
2 changed files with 71 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/share/js/kvm/session.js
View File

@ -125,6 +125,8 @@ export function Session() {
tools.featureSetEnabled($("webterm"), has_webterm); tools.featureSetEnabled($("webterm"), has_webterm);
$("webterm-window").show_hook = show_hook; $("webterm-window").show_hook = show_hook;
$("webterm-window").close_hook = close_hook; $("webterm-window").close_hook = close_hook;
__streamer.setJanusEnabled(state.janus && (state.janus.enabled || state.janus.started));
}; };
var __formatTemp = function(temp) { var __formatTemp = function(temp) {

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

@ -40,11 +40,13 @@ function _MjpegStreamer(set_active_callback, set_inactive_callback, set_info_cal
var __timer = null; var __timer = null;
var __timer_retries = 0; var __timer_retries = 0;
var __janus_enabled = null;
/************************************************************************/ /************************************************************************/
self.ensureStream = function(state) { self.ensureStream = function(state) {
if (state && state.streamer) { if (state) {
__state = state.streamer; __state = state;
__findId(); __findId();
if (__id.length > 0 && __id in __state.stream.clients_stat) { if (__id.length > 0 && __id in __state.stream.clients_stat) {
__setActive(); __setActive();
@ -60,7 +62,10 @@ function _MjpegStreamer(set_active_callback, set_inactive_callback, set_info_cal
self.stopStream = function() { self.stopStream = function() {
self.ensureStream(null); self.ensureStream(null);
$("stream-image").src = "/share/png/blank-stream.png"; let blank = "/share/png/blank-stream.png";
if (!String.prototype.endsWith.call($("stream-image").src, blank)) {
$("stream-image").src = blank;
}
}; };
var __setActive = function() { var __setActive = function() {
@ -145,13 +150,12 @@ export function Streamer() {
/************************************************************************/ /************************************************************************/
var __janus_enabled = null;
var __mjpeg = null; var __mjpeg = null;
var __online = false; var __state = null;
var __resolution = {width: 640, height: 480}; var __resolution = {width: 640, height: 480};
var __state_for_invisible = null;
var __init__ = function() { var __init__ = function() {
__mjpeg = new _MjpegStreamer(__setActive, __setInactive, __setInfo); __mjpeg = new _MjpegStreamer(__setActive, __setInactive, __setInfo);
@ -168,75 +172,76 @@ export function Streamer() {
tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton); tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
tools.setOnClick($("stream-reset-button"), __clickResetButton); tools.setOnClick($("stream-reset-button"), __clickResetButton);
$("stream-window").show_hook = function() { $("stream-window").show_hook = () => __applyState(__state);
if (__state_for_invisible !== null) { $("stream-window").close_hook = () => __applyState(null);
self.setState(__state_for_invisible);
}
};
}; };
/************************************************************************/ /************************************************************************/
self.setState = function(state) { self.setJanusEnabled = function(enabled) {
if (!wm.isWindowVisible($("stream-window"))) { __janus_enabled = (!!window.RTCPeerConnection && enabled);
if (__state_for_invisible === null) { tools.info("Stream: Janus WebRTC Gateway state:", __janus_enabled);
__mjpeg.stopStream(); self.setState(__state);
} };
__state_for_invisible = state;
state = null;
} else {
__state_for_invisible = null;
}
self.setState = function(state) {
__state = state;
if (__janus_enabled !== null) {
__applyState(wm.isWindowVisible($("stream-window")) ? __state : null);
}
};
var __applyState = function(state) {
if (state) { if (state) {
tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0)); tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
tools.featureSetEnabled($("stream-resolution"), state.features.resolution); tools.featureSetEnabled($("stream-resolution"), state.features.resolution);
}
__online = (state && state.streamer && state.streamer.source.online); if (state.streamer) {
if (!$("stream-quality-slider").activated) {
if (state && state.streamer) { wm.setElementEnabled($("stream-quality-slider"), true);
if (!$("stream-quality-slider").activated) { if ($("stream-quality-slider").value !== state.streamer.encoder.quality) {
wm.setElementEnabled($("stream-quality-slider"), true); $("stream-quality-slider").value = state.streamer.encoder.quality;
if ($("stream-quality-slider").value !== state.streamer.encoder.quality) { __updateQualityValue(state.streamer.encoder.quality);
$("stream-quality-slider").value = state.streamer.encoder.quality;
__updateQualityValue(state.streamer.encoder.quality);
}
}
if (!$("stream-desired-fps-slider").activated) {
$("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);
}
}
let resolution_str = __makeStringResolution(state.streamer.source.resolution);
if (__makeStringResolution(__resolution) !== resolution_str) {
__resolution = state.streamer.source.resolution;
}
if (state.features.resolution) {
if ($("stream-resolution-selector").resolutions !== state.limits.available_resolutions) {
let resolutions_html = "";
for (let variant of state.limits.available_resolutions) {
resolutions_html += `<option value="${variant}">${variant}</option>`;
} }
if (!state.limits.available_resolutions.includes(resolution_str)) {
resolutions_html += `<option value="${resolution_str}">${resolution_str}</option>`;
}
$("stream-resolution-selector").innerHTML = resolutions_html;
$("stream-resolution-selector").resolutions = state.limits.available_resolutions;
} }
document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true;
wm.setElementEnabled($("stream-resolution-selector"), true);
}
}
__mjpeg.ensureStream(state); if (!$("stream-desired-fps-slider").activated) {
$("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);
}
}
let resolution_str = __makeStringResolution(state.streamer.source.resolution);
if (__makeStringResolution(__resolution) !== resolution_str) {
__resolution = state.streamer.source.resolution;
}
if (state.features.resolution) {
if ($("stream-resolution-selector").resolutions !== state.limits.available_resolutions) {
let resolutions_html = "";
for (let variant of state.limits.available_resolutions) {
resolutions_html += `<option value="${variant}">${variant}</option>`;
}
if (!state.limits.available_resolutions.includes(resolution_str)) {
resolutions_html += `<option value="${resolution_str}">${resolution_str}</option>`;
}
$("stream-resolution-selector").innerHTML = resolutions_html;
$("stream-resolution-selector").resolutions = state.limits.available_resolutions;
}
document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true;
wm.setElementEnabled($("stream-resolution-selector"), true);
}
}
__mjpeg.ensureStream(state.streamer);
} else {
__mjpeg.stopStream();
}
}; };
var __setActive = function() { var __setActive = function() {
@ -264,7 +269,7 @@ export function Streamer() {
let el_info = $("stream-info"); let el_info = $("stream-info");
if (is_active) { if (is_active) {
let title = "Stream &ndash; "; let title = "Stream &ndash; ";
if (!__online) { if (!online) {
title += "no signal / "; title += "no signal / ";
} }
title += __makeStringResolution(__resolution); title += __makeStringResolution(__resolution);