cleanup adaptive mjpeg-streamer functions
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
parent
cbd9d6ea75
commit
2be28ab463
15
package-lock.json
generated
15
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "mainsail",
|
"name": "mainsail",
|
||||||
"version": "1.2.0",
|
"version": "1.3.0",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "mainsail",
|
"name": "mainsail",
|
||||||
"version": "1.2.0",
|
"version": "1.3.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"core-js": "^3.8.2",
|
"core-js": "^3.8.2",
|
||||||
@ -19,6 +19,7 @@
|
|||||||
"vue-context": "^6.0.0",
|
"vue-context": "^6.0.0",
|
||||||
"vue-github-api": "^0.1.7",
|
"vue-github-api": "^0.1.7",
|
||||||
"vue-headful": "^2.1.0",
|
"vue-headful": "^2.1.0",
|
||||||
|
"vue-observe-visibility": "^1.0.0",
|
||||||
"vue-plotly": "^1.1.0",
|
"vue-plotly": "^1.1.0",
|
||||||
"vue-prism-editor": "^1.2.2",
|
"vue-prism-editor": "^1.2.2",
|
||||||
"vue-resource": "^1.5.1",
|
"vue-resource": "^1.5.1",
|
||||||
@ -17397,6 +17398,11 @@
|
|||||||
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
|
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
|
||||||
"dev": true
|
"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": {
|
"node_modules/vue-plotly": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-plotly/-/vue-plotly-1.1.0.tgz",
|
"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": {
|
"vue-plotly": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-plotly/-/vue-plotly-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-plotly/-/vue-plotly-1.1.0.tgz",
|
||||||
|
@ -12,7 +12,17 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-container px-0 py-0>
|
<v-container px-0 py-0>
|
||||||
<v-row>
|
<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-text-field
|
||||||
v-model="webcamUrl"
|
v-model="webcamUrl"
|
||||||
hide-details
|
hide-details
|
||||||
@ -43,16 +53,6 @@
|
|||||||
<v-switch v-model="boolNavi" hide-details label="Show in navigation" class="mt-0"></v-switch>
|
<v-switch v-model="boolNavi" hide-details label="Show in navigation" class="mt-0"></v-switch>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</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-container>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -66,9 +66,9 @@
|
|||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
rotationEnabled: false,
|
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 } });
|
return this.$store.dispatch('gui/setSettings', { webcam: { bool: showNav } });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
serviceMethod: {
|
service: {
|
||||||
get() {
|
get() {
|
||||||
return this.$store.state.gui.webcam.serviceMethod;
|
return this.$store.state.gui.webcam.service;
|
||||||
},
|
},
|
||||||
set(selectedMethod) {
|
set(selectedMethod) {
|
||||||
return this.$store.dispatch('gui/setSettings', { webcam: { serviceMethod: selectedMethod } });
|
return this.$store.dispatch('gui/setSettings', { webcam: { service: selectedMethod } });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
targetFps: {
|
targetFps: {
|
||||||
|
@ -8,7 +8,10 @@
|
|||||||
<v-card v-observe-visibility="visibilityChanged">
|
<v-card v-observe-visibility="visibilityChanged">
|
||||||
<v-toolbar flat dense >
|
<v-toolbar flat dense >
|
||||||
<v-toolbar-title>
|
<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-title>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
<v-card-text class="px-0 py-0 content">
|
<v-card-text class="px-0 py-0 content">
|
||||||
@ -34,14 +37,15 @@
|
|||||||
time_smoothing: 0.6,
|
time_smoothing: 0.6,
|
||||||
request_time_smoothing: 0.1,
|
request_time_smoothing: 0.1,
|
||||||
isVisible: true,
|
isVisible: true,
|
||||||
|
currentFPS: 0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created: function () {
|
created: function () {
|
||||||
document.addEventListener("focus", () => this.handleRefreshChange(), false);
|
document.addEventListener("focus", () => this.handleRefreshChange(), false);
|
||||||
document.addEventListener("visibilitychange", 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
|
'webcamConfig': state => state.gui.webcam
|
||||||
}),
|
}),
|
||||||
|
|
||||||
subHeading() {
|
|
||||||
return "Webcam" + (this.webcamConfig.serviceMethod == 1 ? " - FPS: " + Math.round(1000 / this.time) : "");
|
|
||||||
},
|
|
||||||
|
|
||||||
url() {
|
url() {
|
||||||
if(!this.webcamConfig.serviceMethod) {
|
if(this.webcamConfig.service === 'mjpegstreamer-adaptive') {
|
||||||
|
return this.imageData;
|
||||||
|
} else {
|
||||||
let basicUrl = this.webcamConfig.url
|
let basicUrl = this.webcamConfig.url
|
||||||
if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?"
|
if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?"
|
||||||
|
|
||||||
const params = new URLSearchParams(basicUrl)
|
const params = new URLSearchParams(basicUrl)
|
||||||
params.set('bypassCache', ""+this.refresh)
|
params.set('bypassCache', ""+this.refresh)
|
||||||
return decodeURIComponent(params.toString())
|
return decodeURIComponent(params.toString())
|
||||||
} else {
|
|
||||||
return this.imageData;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -97,43 +97,44 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
onLoad() {
|
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(() => {
|
this.$nextTick(() => {
|
||||||
console.log(end_time + " " + timeout);
|
setTimeout(this.requestMjpeg, timeout)
|
||||||
setTimeout(this.requestMjpeg, timeout);
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
requestMjpeg() {
|
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
|
let basicUrl = this.webcamConfig.url
|
||||||
|
basicUrl = basicUrl.replace("action=stream", "action=snapshot")
|
||||||
if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?"
|
if (basicUrl && basicUrl.indexOf("?") === -1) basicUrl += "?"
|
||||||
|
|
||||||
const params = new URLSearchParams(basicUrl)
|
const params = new URLSearchParams(basicUrl)
|
||||||
params.set('bypassCache', ""+ this.refresh + (Math.random() * 1000))
|
params.set('bypassCache', ""+ this.refresh + (Math.random() * 1000))
|
||||||
|
|
||||||
|
|
||||||
|
this.currentFPS = Math.round(1000 / this.time)
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.imageData = decodeURIComponent(params.toString())
|
this.imageData = decodeURIComponent(params.toString())
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
visibilityChanged(isVisible) {
|
visibilityChanged(isVisible) {
|
||||||
this.isVisible = isVisible;
|
this.isVisible = isVisible
|
||||||
if(isVisible)
|
if(isVisible) this.requestMjpeg()
|
||||||
this.requestMjpeg();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,6 +27,8 @@ export function getDefaultState() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
webcam: {
|
webcam: {
|
||||||
|
service: 'mjpegstreamer',
|
||||||
|
targetFps: 25,
|
||||||
url: "",
|
url: "",
|
||||||
rotate: false,
|
rotate: false,
|
||||||
rotateDegrees: 90,
|
rotateDegrees: 90,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user