mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 17:20:30 +08:00
web: split stream.js
This commit is contained in:
Maxim Devaev
parent
1d7ef25a0b
commit
6a339238ff
@ -26,437 +26,9 @@
|
|||||||
import {tools, $} from "../tools.js";
|
import {tools, $} from "../tools.js";
|
||||||
import {wm} from "../wm.js";
|
import {wm} from "../wm.js";
|
||||||
|
|
||||||
|
import {JanusStreamer} from "./stream_janus.js";
|
||||||
|
import {MjpegStreamer} from "./stream_mjpeg.js";
|
||||||
|
|
||||||
var _Janus = null;
|
|
||||||
|
|
||||||
|
|
||||||
function _JanusStreamer(__setActive, __setInactive, __setInfo) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
var __stop = false;
|
|
||||||
var __ensuring = false;
|
|
||||||
|
|
||||||
var __janus = null;
|
|
||||||
var __handle = null;
|
|
||||||
|
|
||||||
var __retry_ensure_timeout = null;
|
|
||||||
var __retry_emsg_timeout = null;
|
|
||||||
var __info_interval = null;
|
|
||||||
|
|
||||||
var __state = null;
|
|
||||||
var __frames = 0;
|
|
||||||
|
|
||||||
self.getName = () => "H.264";
|
|
||||||
self.getMode = () => "janus";
|
|
||||||
|
|
||||||
self.getResolution = function() {
|
|
||||||
let el = $("stream-video");
|
|
||||||
return {
|
|
||||||
// Разрешение видео или элемента
|
|
||||||
"real_width": (el.videoWidth || el.offsetWidth),
|
|
||||||
"real_height": (el.videoHeight || el.offsetHeight),
|
|
||||||
"view_width": el.offsetWidth,
|
|
||||||
"view_height": el.offsetHeight,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
self.ensureStream = function(state) {
|
|
||||||
__state = state;
|
|
||||||
__stop = false;
|
|
||||||
__ensureJanus(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
self.stopStream = function() {
|
|
||||||
__stop = true;
|
|
||||||
__destroyJanus();
|
|
||||||
};
|
|
||||||
|
|
||||||
var __ensureJanus = function(internal) {
|
|
||||||
if (__janus === null && !__stop && (!__ensuring || internal)) {
|
|
||||||
__setInactive();
|
|
||||||
__setInfo(false, false, "");
|
|
||||||
__ensuring = true;
|
|
||||||
__logInfo("Starting Janus ...");
|
|
||||||
__janus = new _Janus({
|
|
||||||
"server": `${tools.is_https ? "wss" : "ws"}://${location.host}/janus/ws`,
|
|
||||||
"ipv6": true,
|
|
||||||
"destroyOnUnload": false,
|
|
||||||
"success": __attachJanus,
|
|
||||||
"error": function(error) {
|
|
||||||
__logError(error);
|
|
||||||
__setInfo(false, false, error);
|
|
||||||
__finishJanus();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __finishJanus = function() {
|
|
||||||
if (__stop) {
|
|
||||||
if (__retry_ensure_timeout !== null) {
|
|
||||||
clearTimeout(__retry_ensure_timeout);
|
|
||||||
__retry_ensure_timeout = null;
|
|
||||||
}
|
|
||||||
__ensuring = false;
|
|
||||||
} else {
|
|
||||||
if (__retry_ensure_timeout === null) {
|
|
||||||
__retry_ensure_timeout = setTimeout(function() {
|
|
||||||
__retry_ensure_timeout = null;
|
|
||||||
__ensureJanus(true);
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
__stopRetryEmsgInterval();
|
|
||||||
__stopInfoInterval();
|
|
||||||
__handle = null;
|
|
||||||
__janus = null;
|
|
||||||
__setInactive();
|
|
||||||
if (__stop) {
|
|
||||||
__setInfo(false, false, "");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __destroyJanus = function() {
|
|
||||||
if (__handle && __handle.webrtcStuff && __handle.webrtcStuff.remoteStream) {
|
|
||||||
for (let track of __handle.webrtcStuff.remoteStream.getTracks()) {
|
|
||||||
track.stop();
|
|
||||||
__handle.webrtcStuff.remoteStream.removeTrack(track);
|
|
||||||
}
|
|
||||||
__handle.webrtcStuff.remoteStream = null;
|
|
||||||
}
|
|
||||||
$("stream-video").srcObject = null;
|
|
||||||
__setAudioEnabled(false);
|
|
||||||
if (__janus !== null) {
|
|
||||||
__janus.destroy();
|
|
||||||
}
|
|
||||||
__finishJanus();
|
|
||||||
};
|
|
||||||
|
|
||||||
var __attachJanus = function() {
|
|
||||||
if (__janus === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
__janus.attach({
|
|
||||||
"plugin": "janus.plugin.ustreamer",
|
|
||||||
"opaqueId": "oid-" + _Janus.randomString(12),
|
|
||||||
|
|
||||||
"success": function(handle) {
|
|
||||||
__handle = handle;
|
|
||||||
__logInfo("uStreamer attached:", handle.getPlugin(), handle.getId());
|
|
||||||
__sendWatch();
|
|
||||||
},
|
|
||||||
|
|
||||||
"error": function(error) {
|
|
||||||
__logError("Can't attach uStreamer: ", error);
|
|
||||||
__setInfo(false, false, error);
|
|
||||||
__destroyJanus();
|
|
||||||
},
|
|
||||||
|
|
||||||
"iceState": function(state) {
|
|
||||||
__logInfo("ICE state changed to", state);
|
|
||||||
// Если раскомментировать, то он начнет дрючить соединение,
|
|
||||||
// так как каллбек вызывает сильно после завершения работы
|
|
||||||
/*if (state === "disconnected") {
|
|
||||||
__destroyJanus();
|
|
||||||
}*/
|
|
||||||
},
|
|
||||||
|
|
||||||
"webrtcState": function(up) {
|
|
||||||
__logInfo("Janus says our WebRTC PeerConnection is", (up ? "up" : "down"), "now");
|
|
||||||
if (up) {
|
|
||||||
__sendKeyRequired();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"onmessage": function(msg, jsep) {
|
|
||||||
__stopRetryEmsgInterval();
|
|
||||||
|
|
||||||
if (msg.result) {
|
|
||||||
__logInfo("Got uStreamer result message:", msg.result.status); // starting, started, stopped
|
|
||||||
if (msg.result.status === "started") {
|
|
||||||
__setActive();
|
|
||||||
__setInfo(false, false, "");
|
|
||||||
} else if (msg.result.status === "stopped") {
|
|
||||||
__setInactive();
|
|
||||||
__setInfo(false, false, "");
|
|
||||||
} else if (msg.result.status === "features") {
|
|
||||||
__setAudioEnabled(msg.result.features.audio);
|
|
||||||
}
|
|
||||||
} else if (msg.error_code || msg.error) {
|
|
||||||
__logError("Got uStreamer error message:", msg.error_code, "-", msg.error);
|
|
||||||
__setInfo(false, false, msg.error);
|
|
||||||
if (__retry_emsg_timeout === null) {
|
|
||||||
__retry_emsg_timeout = setTimeout(function() {
|
|
||||||
if (!__stop) {
|
|
||||||
__sendStop();
|
|
||||||
__sendWatch();
|
|
||||||
}
|
|
||||||
__retry_emsg_timeout = null;
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
__logInfo("Got uStreamer other message:", msg);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (jsep) {
|
|
||||||
__logInfo("Handling SDP:", jsep);
|
|
||||||
__handle.createAnswer({
|
|
||||||
"jsep": jsep,
|
|
||||||
"media": {"audioSend": false, "videoSend": false, "data": false},
|
|
||||||
|
|
||||||
"success": function(jsep) {
|
|
||||||
__logInfo("Got SDP:", jsep);
|
|
||||||
__sendStart(jsep);
|
|
||||||
},
|
|
||||||
|
|
||||||
"error": function(error) {
|
|
||||||
__logInfo("Error on SDP handling:", error);
|
|
||||||
__setInfo(false, false, error);
|
|
||||||
//__destroyJanus();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"onremotestream": function(stream) {
|
|
||||||
__logInfo("Got a remote stream:", stream);
|
|
||||||
_Janus.attachMediaStream($("stream-video"), stream);
|
|
||||||
__sendKeyRequired();
|
|
||||||
__startInfoInterval();
|
|
||||||
// FIXME: Задержка уменьшается, но начинаются заикания на кейфреймах.
|
|
||||||
// - https://github.com/Glimesh/janus-ftl-plugin/issues/101
|
|
||||||
/*if (__handle && __handle.webrtcStuff && __handle.webrtcStuff.pc) {
|
|
||||||
for (let receiver of __handle.webrtcStuff.pc.getReceivers()) {
|
|
||||||
if (receiver.track && receiver.track.kind === "video" && receiver.playoutDelayHint !== undefined) {
|
|
||||||
receiver.playoutDelayHint = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
},
|
|
||||||
|
|
||||||
"oncleanup": function() {
|
|
||||||
__logInfo("Got a cleanup notification");
|
|
||||||
__stopInfoInterval();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var __setAudioEnabled = function(enabled) {
|
|
||||||
tools.feature.setEnabled($("stream-audio"), enabled);
|
|
||||||
};
|
|
||||||
|
|
||||||
var __startInfoInterval = function() {
|
|
||||||
__stopInfoInterval();
|
|
||||||
__setActive();
|
|
||||||
__updateInfo();
|
|
||||||
__info_interval = setInterval(__updateInfo, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
var __stopInfoInterval = function() {
|
|
||||||
if (__info_interval !== null) {
|
|
||||||
clearInterval(__info_interval);
|
|
||||||
}
|
|
||||||
__info_interval = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
var __stopRetryEmsgInterval = function() {
|
|
||||||
if (__retry_emsg_timeout !== null) {
|
|
||||||
clearTimeout(__retry_emsg_timeout);
|
|
||||||
__retry_emsg_timeout = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __updateInfo = function() {
|
|
||||||
if (__handle !== null) {
|
|
||||||
let online = !!(__state && __state.source && __state.source.online);
|
|
||||||
let info = "";
|
|
||||||
if (__handle !== null) {
|
|
||||||
// https://wiki.whatwg.org/wiki/Video_Metrics
|
|
||||||
let frames = null;
|
|
||||||
let el = $("stream-video");
|
|
||||||
if (el.webkitDecodedFrameCount !== undefined) {
|
|
||||||
frames = el.webkitDecodedFrameCount;
|
|
||||||
} else if (el.mozPaintedFrames !== undefined) {
|
|
||||||
frames = el.mozPaintedFrames;
|
|
||||||
}
|
|
||||||
if (frames !== null) {
|
|
||||||
info = `${Math.max(0, frames - __frames)} fps dynamic`;
|
|
||||||
__frames = frames;
|
|
||||||
} else {
|
|
||||||
info = `${__handle.getBitrate()}`.replace("kbits/sec", "kbps");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
__setInfo(true, online, info);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __sendWatch = function() {
|
|
||||||
if (__handle) {
|
|
||||||
__logInfo("Sending WATCH + FEATURES ...");
|
|
||||||
__handle.send({"message": {"request": "features"}});
|
|
||||||
__handle.send({"message": {"request": "watch", "params": {"audio": true}}});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __sendStart = function(jsep) {
|
|
||||||
if (__handle) {
|
|
||||||
__logInfo("Sending START ...");
|
|
||||||
__handle.send({"message": {"request": "start"}, "jsep": jsep});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __sendKeyRequired = function() {
|
|
||||||
/*if (__handle) {
|
|
||||||
// На этом шаге мы говорим что стрим пошел и надо запросить кейфрейм
|
|
||||||
__logInfo("Sending KEY_REQUIRED ...");
|
|
||||||
__handle.send({message: {request: "key_required"}});
|
|
||||||
}*/
|
|
||||||
};
|
|
||||||
|
|
||||||
var __sendStop = function() {
|
|
||||||
__stopInfoInterval();
|
|
||||||
if (__handle) {
|
|
||||||
__logInfo("Sending STOP ...");
|
|
||||||
__handle.send({"message": {"request": "stop"}});
|
|
||||||
__handle.hangup();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __logInfo = (...args) => tools.info("Stream [Janus]:", ...args);
|
|
||||||
var __logError = (...args) => tools.error("Stream [Janus]:", ...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _MjpegStreamer(__setActive, __setInactive, __setInfo) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
/************************************************************************/
|
|
||||||
|
|
||||||
var __key = tools.makeId();
|
|
||||||
var __id = "";
|
|
||||||
var __fps = -1;
|
|
||||||
var __state = null;
|
|
||||||
|
|
||||||
var __timer = null;
|
|
||||||
var __timer_retries = 0;
|
|
||||||
|
|
||||||
/************************************************************************/
|
|
||||||
|
|
||||||
self.getName = () => "MJPEG";
|
|
||||||
self.getMode = () => "mjpeg";
|
|
||||||
|
|
||||||
self.getResolution = function() {
|
|
||||||
let el = $("stream-image");
|
|
||||||
return {
|
|
||||||
"real_width": el.naturalWidth,
|
|
||||||
"real_height": el.naturalHeight,
|
|
||||||
"view_width": el.offsetWidth,
|
|
||||||
"view_height": el.offsetHeight,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
self.ensureStream = function(state) {
|
|
||||||
if (state) {
|
|
||||||
__state = state;
|
|
||||||
__findId();
|
|
||||||
if (__id.length > 0 && __id in __state.stream.clients_stat) {
|
|
||||||
__setStreamActive();
|
|
||||||
__stopChecking();
|
|
||||||
} else {
|
|
||||||
__ensureChecking();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
__stopChecking();
|
|
||||||
__setStreamInactive();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
self.stopStream = function() {
|
|
||||||
self.ensureStream(null);
|
|
||||||
let blank = "/share/png/blank-stream.png";
|
|
||||||
if (!String.prototype.endsWith.call($("stream-image").src, blank)) {
|
|
||||||
$("stream-image").src = blank;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __setStreamActive = function() {
|
|
||||||
let old_fps = __fps;
|
|
||||||
__fps = __state.stream.clients_stat[__id].fps;
|
|
||||||
if (old_fps < 0) {
|
|
||||||
__logInfo("Active");
|
|
||||||
__setActive();
|
|
||||||
}
|
|
||||||
__setInfo(true, __state.source.online, `${__fps} fps dynamic`);
|
|
||||||
};
|
|
||||||
|
|
||||||
var __setStreamInactive = function() {
|
|
||||||
let old_fps = __fps;
|
|
||||||
__key = tools.makeId();
|
|
||||||
__id = "";
|
|
||||||
__fps = -1;
|
|
||||||
__state = null;
|
|
||||||
if (old_fps >= 0) {
|
|
||||||
__logInfo("Inactive");
|
|
||||||
__setInactive();
|
|
||||||
__setInfo(false, false, "");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __ensureChecking = function() {
|
|
||||||
if (!__timer) {
|
|
||||||
__timer_retries = 10;
|
|
||||||
__timer = setInterval(__checkStream, 100);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __stopChecking = function() {
|
|
||||||
if (__timer) {
|
|
||||||
clearInterval(__timer);
|
|
||||||
}
|
|
||||||
__timer = null;
|
|
||||||
__timer_retries = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
var __findId = function() {
|
|
||||||
let stream_client = tools.cookies.get("stream_client");
|
|
||||||
if (__id.length === 0 && stream_client && stream_client.startsWith(__key + "/")) {
|
|
||||||
__logInfo("Found acceptable stream_client cookie:", stream_client);
|
|
||||||
__id = stream_client.slice(stream_client.indexOf("/") + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __checkStream = function() {
|
|
||||||
__findId();
|
|
||||||
|
|
||||||
if (__id.legnth > 0 && __id in __state.stream.clients_stat) {
|
|
||||||
__setStreamActive();
|
|
||||||
__stopChecking();
|
|
||||||
|
|
||||||
} else if (__id.length > 0 && __timer_retries >= 0) {
|
|
||||||
__timer_retries -= 1;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
__setStreamInactive();
|
|
||||||
__stopChecking();
|
|
||||||
|
|
||||||
let path = `/streamer/stream?key=${__key}`;
|
|
||||||
if (tools.browser.is_safari || tools.browser.is_ios) {
|
|
||||||
// uStreamer fix for WebKit
|
|
||||||
__logInfo("Using dual_final_frames=1 to fix WebKit bugs");
|
|
||||||
path += "&dual_final_frames=1";
|
|
||||||
} else if (tools.browser.is_chrome || tools.browser.is_blink) {
|
|
||||||
// uStreamer fix for Blink https://bugs.chromium.org/p/chromium/issues/detail?id=527446
|
|
||||||
__logInfo("Using advance_headers=1 to fix Blink bugs");
|
|
||||||
path += "&advance_headers=1";
|
|
||||||
}
|
|
||||||
|
|
||||||
__logInfo("Refreshing ...");
|
|
||||||
$("stream-image").src = path;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var __logInfo = (...args) => tools.info("Stream [MJPEG]:", ...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Streamer() {
|
export function Streamer() {
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -470,7 +42,7 @@ export function Streamer() {
|
|||||||
var __resolution = {"width": 640, "height": 480};
|
var __resolution = {"width": 640, "height": 480};
|
||||||
|
|
||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
__streamer = new _MjpegStreamer(__setActive, __setInactive, __setInfo);
|
__streamer = new MjpegStreamer(__setActive, __setInactive, __setInfo);
|
||||||
|
|
||||||
$("stream-led").title = "Stream inactive";
|
$("stream-led").title = "Stream inactive";
|
||||||
|
|
||||||
@ -536,40 +108,24 @@ export function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
self.setJanusEnabled = function(enabled) {
|
self.setJanusEnabled = function(enabled) {
|
||||||
let has_webrtc = !!window.RTCPeerConnection;
|
let has_webrtc = JanusStreamer.is_webrtc_available();
|
||||||
|
let has_h264 = JanusStreamer.is_h264_available();
|
||||||
let has_h264 = true;
|
|
||||||
if ($("stream-video").canPlayType) {
|
|
||||||
has_h264 = $("stream-video").canPlayType("video/mp4; codecs=\"avc1.42E01F\"");
|
|
||||||
}
|
|
||||||
|
|
||||||
let set_enabled = function() {
|
let set_enabled = function() {
|
||||||
tools.hidden.setVisible($("stream-message-no-webrtc"), !has_webrtc);
|
tools.hidden.setVisible($("stream-message-no-webrtc"), !has_webrtc);
|
||||||
tools.hidden.setVisible($("stream-message-no-h264"), !has_h264);
|
tools.hidden.setVisible($("stream-message-no-h264"), !has_h264);
|
||||||
__janus_enabled = (enabled && has_webrtc && _Janus !== null); // Don't check has_h264 for sure
|
__janus_enabled = (enabled && has_webrtc && JanusStreamer.is_imported()); // Don't check has_h264 for sure
|
||||||
tools.feature.setEnabled($("stream-mode"), __janus_enabled);
|
tools.feature.setEnabled($("stream-mode"), __janus_enabled);
|
||||||
tools.info(`Stream: Janus WebRTC state: enabled=${enabled}, webrtc=${has_webrtc}, h264=${has_h264}, imported=${!!_Janus}`);
|
tools.info(
|
||||||
|
`Stream: Janus WebRTC state: enabled=${enabled},`
|
||||||
|
+ ` webrtc=${has_webrtc}, h264=${has_h264}, imported=${JanusStreamer.is_imported()}`
|
||||||
|
);
|
||||||
tools.radio.clickValue("stream-mode-radio", tools.storage.get("stream.mode", "janus"));
|
tools.radio.clickValue("stream-mode-radio", tools.storage.get("stream.mode", "janus"));
|
||||||
self.setState(__state);
|
self.setState(__state);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (enabled && has_webrtc) {
|
if (enabled && has_webrtc) {
|
||||||
if (_Janus === null) {
|
JanusStreamer.ensure_janus(set_enabled);
|
||||||
import("./janus.js").then((module) => {
|
|
||||||
module.Janus.init({
|
|
||||||
"debug": "all",
|
|
||||||
"callback": function() {
|
|
||||||
_Janus = module.Janus;
|
|
||||||
set_enabled();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}).catch((err) => {
|
|
||||||
tools.error("Stream: Can't import Janus module:", err);
|
|
||||||
set_enabled();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
set_enabled();
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
set_enabled();
|
set_enabled();
|
||||||
}
|
}
|
||||||
@ -683,7 +239,7 @@ export function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickModeRadio = function() {
|
var __clickModeRadio = function() {
|
||||||
if (_Janus !== null) {
|
if (JanusStreamer.is_imported()) {
|
||||||
let mode = tools.radio.getValue("stream-mode-radio");
|
let mode = tools.radio.getValue("stream-mode-radio");
|
||||||
tools.storage.set("stream.mode", mode);
|
tools.storage.set("stream.mode", mode);
|
||||||
if (mode !== __streamer.getMode()) {
|
if (mode !== __streamer.getMode()) {
|
||||||
@ -691,10 +247,10 @@ export function Streamer() {
|
|||||||
tools.hidden.setVisible($("stream-video"), (mode === "janus"));
|
tools.hidden.setVisible($("stream-video"), (mode === "janus"));
|
||||||
if (mode === "janus") {
|
if (mode === "janus") {
|
||||||
__streamer.stopStream();
|
__streamer.stopStream();
|
||||||
__streamer = new _JanusStreamer(__setActive, __setInactive, __setInfo);
|
__streamer = new JanusStreamer(__setActive, __setInactive, __setInfo);
|
||||||
} else { // mjpeg
|
} else { // mjpeg
|
||||||
__streamer.stopStream();
|
__streamer.stopStream();
|
||||||
__streamer = new _MjpegStreamer(__setActive, __setInactive, __setInfo);
|
__streamer = new MjpegStreamer(__setActive, __setInactive, __setInfo);
|
||||||
}
|
}
|
||||||
if (wm.isWindowVisible($("stream-window"))) {
|
if (wm.isWindowVisible($("stream-window"))) {
|
||||||
__streamer.ensureStream(__state);
|
__streamer.ensureStream(__state);
|
||||||
|
|||||||
362
web/share/js/kvm/stream_janus.js
Normal file
362
web/share/js/kvm/stream_janus.js
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
# #
|
||||||
|
# KVMD - The main PiKVM daemon. #
|
||||||
|
# #
|
||||||
|
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
|
||||||
|
# #
|
||||||
|
# This program is free software: you can redistribute it and/or modify #
|
||||||
|
# it under the terms of the GNU General Public License as published by #
|
||||||
|
# the Free Software Foundation, either version 3 of the License, or #
|
||||||
|
# (at your option) any later version. #
|
||||||
|
# #
|
||||||
|
# This program is distributed in the hope that it will be useful, #
|
||||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
|
||||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
|
||||||
|
# GNU General Public License for more details. #
|
||||||
|
# #
|
||||||
|
# You should have received a copy of the GNU General Public License #
|
||||||
|
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
|
||||||
|
# #
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
import {tools, $} from "../tools.js";
|
||||||
|
|
||||||
|
|
||||||
|
var _Janus = null;
|
||||||
|
|
||||||
|
|
||||||
|
export function JanusStreamer(__setActive, __setInactive, __setInfo) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var __stop = false;
|
||||||
|
var __ensuring = false;
|
||||||
|
|
||||||
|
var __janus = null;
|
||||||
|
var __handle = null;
|
||||||
|
|
||||||
|
var __retry_ensure_timeout = null;
|
||||||
|
var __retry_emsg_timeout = null;
|
||||||
|
var __info_interval = null;
|
||||||
|
|
||||||
|
var __state = null;
|
||||||
|
var __frames = 0;
|
||||||
|
|
||||||
|
self.getName = () => "H.264";
|
||||||
|
self.getMode = () => "janus";
|
||||||
|
|
||||||
|
self.getResolution = function() {
|
||||||
|
let el = $("stream-video");
|
||||||
|
return {
|
||||||
|
// Разрешение видео или элемента
|
||||||
|
"real_width": (el.videoWidth || el.offsetWidth),
|
||||||
|
"real_height": (el.videoHeight || el.offsetHeight),
|
||||||
|
"view_width": el.offsetWidth,
|
||||||
|
"view_height": el.offsetHeight,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
self.ensureStream = function(state) {
|
||||||
|
__state = state;
|
||||||
|
__stop = false;
|
||||||
|
__ensureJanus(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.stopStream = function() {
|
||||||
|
__stop = true;
|
||||||
|
__destroyJanus();
|
||||||
|
};
|
||||||
|
|
||||||
|
var __ensureJanus = function(internal) {
|
||||||
|
if (__janus === null && !__stop && (!__ensuring || internal)) {
|
||||||
|
__setInactive();
|
||||||
|
__setInfo(false, false, "");
|
||||||
|
__ensuring = true;
|
||||||
|
__logInfo("Starting Janus ...");
|
||||||
|
__janus = new _Janus({
|
||||||
|
"server": `${tools.is_https ? "wss" : "ws"}://${location.host}/janus/ws`,
|
||||||
|
"ipv6": true,
|
||||||
|
"destroyOnUnload": false,
|
||||||
|
"success": __attachJanus,
|
||||||
|
"error": function(error) {
|
||||||
|
__logError(error);
|
||||||
|
__setInfo(false, false, error);
|
||||||
|
__finishJanus();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __finishJanus = function() {
|
||||||
|
if (__stop) {
|
||||||
|
if (__retry_ensure_timeout !== null) {
|
||||||
|
clearTimeout(__retry_ensure_timeout);
|
||||||
|
__retry_ensure_timeout = null;
|
||||||
|
}
|
||||||
|
__ensuring = false;
|
||||||
|
} else {
|
||||||
|
if (__retry_ensure_timeout === null) {
|
||||||
|
__retry_ensure_timeout = setTimeout(function() {
|
||||||
|
__retry_ensure_timeout = null;
|
||||||
|
__ensureJanus(true);
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
__stopRetryEmsgInterval();
|
||||||
|
__stopInfoInterval();
|
||||||
|
__handle = null;
|
||||||
|
__janus = null;
|
||||||
|
__setInactive();
|
||||||
|
if (__stop) {
|
||||||
|
__setInfo(false, false, "");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __destroyJanus = function() {
|
||||||
|
if (__handle && __handle.webrtcStuff && __handle.webrtcStuff.remoteStream) {
|
||||||
|
for (let track of __handle.webrtcStuff.remoteStream.getTracks()) {
|
||||||
|
track.stop();
|
||||||
|
__handle.webrtcStuff.remoteStream.removeTrack(track);
|
||||||
|
}
|
||||||
|
__handle.webrtcStuff.remoteStream = null;
|
||||||
|
}
|
||||||
|
$("stream-video").srcObject = null;
|
||||||
|
__setAudioEnabled(false);
|
||||||
|
if (__janus !== null) {
|
||||||
|
__janus.destroy();
|
||||||
|
}
|
||||||
|
__finishJanus();
|
||||||
|
};
|
||||||
|
|
||||||
|
var __attachJanus = function() {
|
||||||
|
if (__janus === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
__janus.attach({
|
||||||
|
"plugin": "janus.plugin.ustreamer",
|
||||||
|
"opaqueId": "oid-" + _Janus.randomString(12),
|
||||||
|
|
||||||
|
"success": function(handle) {
|
||||||
|
__handle = handle;
|
||||||
|
__logInfo("uStreamer attached:", handle.getPlugin(), handle.getId());
|
||||||
|
__sendWatch();
|
||||||
|
},
|
||||||
|
|
||||||
|
"error": function(error) {
|
||||||
|
__logError("Can't attach uStreamer: ", error);
|
||||||
|
__setInfo(false, false, error);
|
||||||
|
__destroyJanus();
|
||||||
|
},
|
||||||
|
|
||||||
|
"iceState": function(state) {
|
||||||
|
__logInfo("ICE state changed to", state);
|
||||||
|
// Если раскомментировать, то он начнет дрючить соединение,
|
||||||
|
// так как каллбек вызывает сильно после завершения работы
|
||||||
|
/*if (state === "disconnected") {
|
||||||
|
__destroyJanus();
|
||||||
|
}*/
|
||||||
|
},
|
||||||
|
|
||||||
|
"webrtcState": function(up) {
|
||||||
|
__logInfo("Janus says our WebRTC PeerConnection is", (up ? "up" : "down"), "now");
|
||||||
|
if (up) {
|
||||||
|
__sendKeyRequired();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"onmessage": function(msg, jsep) {
|
||||||
|
__stopRetryEmsgInterval();
|
||||||
|
|
||||||
|
if (msg.result) {
|
||||||
|
__logInfo("Got uStreamer result message:", msg.result.status); // starting, started, stopped
|
||||||
|
if (msg.result.status === "started") {
|
||||||
|
__setActive();
|
||||||
|
__setInfo(false, false, "");
|
||||||
|
} else if (msg.result.status === "stopped") {
|
||||||
|
__setInactive();
|
||||||
|
__setInfo(false, false, "");
|
||||||
|
} else if (msg.result.status === "features") {
|
||||||
|
__setAudioEnabled(msg.result.features.audio);
|
||||||
|
}
|
||||||
|
} else if (msg.error_code || msg.error) {
|
||||||
|
__logError("Got uStreamer error message:", msg.error_code, "-", msg.error);
|
||||||
|
__setInfo(false, false, msg.error);
|
||||||
|
if (__retry_emsg_timeout === null) {
|
||||||
|
__retry_emsg_timeout = setTimeout(function() {
|
||||||
|
if (!__stop) {
|
||||||
|
__sendStop();
|
||||||
|
__sendWatch();
|
||||||
|
}
|
||||||
|
__retry_emsg_timeout = null;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
__logInfo("Got uStreamer other message:", msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (jsep) {
|
||||||
|
__logInfo("Handling SDP:", jsep);
|
||||||
|
__handle.createAnswer({
|
||||||
|
"jsep": jsep,
|
||||||
|
"media": {"audioSend": false, "videoSend": false, "data": false},
|
||||||
|
|
||||||
|
"success": function(jsep) {
|
||||||
|
__logInfo("Got SDP:", jsep);
|
||||||
|
__sendStart(jsep);
|
||||||
|
},
|
||||||
|
|
||||||
|
"error": function(error) {
|
||||||
|
__logInfo("Error on SDP handling:", error);
|
||||||
|
__setInfo(false, false, error);
|
||||||
|
//__destroyJanus();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"onremotestream": function(stream) {
|
||||||
|
__logInfo("Got a remote stream:", stream);
|
||||||
|
_Janus.attachMediaStream($("stream-video"), stream);
|
||||||
|
__sendKeyRequired();
|
||||||
|
__startInfoInterval();
|
||||||
|
// FIXME: Задержка уменьшается, но начинаются заикания на кейфреймах.
|
||||||
|
// - https://github.com/Glimesh/janus-ftl-plugin/issues/101
|
||||||
|
/*if (__handle && __handle.webrtcStuff && __handle.webrtcStuff.pc) {
|
||||||
|
for (let receiver of __handle.webrtcStuff.pc.getReceivers()) {
|
||||||
|
if (receiver.track && receiver.track.kind === "video" && receiver.playoutDelayHint !== undefined) {
|
||||||
|
receiver.playoutDelayHint = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
},
|
||||||
|
|
||||||
|
"oncleanup": function() {
|
||||||
|
__logInfo("Got a cleanup notification");
|
||||||
|
__stopInfoInterval();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var __setAudioEnabled = function(enabled) {
|
||||||
|
tools.feature.setEnabled($("stream-audio"), enabled);
|
||||||
|
};
|
||||||
|
|
||||||
|
var __startInfoInterval = function() {
|
||||||
|
__stopInfoInterval();
|
||||||
|
__setActive();
|
||||||
|
__updateInfo();
|
||||||
|
__info_interval = setInterval(__updateInfo, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
var __stopInfoInterval = function() {
|
||||||
|
if (__info_interval !== null) {
|
||||||
|
clearInterval(__info_interval);
|
||||||
|
}
|
||||||
|
__info_interval = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
var __stopRetryEmsgInterval = function() {
|
||||||
|
if (__retry_emsg_timeout !== null) {
|
||||||
|
clearTimeout(__retry_emsg_timeout);
|
||||||
|
__retry_emsg_timeout = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __updateInfo = function() {
|
||||||
|
if (__handle !== null) {
|
||||||
|
let online = !!(__state && __state.source && __state.source.online);
|
||||||
|
let info = "";
|
||||||
|
if (__handle !== null) {
|
||||||
|
// https://wiki.whatwg.org/wiki/Video_Metrics
|
||||||
|
let frames = null;
|
||||||
|
let el = $("stream-video");
|
||||||
|
if (el.webkitDecodedFrameCount !== undefined) {
|
||||||
|
frames = el.webkitDecodedFrameCount;
|
||||||
|
} else if (el.mozPaintedFrames !== undefined) {
|
||||||
|
frames = el.mozPaintedFrames;
|
||||||
|
}
|
||||||
|
if (frames !== null) {
|
||||||
|
info = `${Math.max(0, frames - __frames)} fps dynamic`;
|
||||||
|
__frames = frames;
|
||||||
|
} else {
|
||||||
|
info = `${__handle.getBitrate()}`.replace("kbits/sec", "kbps");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
__setInfo(true, online, info);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __sendWatch = function() {
|
||||||
|
if (__handle) {
|
||||||
|
__logInfo("Sending WATCH + FEATURES ...");
|
||||||
|
__handle.send({"message": {"request": "features"}});
|
||||||
|
__handle.send({"message": {"request": "watch", "params": {"audio": true}}});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __sendStart = function(jsep) {
|
||||||
|
if (__handle) {
|
||||||
|
__logInfo("Sending START ...");
|
||||||
|
__handle.send({"message": {"request": "start"}, "jsep": jsep});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __sendKeyRequired = function() {
|
||||||
|
/*if (__handle) {
|
||||||
|
// На этом шаге мы говорим что стрим пошел и надо запросить кейфрейм
|
||||||
|
__logInfo("Sending KEY_REQUIRED ...");
|
||||||
|
__handle.send({message: {request: "key_required"}});
|
||||||
|
}*/
|
||||||
|
};
|
||||||
|
|
||||||
|
var __sendStop = function() {
|
||||||
|
__stopInfoInterval();
|
||||||
|
if (__handle) {
|
||||||
|
__logInfo("Sending STOP ...");
|
||||||
|
__handle.send({"message": {"request": "stop"}});
|
||||||
|
__handle.hangup();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __logInfo = (...args) => tools.info("Stream [Janus]:", ...args);
|
||||||
|
var __logError = (...args) => tools.error("Stream [Janus]:", ...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
JanusStreamer.ensure_janus = function(callback) {
|
||||||
|
if (_Janus === null) {
|
||||||
|
import("./janus.js").then((module) => {
|
||||||
|
module.Janus.init({
|
||||||
|
"debug": "all",
|
||||||
|
"callback": function() {
|
||||||
|
_Janus = module.Janus;
|
||||||
|
callback();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}).catch((err) => {
|
||||||
|
tools.error("Stream: Can't import Janus module:", err);
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
JanusStreamer.is_imported = function() {
|
||||||
|
return (_Janus !== null);
|
||||||
|
};
|
||||||
|
|
||||||
|
JanusStreamer.is_webrtc_available = function() {
|
||||||
|
return !!window.RTCPeerConnection;
|
||||||
|
};
|
||||||
|
|
||||||
|
JanusStreamer.is_h264_available = function() {
|
||||||
|
let ok = true;
|
||||||
|
if ($("stream-video").canPlayType) {
|
||||||
|
ok = $("stream-video").canPlayType("video/mp4; codecs=\"avc1.42E01F\"");
|
||||||
|
}
|
||||||
|
return ok;
|
||||||
|
};
|
||||||
158
web/share/js/kvm/stream_mjpeg.js
Normal file
158
web/share/js/kvm/stream_mjpeg.js
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
# #
|
||||||
|
# KVMD - The main PiKVM daemon. #
|
||||||
|
# #
|
||||||
|
# Copyright (C) 2018-2022 Maxim Devaev <mdevaev@gmail.com> #
|
||||||
|
# #
|
||||||
|
# This program is free software: you can redistribute it and/or modify #
|
||||||
|
# it under the terms of the GNU General Public License as published by #
|
||||||
|
# the Free Software Foundation, either version 3 of the License, or #
|
||||||
|
# (at your option) any later version. #
|
||||||
|
# #
|
||||||
|
# This program is distributed in the hope that it will be useful, #
|
||||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
|
||||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
|
||||||
|
# GNU General Public License for more details. #
|
||||||
|
# #
|
||||||
|
# You should have received a copy of the GNU General Public License #
|
||||||
|
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
|
||||||
|
# #
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
|
||||||
|
import {tools, $} from "../tools.js";
|
||||||
|
|
||||||
|
|
||||||
|
export function MjpegStreamer(__setActive, __setInactive, __setInfo) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
/************************************************************************/
|
||||||
|
|
||||||
|
var __key = tools.makeId();
|
||||||
|
var __id = "";
|
||||||
|
var __fps = -1;
|
||||||
|
var __state = null;
|
||||||
|
|
||||||
|
var __timer = null;
|
||||||
|
var __timer_retries = 0;
|
||||||
|
|
||||||
|
/************************************************************************/
|
||||||
|
|
||||||
|
self.getName = () => "MJPEG";
|
||||||
|
self.getMode = () => "mjpeg";
|
||||||
|
|
||||||
|
self.getResolution = function() {
|
||||||
|
let el = $("stream-image");
|
||||||
|
return {
|
||||||
|
"real_width": el.naturalWidth,
|
||||||
|
"real_height": el.naturalHeight,
|
||||||
|
"view_width": el.offsetWidth,
|
||||||
|
"view_height": el.offsetHeight,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
self.ensureStream = function(state) {
|
||||||
|
if (state) {
|
||||||
|
__state = state;
|
||||||
|
__findId();
|
||||||
|
if (__id.length > 0 && __id in __state.stream.clients_stat) {
|
||||||
|
__setStreamActive();
|
||||||
|
__stopChecking();
|
||||||
|
} else {
|
||||||
|
__ensureChecking();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
__stopChecking();
|
||||||
|
__setStreamInactive();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
self.stopStream = function() {
|
||||||
|
self.ensureStream(null);
|
||||||
|
let blank = "/share/png/blank-stream.png";
|
||||||
|
if (!String.prototype.endsWith.call($("stream-image").src, blank)) {
|
||||||
|
$("stream-image").src = blank;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __setStreamActive = function() {
|
||||||
|
let old_fps = __fps;
|
||||||
|
__fps = __state.stream.clients_stat[__id].fps;
|
||||||
|
if (old_fps < 0) {
|
||||||
|
__logInfo("Active");
|
||||||
|
__setActive();
|
||||||
|
}
|
||||||
|
__setInfo(true, __state.source.online, `${__fps} fps dynamic`);
|
||||||
|
};
|
||||||
|
|
||||||
|
var __setStreamInactive = function() {
|
||||||
|
let old_fps = __fps;
|
||||||
|
__key = tools.makeId();
|
||||||
|
__id = "";
|
||||||
|
__fps = -1;
|
||||||
|
__state = null;
|
||||||
|
if (old_fps >= 0) {
|
||||||
|
__logInfo("Inactive");
|
||||||
|
__setInactive();
|
||||||
|
__setInfo(false, false, "");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __ensureChecking = function() {
|
||||||
|
if (!__timer) {
|
||||||
|
__timer_retries = 10;
|
||||||
|
__timer = setInterval(__checkStream, 100);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __stopChecking = function() {
|
||||||
|
if (__timer) {
|
||||||
|
clearInterval(__timer);
|
||||||
|
}
|
||||||
|
__timer = null;
|
||||||
|
__timer_retries = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
var __findId = function() {
|
||||||
|
let stream_client = tools.cookies.get("stream_client");
|
||||||
|
if (__id.length === 0 && stream_client && stream_client.startsWith(__key + "/")) {
|
||||||
|
__logInfo("Found acceptable stream_client cookie:", stream_client);
|
||||||
|
__id = stream_client.slice(stream_client.indexOf("/") + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __checkStream = function() {
|
||||||
|
__findId();
|
||||||
|
|
||||||
|
if (__id.legnth > 0 && __id in __state.stream.clients_stat) {
|
||||||
|
__setStreamActive();
|
||||||
|
__stopChecking();
|
||||||
|
|
||||||
|
} else if (__id.length > 0 && __timer_retries >= 0) {
|
||||||
|
__timer_retries -= 1;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
__setStreamInactive();
|
||||||
|
__stopChecking();
|
||||||
|
|
||||||
|
let path = `/streamer/stream?key=${__key}`;
|
||||||
|
if (tools.browser.is_safari || tools.browser.is_ios) {
|
||||||
|
// uStreamer fix for WebKit
|
||||||
|
__logInfo("Using dual_final_frames=1 to fix WebKit bugs");
|
||||||
|
path += "&dual_final_frames=1";
|
||||||
|
} else if (tools.browser.is_chrome || tools.browser.is_blink) {
|
||||||
|
// uStreamer fix for Blink https://bugs.chromium.org/p/chromium/issues/detail?id=527446
|
||||||
|
__logInfo("Using advance_headers=1 to fix Blink bugs");
|
||||||
|
path += "&advance_headers=1";
|
||||||
|
}
|
||||||
|
|
||||||
|
__logInfo("Refreshing ...");
|
||||||
|
$("stream-image").src = path;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var __logInfo = (...args) => tools.info("Stream [MJPEG]:", ...args);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user