feat: adds UV4L-MJPEG camera support (#1734)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

src/components/settings/cameras/CameraConfigDialog.vue

@@ -79,6 +79,7 @@
           :items="[
             { text: $t('app.setting.camera_type_options.mjpegadaptive'), value: 'mjpegstreamer-adaptive' },
             { text: $t('app.setting.camera_type_options.mjpegstream'), value: 'mjpegstreamer' },
+            { text: $t('app.setting.camera_type_options.uv4l_mjpeg_stream'), value: 'uv4l-mjpeg' },
             { text: $t('app.setting.camera_type_options.hlsstream'), value: 'hlsstream' },
             { text: $t('app.setting.camera_type_options.webrtc_camera_streamer'), value: 'webrtc-camerastreamer' },
             { text: $t('app.setting.camera_type_options.webrtc_go2rtc'), value: 'webrtc-go2rtc' },

src/components/widgets/camera/CameraItem.vue

@@ -112,7 +112,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
-import type { WebcamConfig } from '@/store/webcams/types'
+import type { WebcamConfig, WebcamService } from '@/store/webcams/types'
 import type { CameraFullscreenAction } from '@/store/config/types'
 import { CameraComponents } from '@/dynamicImports'
 import CameraMixin from '@/mixins/camera'
@@ -157,8 +157,14 @@ export default class CameraItem extends Vue {
   }
 
   get cameraComponent () {
-    if (this.camera.service) {
-      const componentName = `${startCase(this.camera.service).replace(/ /g, '')}Camera`
+    const cameraService: Exclude<WebcamService, 'uv4l-mjpeg'> | undefined = (
+      this.camera.service === 'uv4l-mjpeg'
+        ? 'mjpegstreamer'
+        : this.camera.service
+    )
+
+    if (cameraService) {
+      const componentName = `${startCase(cameraService).replace(/ /g, '')}Camera`
 
       if (componentName in CameraComponents) {
         return CameraComponents[componentName]

src/locales/en.yaml

@@ -578,6 +578,7 @@ app:
       webrtc_camera_streamer: WebRTC (camera-streamer)
       video: IP Camera
       iframe: HTTP page
+      uv4l_mjpeg_stream: UV4L-MJPEG Stream
       webrtc_go2rtc: WebRTC (go2rtc)
       webrtc_mediamtx: WebRTC (MediaMTX)
     camera_rotate_options:

src/store/webcams/types.ts

@@ -25,7 +25,7 @@ export interface WebcamConfig extends NewWebcamConfig {
   source: WebcamSource;
 }
 
-export type WebcamService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer' | 'webrtc-go2rtc' | 'webrtc-mediamtx' | 'device'
+export type WebcamService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer' | 'webrtc-go2rtc' | 'webrtc-mediamtx' | 'uv4l-mjpeg' | 'device'
 
 export type WebcamRotation = 0 | 90 | 180 | 270