cleanup adaptive mjpeg-streamer functions

Signed-off-by: Stefan Dej <meteyou@gmail.com>

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",

src/components/panels/Settings/WebcamPanel.vue

@@ -12,7 +12,17 @@
         <v-card-text>
             <v-container px-0 py-0>
                 <v-row>
-                    <v-col class="pt-2 mb-1">
+                    <v-col class="py-2">
+                        <v-select v-model="service" :items="serviceItems" hide-details label="Service" class="mt-0"></v-select>
+                    </v-col>
+                </v-row>
+                <v-row v-if="service === 'mjpegstreamer-adaptive'">
+                    <v-col class="py-2 mt-2">
+                        <v-text-field v-model="targetFps" hide-details label="Target FPS" class="mt-0"></v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col class="pt-2 mt-2 mb-1">
                         <v-text-field
                             v-model="webcamUrl"
                             hide-details
@@ -43,16 +53,6 @@
                         <v-switch v-model="boolNavi" hide-details label="Show in navigation" class="mt-0"></v-switch>
                     </v-col>
                 </v-row>
-                <v-row>
-                    <v-col class="py-2">
-                        <v-select v-model="serviceMethod" :items="serviceMethodItems" hide-details label="Service Method" class="mt-0"></v-select>
-                    </v-col>
-                </v-row>
-                <v-row v-if="serviceMethod == 1">
-                    <v-col class="py-2">
-                        <v-text-field v-model="targetFps" hide-details label="Target FPS" class="mt-0"></v-text-field>
-                    </v-col>
-                </v-row> 
             </v-container>
         </v-card-text>
     </v-card>
@@ -66,9 +66,9 @@
         data: function() {
             return {
                 rotationEnabled: false,
-                serviceMethodItems: [
+                serviceItems: [
-                    { value: 0, text: 'MJPEG-Streamer' },
+                    { value: 'mjpegstreamer', text: 'MJPEG-Streamer' },
-                    { value: 1, text: 'MJPEG-Streamer (Adaptive)' },
+                    { 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: {

src/components/panels/WebcamPanel.vue

@@ -8,7 +8,10 @@
     <v-card v-observe-visibility="visibilityChanged">
         <v-toolbar flat dense >
             <v-toolbar-title>
-                <span class="subheading"><v-icon left>mdi-webcam</v-icon>{{subHeading}}</span>
+                <span class="subheading">
+                    <v-icon left>mdi-webcam</v-icon> Webcam
+                    <small v-if="this.webcamConfig.service === 'mjpegstreamer-adaptive' &&  this.time">(FPS: {{ currentFPS }})</small>
+                </span>
             </v-toolbar-title>
         </v-toolbar>
         <v-card-text class="px-0 py-0 content">
@@ -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) {
+            if(this.webcamConfig.service === 'mjpegstreamer-adaptive') {
-                this.requestMjpeg();
+                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();
+                const end_time = performance.now()
-                var current_time = end_time - this.start_time;
+                const current_time = end_time - this.start_time
-                this.time = (this.time * this.time_smoothing) + (current_time * (1.0 - this.time_smoothing));
+                this.time = (this.time * this.time_smoothing) + (current_time * (1.0 - this.time_smoothing))
-                this.start_time = end_time;
+                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;
+                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));
+                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 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)
+                if(!this.isVisible) return
-                    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;
+                this.isVisible = isVisible
-                if(isVisible)
+                if(isVisible) this.requestMjpeg()
-                    this.requestMjpeg();
             }
         }
     }

src/store/gui/index.js

@@ -27,6 +27,8 @@ export function getDefaultState() {
 			}
 		},
 		webcam: {
+			service: 'mjpegstreamer',
+			targetFps: 25,
 			url: "",
 			rotate: false,
 			rotateDegrees: 90,