cleanup adaptive mjpeg-streamer functions

Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-02-22 23:26:00 +01:00
parent cbd9d6ea75
commit 2be28ab463
4 changed files with 59 additions and 45 deletions

15
package-lock.json generated
View File

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

View File

@ -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: [
{ 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: {

View File

@ -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) {
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()
}
}
}

View File

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