fix: fix issue with webcams in farm printers

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

@@ -23,7 +23,7 @@ export default class Hlsstreamer extends Mixins(BaseMixin) {
     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
@@ -32,7 +32,11 @@ export default class Hlsstreamer extends Mixins(BaseMixin) {
     get url() {
         if (!this.isVisible) return ''
 
-        return this.camSettings.stream_url || ''
+        const baseUrl = this.camSettings.stream_url
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
     }
 
     get webcamStyle() {

src/components/webcams/Ipstreamer.vue

@@ -12,12 +12,16 @@ export default class Ipstreamer extends Mixins(BaseMixin) {
     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 || ''
+        const baseUrl = this.camSettings.stream_url
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
     }
 
     get webcamStyle() {

src/components/webcams/JMuxerStream.vue

@@ -22,14 +22,18 @@ export default class JMuxerStreamer extends Mixins(BaseMixin) {
     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 || ''
+        const baseUrl = this.camSettings.stream_url
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
     }
 
     get webcamStyle() {

src/components/webcams/Mjpegstreamer.vue

@@ -34,7 +34,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
 
@@ -45,7 +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)
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
 
         return decodeURIComponent(url.toString())

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

@@ -22,15 +22,15 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) {
     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)
+        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
         if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
 
         return decodeURIComponent(url.toString())

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'