CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: add UV4L-MJPEG webcam support

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-05-18 01:08:47 +02:00
parent 76727a82dc
commit 97c06c3061
4 changed files with 80 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/panels/Settings/WebcamPanel.vue
View File

@ -151,7 +151,7 @@
</v-row>
</v-col>
<v-col class="col-12 col-sm-6 text-center" align-self="center">
<vue-load-image v-if="['mjpegstreamer', 'mjpegstreamer-adaptive'].includes(dialog.service)">
<vue-load-image v-if="['mjpegstreamer', 'mjpegstreamer-adaptive', 'uv4l-mjpeg'].includes(dialog.service)">
<img slot="image" :src="dialog.url" alt="Preview" :style="webcamStyle" class="webcamImage" />
<v-progress-circular slot="preloader" indeterminate color="primary"></v-progress-circular>
<template slot="error">
@ -231,6 +231,7 @@ export default {
serviceItems: [
{ value: "mjpegstreamer", text: this.$t("Settings.WebcamPanel.Mjpegstreamer")},
{ value: "mjpegstreamer-adaptive", text: this.$t("Settings.WebcamPanel.MjpegstreamerAdaptive") },
{ value: "uv4l-mjpeg", text: this.$t("Settings.WebcamPanel.Uv4lMjpeg") },
{ value: "ipstream", text: this.$t("Settings.WebcamPanel.Ipstream") },
],
};

9
src/components/panels/WebcamPanel.vue
View File

@ -55,6 +55,9 @@
<template v-else-if="'service' in this.currentCam && this.currentCam.service === 'mjpegstreamer-adaptive'">
<webcam-mjpegstreamer-adaptive :cam-settings="this.currentCam"></webcam-mjpegstreamer-adaptive>
</template>
<template v-else-if="'service' in this.currentCam && this.currentCam.service === 'uv4l-mjpeg'">
<webcam-uv4l-mjpeg :cam-settings="this.currentCam"></webcam-uv4l-mjpeg>
</template>
<template v-else-if="'service' in this.currentCam && this.currentCam.service === 'ipstream'">
<webcam-ipstreamer :cam-settings="this.currentCam"></webcam-ipstreamer>
</template>
@ -71,6 +74,7 @@
import Mjpegstreamer from "@/components/webcams/Mjpegstreamer"
import MjpegstreamerAdaptive from "@/components/webcams/MjpegstreamerAdaptive"
import Ipstreamer from "@/components/webcams/Ipstreamer"
import Uv4lMjpeg from "@/components/webcams/Uv4lMjpeg"
import WebcamGrid from "@/components/webcams/WebcamGrid"
export default {
@ -78,6 +82,7 @@
'webcam-mjpegstreamer': Mjpegstreamer,
'webcam-mjpegstreamer-adaptive': MjpegstreamerAdaptive,
'webcam-ipstreamer': Ipstreamer,
'webcam-uv4l-mjpeg': Uv4lMjpeg,
'webcam-grid': WebcamGrid,
},
data: function() {
@ -109,8 +114,8 @@
icon: "mdi-view-grid",
}
} else {
const currentCam = this.webcams.find(webcam => webcam.name === this.currentCamName)
if (currentCam) return currentCam
const currentCam = this.webcams.findIndex(webcam => webcam.name === this.currentCamName)
if (currentCam !== -1) return this.webcams[currentCam]
}
return {}

66
src/components/webcams/Uv4lMjpeg.vue Normal file
View File

@ -0,0 +1,66 @@
<style>
.webcamImage {
width: 100%;
}
</style>
<template>
<vue-load-image v-observe-visibility="visibilityChanged">
<img slot="image" :src="url" alt="Preview" :style="webcamStyle" class="webcamImage" />
<div slot="preloader" class="text-center py-5">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
<div slot="error" class="text-center py-5">
<v-icon x-large>mdi-webcam-off</v-icon>
<div class="subtitle-1 mt-2">{{ $t('Settings.WebcamPanel.UrlNotAvailable') }}</div>
</div>
</vue-load-image>
</template>
<script>
import VueLoadImage from "vue-load-image"
export default {
components: {
'vue-load-image': VueLoadImage
},
data: function() {
return {
isVisible: true,
}
},
props: {
camSettings: Object,
printerUrl: {
type: String,
default: null
}
},
created: function () {
},
computed: {
url() {
const baseUrl = this.camSettings.url
const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl)
const url = new URL(baseUrl, hostUrl.origin)
return decodeURIComponent(url.toString())
},
webcamStyle() {
let transforms = ""
if ('flipX' in this.camSettings && this.camSettings.flipX) transforms += " scaleX(-1)"
if ('flipX' in this.camSettings && this.camSettings.flipY) transforms += " scaleY(-1)"
if (transforms.trimLeft().length) return { transform: transforms.trimLeft() }
return ""
},
},
methods: {
visibilityChanged(isVisible) {
this.isVisible = isVisible
}
}
}
</script>

5
src/components/webcams/WebcamGrid.vue
View File

@ -16,6 +16,9 @@
<template v-else-if="'service' in webcam && webcam.service === 'mjpegstreamer-adaptive'">
<webcam-mjpegstreamer-adaptive :cam-settings="webcam"></webcam-mjpegstreamer-adaptive>
</template>
<template v-else-if="'service' in webcam && webcam.service === 'uv4l-mjpeg'">
<webcam-uv4l-mjpeg :cam-settings="webcam"></webcam-uv4l-mjpeg>
</template>
<template v-else-if="'service' in webcam && webcam.service === 'ipstream'">
<webcam-ipstreamer :cam-settings="webcam"></webcam-ipstreamer>
</template>
@ -30,6 +33,7 @@
<script>
import Mjpegstreamer from "@/components/webcams/Mjpegstreamer"
import MjpegstreamerAdaptive from "@/components/webcams/MjpegstreamerAdaptive"
import Uv4lMjpeg from "@/components/webcams/Uv4lMjpeg"
import Ipstreamer from "@/components/webcams/Ipstreamer"
export default {
@ -41,6 +45,7 @@
components: {
'webcam-mjpegstreamer': Mjpegstreamer,
'webcam-mjpegstreamer-adaptive': MjpegstreamerAdaptive,
'webcam-uv4l-mjpeg': Uv4lMjpeg,
'webcam-ipstreamer': Ipstreamer,
},
props: {