From 8843d8c18aa1d4f78a057535690712cb5ac86610 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 2 Oct 2024 13:37:05 +0300 Subject: [PATCH 1/6] Fix: Restored monitors start with delay (MonitorStream.js) Probably it broke at some point. Or maybe it never worked, but in montage.js monitors start with a delay: "monitor.start(delay);" --- web/js/MonitorStream.js | 190 ++++++++++++++++++++-------------------- 1 file changed, 96 insertions(+), 94 deletions(-) diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js index cf1295f980..ca35f61bc2 100644 --- a/web/js/MonitorStream.js +++ b/web/js/MonitorStream.js @@ -223,107 +223,109 @@ function MonitorStream(monitorData) { }; // setStreamScale this.start = function(delay=500) { - if (this.janusEnabled) { - let server; - if (ZM_JANUS_PATH) { - server = ZM_JANUS_PATH; - } else if (this.server_id && Servers[this.server_id]) { - server = Servers[this.server_id].urlToJanus(); - } else if (window.location.protocol=='https:') { - // Assume reverse proxy setup for now - server = "https://" + window.location.hostname + "/janus"; - } else { - server = "http://" + window.location.hostname + "/janus"; - } + setTimeout(function() { + if (this.janusEnabled) { + let server; + if (ZM_JANUS_PATH) { + server = ZM_JANUS_PATH; + } else if (this.server_id && Servers[this.server_id]) { + server = Servers[this.server_id].urlToJanus(); + } else if (window.location.protocol=='https:') { + // Assume reverse proxy setup for now + server = "https://" + window.location.hostname + "/janus"; + } else { + server = "http://" + window.location.hostname + "/janus"; + } - if (janus == null) { - Janus.init({debug: "all", callback: function() { - janus = new Janus({server: server}); //new Janus - }}); - } - attachVideo(parseInt(this.id), this.janusPin); - this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); - this.started = true; - return; - } - if (this.RTSP2WebEnabled) { - if (ZM_RTSP2WEB_PATH) { - const videoEl = document.getElementById("liveStream" + this.id); - const url = new URL(ZM_RTSP2WEB_PATH); - const useSSL = (url.protocol == 'https'); - - const rtsp2webModUrl = url; - rtsp2webModUrl.username = ''; - rtsp2webModUrl.password = ''; - //.urlParts.length > 1 ? urlParts[1] : urlParts[0]; // drop the username and password for viewing - if (this.RTSP2WebType == 'HLS') { - const hlsUrl = rtsp2webModUrl; - hlsUrl.pathname = "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - /* - if (useSSL) { - hlsUrl = "https://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - } else { - hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - } - */ - if (Hls.isSupported()) { - const hls = new Hls(); - hls.loadSource(hlsUrl.href); - hls.attachMedia(videoEl); - } else if (video.canPlayType('application/vnd.apple.mpegurl')) { - videoEl.src = hlsUrl.href; - } - } else if (this.RTSP2WebType == 'MSE') { - videoEl.addEventListener('pause', () => { - if (videoEl.currentTime > videoEl.buffered.end(videoEl.buffered.length - 1)) { - videoEl.currentTime = videoEl.buffered.end(videoEl.buffered.length - 1) - 0.1; - videoEl.play(); - } - }); - const mseUrl = rtsp2webModUrl; - mseUrl.protocol = useSSL ? 'wss' : 'ws'; - mseUrl.pathname = "/stream/" + this.id + "/channel/0/mse?uuid=" + this.id + "&channel=0"; - startMsePlay(this, videoEl, mseUrl.href); - } else if (this.RTSP2WebType == 'WebRTC') { - const webrtcUrl = rtsp2webModUrl; - webrtcUrl.pathname = "/stream/" + this.id + "/channel/0/webrtc"; - startRTSP2WebPlay(videoEl, webrtcUrl.href); + if (janus == null) { + Janus.init({debug: "all", callback: function() { + janus = new Janus({server: server}); //new Janus + }}); } + attachVideo(parseInt(this.id), this.janusPin); this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); this.started = true; return; - } else { - console.log("ZM_RTSP2WEB_PATH is empty. Go to Options->System and set ZM_RTSP2WEB_PATH accordingly."); } - } + if (this.RTSP2WebEnabled) { + if (ZM_RTSP2WEB_PATH) { + const videoEl = document.getElementById("liveStream" + this.id); + const url = new URL(ZM_RTSP2WEB_PATH); + const useSSL = (url.protocol == 'https'); + + const rtsp2webModUrl = url; + rtsp2webModUrl.username = ''; + rtsp2webModUrl.password = ''; + //.urlParts.length > 1 ? urlParts[1] : urlParts[0]; // drop the username and password for viewing + if (this.RTSP2WebType == 'HLS') { + const hlsUrl = rtsp2webModUrl; + hlsUrl.pathname = "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + /* + if (useSSL) { + hlsUrl = "https://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + } else { + hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + } + */ + if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(hlsUrl.href); + hls.attachMedia(videoEl); + } else if (video.canPlayType('application/vnd.apple.mpegurl')) { + videoEl.src = hlsUrl.href; + } + } else if (this.RTSP2WebType == 'MSE') { + videoEl.addEventListener('pause', () => { + if (videoEl.currentTime > videoEl.buffered.end(videoEl.buffered.length - 1)) { + videoEl.currentTime = videoEl.buffered.end(videoEl.buffered.length - 1) - 0.1; + videoEl.play(); + } + }); + const mseUrl = rtsp2webModUrl; + mseUrl.protocol = useSSL ? 'wss' : 'ws'; + mseUrl.pathname = "/stream/" + this.id + "/channel/0/mse?uuid=" + this.id + "&channel=0"; + startMsePlay(this, videoEl, mseUrl.href); + } else if (this.RTSP2WebType == 'WebRTC') { + const webrtcUrl = rtsp2webModUrl; + webrtcUrl.pathname = "/stream/" + this.id + "/channel/0/webrtc"; + startRTSP2WebPlay(videoEl, webrtcUrl.href); + } + this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); + this.started = true; + return; + } else { + console.log("ZM_RTSP2WEB_PATH is empty. Go to Options->System and set ZM_RTSP2WEB_PATH accordingly."); + } + } - // zms stream - const stream = this.getElement(); - if (!stream) return; - if (!stream.src) { - // Website Monitors won't have an img tag, neither will video - console.log('No src for #liveStream'+this.id); - console.log(stream); - return; - } - this.streamCmdTimer = clearTimeout(this.streamCmdTimer); - // Step 1 make sure we are streaming instead of a static image - if (stream.getAttribute('loading') == 'lazy') { - stream.setAttribute('loading', 'eager'); - } - let src = stream.src.replace(/mode=single/i, 'mode=jpeg'); - src = src.replace(/auth=\w+/i, 'auth='+auth_hash); - if (-1 == src.search('connkey')) { - src += '&connkey='+this.connKey; - } - if (stream.src != src) { - console.log("Setting to streaming: " + src); - stream.src = ''; - stream.src = src; - } - stream.onerror = this.img_onerror.bind(this); - stream.onload = this.img_onload.bind(this); - this.started = true; + // zms stream + const stream = this.getElement(); + if (!stream) return; + if (!stream.src) { + // Website Monitors won't have an img tag, neither will video + console.log('No src for #liveStream'+this.id); + console.log(stream); + return; + } + this.streamCmdTimer = clearTimeout(this.streamCmdTimer); + // Step 1 make sure we are streaming instead of a static image + if (stream.getAttribute('loading') == 'lazy') { + stream.setAttribute('loading', 'eager'); + } + let src = stream.src.replace(/mode=single/i, 'mode=jpeg'); + src = src.replace(/auth=\w+/i, 'auth='+auth_hash); + if (-1 == src.search('connkey')) { + src += '&connkey='+this.connKey; + } + if (stream.src != src) { + console.log("Setting to streaming: " + src); + stream.src = ''; + stream.src = src; + } + stream.onerror = this.img_onerror.bind(this); + stream.onload = this.img_onload.bind(this); + this.started = true; + }.bind(this), delay); }; // this.start this.stop = function() { From 701d48577322422699455aad52fadfc92a782766 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 2 Oct 2024 19:33:37 +0300 Subject: [PATCH 2/6] Removed the "delay" argument from the "start" function as it is no longer used (MonitorStream.js) --- web/js/MonitorStream.js | 192 ++++++++++++++++++++-------------------- 1 file changed, 95 insertions(+), 97 deletions(-) diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js index ca35f61bc2..60f47d55ca 100644 --- a/web/js/MonitorStream.js +++ b/web/js/MonitorStream.js @@ -222,110 +222,108 @@ function MonitorStream(monitorData) { } }; // setStreamScale - this.start = function(delay=500) { - setTimeout(function() { - if (this.janusEnabled) { - let server; - if (ZM_JANUS_PATH) { - server = ZM_JANUS_PATH; - } else if (this.server_id && Servers[this.server_id]) { - server = Servers[this.server_id].urlToJanus(); - } else if (window.location.protocol=='https:') { - // Assume reverse proxy setup for now - server = "https://" + window.location.hostname + "/janus"; - } else { - server = "http://" + window.location.hostname + "/janus"; - } + this.start = function() { + if (this.janusEnabled) { + let server; + if (ZM_JANUS_PATH) { + server = ZM_JANUS_PATH; + } else if (this.server_id && Servers[this.server_id]) { + server = Servers[this.server_id].urlToJanus(); + } else if (window.location.protocol=='https:') { + // Assume reverse proxy setup for now + server = "https://" + window.location.hostname + "/janus"; + } else { + server = "http://" + window.location.hostname + "/janus"; + } - if (janus == null) { - Janus.init({debug: "all", callback: function() { - janus = new Janus({server: server}); //new Janus - }}); + if (janus == null) { + Janus.init({debug: "all", callback: function() { + janus = new Janus({server: server}); //new Janus + }}); + } + attachVideo(parseInt(this.id), this.janusPin); + this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); + this.started = true; + return; + } + if (this.RTSP2WebEnabled) { + if (ZM_RTSP2WEB_PATH) { + const videoEl = document.getElementById("liveStream" + this.id); + const url = new URL(ZM_RTSP2WEB_PATH); + const useSSL = (url.protocol == 'https'); + + const rtsp2webModUrl = url; + rtsp2webModUrl.username = ''; + rtsp2webModUrl.password = ''; + //.urlParts.length > 1 ? urlParts[1] : urlParts[0]; // drop the username and password for viewing + if (this.RTSP2WebType == 'HLS') { + const hlsUrl = rtsp2webModUrl; + hlsUrl.pathname = "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + /* + if (useSSL) { + hlsUrl = "https://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + } else { + hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + } + */ + if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(hlsUrl.href); + hls.attachMedia(videoEl); + } else if (video.canPlayType('application/vnd.apple.mpegurl')) { + videoEl.src = hlsUrl.href; + } + } else if (this.RTSP2WebType == 'MSE') { + videoEl.addEventListener('pause', () => { + if (videoEl.currentTime > videoEl.buffered.end(videoEl.buffered.length - 1)) { + videoEl.currentTime = videoEl.buffered.end(videoEl.buffered.length - 1) - 0.1; + videoEl.play(); + } + }); + const mseUrl = rtsp2webModUrl; + mseUrl.protocol = useSSL ? 'wss' : 'ws'; + mseUrl.pathname = "/stream/" + this.id + "/channel/0/mse?uuid=" + this.id + "&channel=0"; + startMsePlay(this, videoEl, mseUrl.href); + } else if (this.RTSP2WebType == 'WebRTC') { + const webrtcUrl = rtsp2webModUrl; + webrtcUrl.pathname = "/stream/" + this.id + "/channel/0/webrtc"; + startRTSP2WebPlay(videoEl, webrtcUrl.href); } - attachVideo(parseInt(this.id), this.janusPin); this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); this.started = true; return; + } else { + console.log("ZM_RTSP2WEB_PATH is empty. Go to Options->System and set ZM_RTSP2WEB_PATH accordingly."); } - if (this.RTSP2WebEnabled) { - if (ZM_RTSP2WEB_PATH) { - const videoEl = document.getElementById("liveStream" + this.id); - const url = new URL(ZM_RTSP2WEB_PATH); - const useSSL = (url.protocol == 'https'); - - const rtsp2webModUrl = url; - rtsp2webModUrl.username = ''; - rtsp2webModUrl.password = ''; - //.urlParts.length > 1 ? urlParts[1] : urlParts[0]; // drop the username and password for viewing - if (this.RTSP2WebType == 'HLS') { - const hlsUrl = rtsp2webModUrl; - hlsUrl.pathname = "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - /* - if (useSSL) { - hlsUrl = "https://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - } else { - hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; - } - */ - if (Hls.isSupported()) { - const hls = new Hls(); - hls.loadSource(hlsUrl.href); - hls.attachMedia(videoEl); - } else if (video.canPlayType('application/vnd.apple.mpegurl')) { - videoEl.src = hlsUrl.href; - } - } else if (this.RTSP2WebType == 'MSE') { - videoEl.addEventListener('pause', () => { - if (videoEl.currentTime > videoEl.buffered.end(videoEl.buffered.length - 1)) { - videoEl.currentTime = videoEl.buffered.end(videoEl.buffered.length - 1) - 0.1; - videoEl.play(); - } - }); - const mseUrl = rtsp2webModUrl; - mseUrl.protocol = useSSL ? 'wss' : 'ws'; - mseUrl.pathname = "/stream/" + this.id + "/channel/0/mse?uuid=" + this.id + "&channel=0"; - startMsePlay(this, videoEl, mseUrl.href); - } else if (this.RTSP2WebType == 'WebRTC') { - const webrtcUrl = rtsp2webModUrl; - webrtcUrl.pathname = "/stream/" + this.id + "/channel/0/webrtc"; - startRTSP2WebPlay(videoEl, webrtcUrl.href); - } - this.statusCmdTimer = setInterval(this.statusCmdQuery.bind(this), statusRefreshTimeout); - this.started = true; - return; - } else { - console.log("ZM_RTSP2WEB_PATH is empty. Go to Options->System and set ZM_RTSP2WEB_PATH accordingly."); - } - } + } - // zms stream - const stream = this.getElement(); - if (!stream) return; - if (!stream.src) { - // Website Monitors won't have an img tag, neither will video - console.log('No src for #liveStream'+this.id); - console.log(stream); - return; - } - this.streamCmdTimer = clearTimeout(this.streamCmdTimer); - // Step 1 make sure we are streaming instead of a static image - if (stream.getAttribute('loading') == 'lazy') { - stream.setAttribute('loading', 'eager'); - } - let src = stream.src.replace(/mode=single/i, 'mode=jpeg'); - src = src.replace(/auth=\w+/i, 'auth='+auth_hash); - if (-1 == src.search('connkey')) { - src += '&connkey='+this.connKey; - } - if (stream.src != src) { - console.log("Setting to streaming: " + src); - stream.src = ''; - stream.src = src; - } - stream.onerror = this.img_onerror.bind(this); - stream.onload = this.img_onload.bind(this); - this.started = true; - }.bind(this), delay); + // zms stream + const stream = this.getElement(); + if (!stream) return; + if (!stream.src) { + // Website Monitors won't have an img tag, neither will video + console.log('No src for #liveStream'+this.id); + console.log(stream); + return; + } + this.streamCmdTimer = clearTimeout(this.streamCmdTimer); + // Step 1 make sure we are streaming instead of a static image + if (stream.getAttribute('loading') == 'lazy') { + stream.setAttribute('loading', 'eager'); + } + let src = stream.src.replace(/mode=single/i, 'mode=jpeg'); + src = src.replace(/auth=\w+/i, 'auth='+auth_hash); + if (-1 == src.search('connkey')) { + src += '&connkey='+this.connKey; + } + if (stream.src != src) { + console.log("Setting to streaming: " + src); + stream.src = ''; + stream.src = src; + } + stream.onerror = this.img_onerror.bind(this); + stream.onload = this.img_onload.bind(this); + this.started = true; }; // this.start this.stop = function() { From 5790a0d03ba934584c11bb54cf9f9f26bd1ed2fc Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 2 Oct 2024 19:35:54 +0300 Subject: [PATCH 3/6] Recovered spaces that I accidentally deleted (MonitorStream.js) --- web/js/MonitorStream.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/js/MonitorStream.js b/web/js/MonitorStream.js index 60f47d55ca..f9988db07f 100644 --- a/web/js/MonitorStream.js +++ b/web/js/MonitorStream.js @@ -263,7 +263,7 @@ function MonitorStream(monitorData) { if (useSSL) { hlsUrl = "https://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; } else { - hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; + hlsUrl = "http://" + rtsp2webModUrl + "/stream/" + this.id + "/channel/0/hls/live/index.m3u8"; } */ if (Hls.isSupported()) { From 5b025949284cf3c694c08e6d84fcf30908db5848 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 2 Oct 2024 19:39:49 +0300 Subject: [PATCH 4/6] Removed usage of "delay" constant as it is no longer used (montage.js) --- web/skins/classic/views/js/montage.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web/skins/classic/views/js/montage.js b/web/skins/classic/views/js/montage.js index 2a43a52306..dbc2125be8 100644 --- a/web/skins/classic/views/js/montage.js +++ b/web/skins/classic/views/js/montage.js @@ -583,9 +583,7 @@ function startMonitors() { const isOut = isOutOfViewport(monitor.getElement()); if (!isOut.all) { - // Start the fps and status updates. give a random delay so that we don't assault the server - const delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); - monitors[i].start(delay); + monitor.start(delay); } if ((monitor.type == 'WebSite') && (monitor.refresh > 0)) { setInterval(reloadWebSite, monitor.refresh*1000, i); From 18d5c88c64158ee20914f7a11af084f7587a1c83 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 2 Oct 2024 19:41:07 +0300 Subject: [PATCH 5/6] Update montage.js --- web/skins/classic/views/js/montage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/views/js/montage.js b/web/skins/classic/views/js/montage.js index dbc2125be8..d34a98b750 100644 --- a/web/skins/classic/views/js/montage.js +++ b/web/skins/classic/views/js/montage.js @@ -583,7 +583,7 @@ function startMonitors() { const isOut = isOutOfViewport(monitor.getElement()); if (!isOut.all) { - monitor.start(delay); + monitor.start(); } if ((monitor.type == 'WebSite') && (monitor.refresh > 0)) { setInterval(reloadWebSite, monitor.refresh*1000, i); From 5ae6e0e84697187fd953902d1e19aa0c05143ebc Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 3 Oct 2024 11:56:53 +0300 Subject: [PATCH 6/6] Declared variable "h" (event.js) Closed: https://forums.zoneminder.com/viewtopic.php?p=135715&sid=593ae02225002db4f98a48b0ae3e8e18#p135715 --- web/skins/classic/views/js/event.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index cc98cef596..fb2809fd99 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -318,7 +318,7 @@ function changeScale() { currentScale = newSize.autoScale; } else if (scaleSel.indexOf("px") > -1) { newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, false, $j('#wrapperEventVideo')); // Only for calculating the maximum width! - let w = h = ''; + let w, h = w = ''; if (landscape) { w = Math.min(stringToNumber(scaleSel), newSize.width); h = w / (eventData.Width / eventData.Height);