fix: fix issue with webcams in farm printers

src/components/mixins/webcam.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import Component from 'vue-class-component'
 import {
     mdiAlbum,
@@ -10,9 +9,23 @@ import {
     mdiRaspberryPi,
     mdiWebcam,
 } from '@mdi/js'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
 
 @Component
-export default class WebcamMixin extends Vue {
+export default class WebcamMixin extends Mixins(BaseMixin) {
+    convertUrl(baseUrl: string, printerUrl: string | null) {
+        let url = new URL(baseUrl, this.hostUrl.toString())
+
+        // use printerURL if it exists
+        if (printerUrl !== null) url = new URL(baseUrl, printerUrl)
+
+        // overwrite url to baseUrl, if it is an absolute URL
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
+    }
+
     convertWebcamIcon(iconName: string): string {
         switch (iconName) {
             case 'mdiAlbum':

src/components/panels/FarmPrinterPanel.vue

@@ -50,7 +50,7 @@
                                 'service' in currentWebcam
                             "
                             class="webcamContainer">
-                            <webcam-wrapper :webcam="currentWebcam" :show-fps="false" />
+                            <webcam-wrapper :webcam="currentWebcam" :printer-url="printerUrl" :show-fps="false" />
                         </div>
                         <v-card-title
                             class="white--text py-2"

src/components/webcams/Hlsstreamer.vue

@@ -15,24 +15,23 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Hls from 'hls.js'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Hlsstreamer extends Mixins(BaseMixin) {
+export default class Hlsstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = true
     private hls: Hls | null = null
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
-    @Prop() printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         video: HTMLVideoElement
     }
 
     get url() {
-        if (!this.isVisible) return ''
-
-        return this.camSettings.stream_url || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

src/components/webcams/Ipstreamer.vue

@@ -6,18 +6,17 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Ipstreamer extends Mixins(BaseMixin) {
+export default class Ipstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private isVisible = true
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
-    @Prop() printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     get url() {
-        if (!this.isVisible) return ''
-
-        return this.camSettings.stream_url || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

src/components/webcams/JMuxerStream.vue

@@ -15,21 +15,22 @@ import JMuxer from 'jmuxer'
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class JMuxerStreamer extends Mixins(BaseMixin) {
+export default class JMuxerStreamer extends Mixins(BaseMixin, WebcamMixin) {
     private jmuxer: JMuxer | null = null
     private status: string = 'connecting'
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
-    @Prop() printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         video: HTMLVideoElement
     }
 
     get url() {
-        return this.camSettings.stream_url || ''
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

src/components/webcams/Mjpegstreamer.vue

@@ -15,12 +15,13 @@ import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 const CONTENT_LENGTH = 'content-length'
 const TYPE_JPEG = 'image/jpeg'
 
 @Component
-export default class Mjpegstreamer extends Mixins(BaseMixin) {
+export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private currentFPS = 0
     private streamState = false
     private aspectRatio: null | number = null
@@ -34,7 +35,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
     private isVisibleDocument = true
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
-    @Prop() printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     @Prop({ default: true }) declare showFps: boolean
 
@@ -44,11 +45,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

src/components/webcams/MjpegstreamerAdaptive.vue

@@ -46,7 +46,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
     }
 
     @Prop({ required: true }) declare camSettings: GuiWebcamStateWebcam
-    @Prop() declare printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
     @Prop({ default: true }) declare showFps: boolean
 
     get webcamStyle() {
@@ -89,7 +89,7 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
     async setFrame() {
         const baseUrl = this.camSettings.snapshot_url
 
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
 
         url.searchParams.append('bypassCache', this.refresh.toString())

src/components/webcams/Uv4lMjpeg.vue

@@ -13,27 +13,24 @@
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Uv4lMjpeg extends Mixins(BaseMixin) {
+export default class Uv4lMjpeg extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = false
     private isVisibleViewport = false
     private isVisibleDocument = true
 
     @Prop({ required: true }) declare readonly camSettings: GuiWebcamStateWebcam
-    @Prop() declare printerUrl: string | undefined
+    @Prop({ default: null }) readonly printerUrl!: string | null
 
     declare $refs: {
         webcamUv4lMjpegImage: HTMLImageElement
     }
 
     get url() {
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

src/components/webcams/WebcamWrapper.vue

@@ -4,13 +4,13 @@
             <v-container v-if="webcams" fluid class="pb-4">
                 <v-row dense>
                     <v-col v-for="gridWebcam in webcams" :key="gridWebcam.name" cols="6">
-                        <webcam-wrapper-item :webcam="gridWebcam" :show-fps="showFps" />
+                        <webcam-wrapper-item :webcam="gridWebcam" :printer-url="printerUrl" :show-fps="showFps" />
                     </v-col>
                 </v-row>
             </v-container>
         </template>
         <template v-else>
-            <webcam-wrapper-item :webcam="webcam" :show-fps="showFps" />
+            <webcam-wrapper-item :webcam="webcam" :printer-url="printerUrl" :show-fps="showFps" />
         </template>
     </div>
 </template>
@@ -30,6 +30,7 @@ import WebcamWrapperItem from '@/components/webcams/WebcamWrapperItem.vue'
 export default class WebcamWrapper extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
+    @Prop({ type: String, default: null }) printerUrl!: string | null
 
     get webcams(): GuiWebcamStateWebcam[] {
         return this.$store.getters['gui/webcams/getWebcams']

src/components/webcams/WebcamWrapperItem.vue

@@ -1,31 +1,31 @@
 <template>
     <div>
         <template v-if="service === 'mjpegstreamer'">
-            <mjpegstreamer :cam-settings="webcam" :show-fps="showFps" />
+            <mjpegstreamer :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'mjpegstreamer-adaptive'">
-            <mjpegstreamer-adaptive :cam-settings="webcam" :show-fps="showFps" />
+            <mjpegstreamer-adaptive :cam-settings="webcam" :show-fps="showFps" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'uv4l-mjpeg'">
-            <uv4l-mjpeg :cam-settings="webcam" />
+            <uv4l-mjpeg :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'ipstream'">
-            <ipstreamer :cam-settings="webcam" />
+            <ipstreamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'hlsstream'">
-            <hlsstreamer :cam-settings="webcam" />
+            <hlsstreamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'jmuxer-stream'">
-            <j-muxer-stream :cam-settings="webcam" />
+            <j-muxer-stream :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-camerastreamer'">
-            <webrtc-camera-streamer :cam-settings="webcam" />
+            <webrtc-camera-streamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-janus'">
-            <janus-streamer :cam-settings="webcam" />
+            <janus-streamer :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else-if="service === 'webrtc-mediamtx'">
-            <webrtc-media-m-t-x :cam-settings="webcam" />
+            <webrtc-media-m-t-x :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
         <template v-else>
             <p class="text-center py-3 font-italic">{{ $t('Panels.WebcamPanel.UnknownWebcamService') }}</p>
@@ -55,6 +55,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 export default class WebcamWrapperItem extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) webcam!: GuiWebcamStateWebcam
     @Prop({ type: Boolean, default: true }) showFps!: Boolean
+    @Prop({ default: null }) printerUrl!: string | null
 
     get service() {
         return this.webcam?.service ?? 'unknown'

src/components/webcams/WebrtcMediaMTX.vue

@@ -21,10 +21,12 @@
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
+export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin, WebcamMixin) {
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
     @Ref() declare video: HTMLVideoElement
 
     // webrtc player vars
@@ -54,11 +56,12 @@ export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        if (this.camSettings.stream_url.startsWith('http')) {
-            return this.camSettings.stream_url.replace('http', 'ws') + 'ws'
+        let baseUrl = this.camSettings.stream_url
+        if (baseUrl.startsWith('http')) {
+            baseUrl = baseUrl.replace('http', 'ws') + 'ws'
         }
 
-        return this.camSettings.stream_url
+        return this.convertUrl(baseUrl, this.printerUrl)
     }
 
     // stop and restart the video if the url changes