145 lines
5.1 KiB
Vue
145 lines
5.1 KiB
Vue
<style>
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-toolbar flat dense >
|
|
<v-toolbar-title>
|
|
<span class="subheading"><v-icon left>mdi-webcam</v-icon>Webcam</span>
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text>
|
|
<v-container px-0 py-0>
|
|
<v-row>
|
|
<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
|
|
label="Webcam URL"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="rotationEnabled">
|
|
<v-col class="py-2" col-auto>
|
|
<v-switch v-model="rotate" hide-details label="Rotate" class="mt-0"></v-switch>
|
|
</v-col>
|
|
<v-col>
|
|
<v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="py-2">
|
|
<v-switch v-model="flipX" hide-details label="Flip webcam horizontally" class="mt-0"></v-switch>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="py-2">
|
|
<v-switch v-model="flipY" hide-details label="Flip webcam vertically" class="mt-0"></v-switch>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="py-2">
|
|
<v-switch v-model="boolNavi" hide-details label="Show in navigation" class="mt-0"></v-switch>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
data: function() {
|
|
return {
|
|
rotationEnabled: false,
|
|
serviceItems: [
|
|
{ value: 'mjpegstreamer', text: 'MJPEG-Streamer' },
|
|
{ value: 'mjpegstreamer-adaptive', text: 'Adaptive MJPEG-Streamer (experimental)' },
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
webcamUrl: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.url;
|
|
},
|
|
set(url) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { url } });
|
|
}
|
|
},
|
|
flipX: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.flipX;
|
|
},
|
|
set(flipX) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { flipX } });
|
|
}
|
|
},
|
|
flipY: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.flipY;
|
|
},
|
|
set(flipY) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { flipY } });
|
|
}
|
|
},
|
|
rotate: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.rotate;
|
|
},
|
|
set(rotate) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { rotate } });
|
|
}
|
|
},
|
|
rotateDegrees: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.rotateDegrees;
|
|
},
|
|
set(rotateDegrees) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { rotateDegrees } });
|
|
}
|
|
},
|
|
boolNavi: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.bool;
|
|
},
|
|
set(showNav) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { bool: showNav } });
|
|
}
|
|
},
|
|
service: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.service;
|
|
},
|
|
set(selectedMethod) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { service: selectedMethod } });
|
|
}
|
|
},
|
|
targetFps: {
|
|
get() {
|
|
return this.$store.state.gui.webcam.targetFps;
|
|
},
|
|
set(fps) {
|
|
return this.$store.dispatch('gui/setSettings', { webcam: { targetFps: fps } });
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script> |