From 2be28ab46327a1657b7601df3be423b3d90c51a7 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 22 Feb 2021 23:26:00 +0100 Subject: [PATCH] cleanup adaptive mjpeg-streamer functions Signed-off-by: Stefan Dej --- package-lock.json | 15 +++++- .../panels/Settings/WebcamPanel.vue | 34 ++++++------ src/components/panels/WebcamPanel.vue | 53 ++++++++++--------- src/store/gui/index.js | 2 + 4 files changed, 59 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index 439f71c4..95845edf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mainsail", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mainsail", - "version": "1.2.0", + "version": "1.3.0", "dependencies": { "axios": "^0.21.1", "core-js": "^3.8.2", @@ -19,6 +19,7 @@ "vue-context": "^6.0.0", "vue-github-api": "^0.1.7", "vue-headful": "^2.1.0", + "vue-observe-visibility": "^1.0.0", "vue-plotly": "^1.1.0", "vue-prism-editor": "^1.2.2", "vue-resource": "^1.5.1", @@ -17397,6 +17398,11 @@ "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=", "dev": true }, + "node_modules/vue-observe-visibility": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz", + "integrity": "sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==" + }, "node_modules/vue-plotly": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/vue-plotly/-/vue-plotly-1.1.0.tgz", @@ -35152,6 +35158,11 @@ } } }, + "vue-observe-visibility": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz", + "integrity": "sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==" + }, "vue-plotly": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/vue-plotly/-/vue-plotly-1.1.0.tgz", diff --git a/src/components/panels/Settings/WebcamPanel.vue b/src/components/panels/Settings/WebcamPanel.vue index f64cf61d..f33ce99f 100644 --- a/src/components/panels/Settings/WebcamPanel.vue +++ b/src/components/panels/Settings/WebcamPanel.vue @@ -12,7 +12,17 @@ - + + + + + + + + + + + - - - - - - - - - - @@ -66,9 +66,9 @@ data: function() { return { rotationEnabled: false, - serviceMethodItems: [ - { value: 0, text: 'MJPEG-Streamer' }, - { value: 1, text: 'MJPEG-Streamer (Adaptive)' }, + serviceItems: [ + { value: 'mjpegstreamer', text: 'MJPEG-Streamer' }, + { value: 'mjpegstreamer-adaptive', text: 'Adaptive MJPEG-Streamer (experimental)' }, ] } }, @@ -121,12 +121,12 @@ return this.$store.dispatch('gui/setSettings', { webcam: { bool: showNav } }); } }, - serviceMethod: { + service: { get() { - return this.$store.state.gui.webcam.serviceMethod; + return this.$store.state.gui.webcam.service; }, set(selectedMethod) { - return this.$store.dispatch('gui/setSettings', { webcam: { serviceMethod: selectedMethod } }); + return this.$store.dispatch('gui/setSettings', { webcam: { service: selectedMethod } }); } }, targetFps: { diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue index 85897d57..f28fc6c7 100644 --- a/src/components/panels/WebcamPanel.vue +++ b/src/components/panels/WebcamPanel.vue @@ -8,7 +8,10 @@ - mdi-webcam{{subHeading}} + + mdi-webcam Webcam + (FPS: {{ currentFPS }}) + @@ -34,14 +37,15 @@ time_smoothing: 0.6, request_time_smoothing: 0.1, isVisible: true, + currentFPS: 0, }; }, created: function () { document.addEventListener("focus", () => this.handleRefreshChange(), false); document.addEventListener("visibilitychange", this.handleRefreshChange, false); - if(this.webcamConfig.serviceMethod == 1) { - this.requestMjpeg(); + if(this.webcamConfig.service === 'mjpegstreamer-adaptive') { + this.requestMjpeg() } }, @@ -53,20 +57,16 @@ 'webcamConfig': state => state.gui.webcam }), - subHeading() { - return "Webcam" + (this.webcamConfig.serviceMethod == 1 ? " - FPS: " + Math.round(1000 / this.time) : ""); - }, - url() { - if(!this.webcamConfig.serviceMethod) { + if(this.webcamConfig.service === 'mjpegstreamer-adaptive') { + return this.imageData; + } else { let basicUrl = this.webcamConfig.url if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?" const params = new URLSearchParams(basicUrl) params.set('bypassCache', ""+this.refresh) return decodeURIComponent(params.toString()) - } else { - return this.imageData; } }, @@ -97,43 +97,44 @@ }, onLoad() { - var end_time = performance.now(); - var current_time = end_time - this.start_time; - this.time = (this.time * this.time_smoothing) + (current_time * (1.0 - this.time_smoothing)); - this.start_time = end_time; + const end_time = performance.now() + const current_time = end_time - this.start_time + this.time = (this.time * this.time_smoothing) + (current_time * (1.0 - this.time_smoothing)) + this.start_time = end_time - var target_time = 1000/this.webcamConfig.targetFps + const target_time = 1000/this.webcamConfig.targetFps - var current_request_time = performance.now() - this.request_start_time; - this.request_time = (this.request_time * this.request_time_smoothing) + (current_request_time * (1.0 - this.request_time_smoothing)); - var timeout = Math.max(0, target_time - this.request_time); + const current_request_time = performance.now() - this.request_start_time + this.request_time = (this.request_time * this.request_time_smoothing) + (current_request_time * (1.0 - this.request_time_smoothing)) + const timeout = Math.max(0, target_time - this.request_time) this.$nextTick(() => { - console.log(end_time + " " + timeout); - setTimeout(this.requestMjpeg, timeout); + setTimeout(this.requestMjpeg, timeout) }) }, requestMjpeg() { - if(!this.isVisible) - return; + if(!this.isVisible) return - this.request_start_time = performance.now(); + this.request_start_time = performance.now() let basicUrl = this.webcamConfig.url + basicUrl = basicUrl.replace("action=stream", "action=snapshot") if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?" const params = new URLSearchParams(basicUrl) params.set('bypassCache', ""+ this.refresh + (Math.random() * 1000)) + + this.currentFPS = Math.round(1000 / this.time) + this.$nextTick(() => { this.imageData = decodeURIComponent(params.toString()) }) }, visibilityChanged(isVisible) { - this.isVisible = isVisible; - if(isVisible) - this.requestMjpeg(); + this.isVisible = isVisible + if(isVisible) this.requestMjpeg() } } } diff --git a/src/store/gui/index.js b/src/store/gui/index.js index 08efea7f..9ea8da63 100644 --- a/src/store/gui/index.js +++ b/src/store/gui/index.js @@ -27,6 +27,8 @@ export function getDefaultState() { } }, webcam: { + service: 'mjpegstreamer', + targetFps: 25, url: "", rotate: false, rotateDegrees: 90,