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,