cleanup adaptive mjpeg-streamer functions
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej
parent
cbd9d6ea75
commit
2be28ab463
15
package-lock.json
generated
15
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,8 @@ export function getDefaultState() {
|
||||
}
|
||||
},
|
||||
webcam: {
|
||||
service: 'mjpegstreamer',
|
||||
targetFps: 25,
|
||||
url: "",
|
||||
rotate: false,
|
||||
rotateDegrees: 90,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user