feat: split camera stream and snapshot urls

Signed-off-by: Pedro Lamas <[email protected]>

src/components/settings/cameras/CameraConfigDialog.vue

@@ -130,7 +130,7 @@
         <v-divider />
       </template>
 
-      <app-setting :title="$t('app.setting.label.camera_url')">
+      <app-setting :title="$t('app.setting.label.camera_url_stream')">
         <v-text-field
           v-model="camera.urlStream"
           type="url"
@@ -146,6 +146,24 @@
         />
       </app-setting>
 
+      <v-divider />
+
+      <app-setting :title="$t('app.setting.label.camera_url_snapshot')">
+        <v-text-field
+          v-model="camera.urlSnapshot"
+          type="url"
+          spellcheck="false"
+          class="mt-5"
+          filled
+          dense
+          single-line
+          hide-details="auto"
+          :rules="[
+            $rules.required
+          ]"
+        />
+      </app-setting>
+
       <template v-if="camera.service === 'iframe'">
         <v-divider />
 

src/components/settings/cameras/Cameras.vue

@@ -133,7 +133,8 @@ export default class CameraSettings extends Vue {
       service: 'mjpegstreamer-adaptive',
       targetFps: 15,
       targetFpsIdle: 5,
-      urlStream: Globals.DEFAULTS.CAMERA_URL
+      urlStream: Globals.DEFAULTS.CAMERA_URL_STREAM,
+      urlSnapshot: Globals.DEFAULTS.CAMERA_URL_SNAPSHOT
     }
 
     this.dialogState = {

src/components/widgets/camera/services/HlsstreamCamera.vue

@@ -20,7 +20,7 @@ export default class HlsstreamCamera extends Mixins(CameraMixin) {
   hls: Hls | null = null
 
   startPlayback () {
-    const url = this.cameraUrl
+    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
 
     if (Hls.isSupported()) {
       this.hls?.destroy()

src/components/widgets/camera/services/IframeCamera.vue

@@ -22,9 +22,11 @@ export default class IframeCamera extends Mixins(CameraMixin) {
   cameraIFrameSource = ''
 
   startPlayback () {
-    this.cameraIFrameSource = this.cameraUrl
+    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
 
-    this.$emit('raw-camera-url', this.cameraUrl)
+    this.cameraIFrameSource = url
+
+    this.$emit('raw-camera-url', url)
   }
 
   stopPlayback () {

src/components/widgets/camera/services/IpstreamCamera.vue

@@ -20,9 +20,11 @@ export default class IpstreamCamera extends Mixins(CameraMixin) {
   cameraVideoSource = ''
 
   startPlayback () {
-    this.cameraVideoSource = this.cameraUrl
+    const url = this.buildAbsoluteUrl(this.camera.urlStream || '').toString()
 
-    this.$emit('raw-camera-url', this.cameraUrl)
+    this.cameraVideoSource = url
+
+    this.$emit('raw-camera-url', url)
   }
 
   stopPlayback () {

src/components/widgets/camera/services/MjpegstreamerAdaptiveCamera.vue

@@ -67,21 +67,19 @@ export default class MjpegstreamerAdaptiveCamera extends Mixins(CameraMixin) {
   }
 
   startPlayback () {
-    const url = new URL(this.cameraUrl)
+    const url = this.buildAbsoluteUrl(this.camera.urlSnapshot || '')
 
     this.requestStartTime = performance.now()
 
-    if (!url.searchParams.get('action')?.startsWith('snapshot')) {
-      url.searchParams.set('action', 'snapshot')
-    }
-
     url.searchParams.set('cacheBust', Date.now().toString())
 
     this.cameraImageSource = url.toString()
 
-    url.searchParams.set('action', 'stream')
+    const rawUrl = this.buildAbsoluteUrl(this.camera.urlStream || '')
+
+    rawUrl.searchParams.set('cacheBust', Date.now().toString())
 
-    this.$emit('raw-camera-url', url.toString())
+    this.$emit('raw-camera-url', rawUrl.toString())
   }
 
   stopPlayback () {

src/components/widgets/camera/services/MjpegstreamerCamera.vue

@@ -18,11 +18,7 @@ export default class MjpegstreamerCamera extends Mixins(CameraMixin) {
   cameraImageSource = ''
 
   startPlayback () {
-    const url = new URL(this.cameraUrl)
-
-    if (!url.searchParams.get('action')?.startsWith('stream')) {
-      url.searchParams.set('action', 'stream')
-    }
+    const url = this.buildAbsoluteUrl(this.camera.urlStream || '')
 
     url.searchParams.set('cacheBust', Date.now().toString())
 

src/components/widgets/camera/services/WebrtcCamerastreamerCamera.vue

@@ -21,7 +21,7 @@ export default class WebrtcCamerastreamerCamera extends Mixins(CameraMixin) {
   remoteId: string | null = null
 
   startPlayback () {
-    const url = this.cameraUrl
+    const url = this.buildAbsoluteUrl(this.camera.urlStream || '')
 
     this.pc?.close()
 

src/globals.ts

@@ -159,7 +159,8 @@ export const Globals = Object.freeze({
   APP_NAME: 'fluidd',
   HEADER_HEIGHT: 56,
   DEFAULTS: {
-    CAMERA_URL: '/webcam?action=stream'
+    CAMERA_URL_STREAM: '/webcam?action=stream',
+    CAMERA_URL_SNAPSHOT: '/webcam?action=snapshot'
   },
   NETWORK_REQUEST_TIMEOUT: 0,
   KLIPPY_RETRY_DELAY: 1500,

src/locales/en.yaml

@@ -500,7 +500,8 @@ app:
         rawstream: Raw stream
       camera_rotate_by: Rotate by
       camera_stream_type: Stream type
-      camera_url: Camera Url
+      camera_url_snapshot: Camera Url Snapshot
+      camera_url_stream: Camera Url Stream
       card: Card
       collector: Collector
       confirm_on_estop: Require confirm on Emergency Stop

src/mixins/camera.ts

@@ -17,14 +17,6 @@ export default class CameraMixin extends Vue {
     return this.$store.state.config.apiUrl
   }
 
-  get cameraUrl () {
-    const baseUrl = this.camera.urlStream || this.camera.urlSnapshot || ''
-
-    const { origin } = new URL(this.apiUrl)
-
-    return new URL(baseUrl, origin).toString()
-  }
-
   get cameraStyle () {
     return {
       transform: this.cameraTransformStyle || undefined
@@ -95,6 +87,12 @@ export default class CameraMixin extends Vue {
     }
   }
 
+  buildAbsoluteUrl (url: string) {
+    const { origin } = new URL(this.apiUrl)
+
+    return new URL(url, origin)
+  }
+
   startPlayback () {
     // noop
   }