feature: add UV4L-MJPEG webcam support

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/panels/Settings/WebcamPanel.vue

@@ -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") },
             ],
         };

src/components/panels/WebcamPanel.vue

@@ -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)
+                    const currentCam = this.webcams.findIndex(webcam => webcam.name === this.currentCamName)
-                    if (currentCam) return currentCam
+                    if (currentCam !== -1) return this.webcams[currentCam]
                 }
 
                 return {}

src/components/webcams/Uv4lMjpeg.vue

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

src/components/webcams/WebcamGrid.vue

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