feat(spoolman): QR code scanning support (#1149)

Signed-off-by: Mathis Mensing <github@matmen.dev>
Co-authored-by: Pedro Lamas <pedrolamas@gmail.com>

Author: matmen

docs/features/spoolman.md

@@ -22,11 +22,9 @@ Fluidd offers support for the [Spoolman](https://github.com/Donkie/Spoolman) fil
 ### Print start
 On print start, Fluidd will show a modal asking you to select the spool you want to use for printing.
 The modal shows all available (i.e. not archived) spools.
-<!-- TODO uncomment when QR scanning is available
 A spool can either be selected by selecting it directly, or by scanning an associated QR code using an attached webcam.
 
 ![screenshot](/assets/images/spoolman-scan-spool.png)
--->
 
 Automatically opening the spool selection modal can be disabled from the Fluidd settings.
 

src/components/settings/SpoolmanSettings.vue

@@ -18,7 +18,6 @@
         />
       </app-setting>
 
-      <!-- TODO uncomment when QR scanning is available
       <v-divider />
       <app-setting
         :title="$tc('app.spoolman.setting.auto_open_qr_camera')"
@@ -32,7 +31,28 @@
           :items="supportedCameras"
         />
       </app-setting>
-      -->
+
+      <v-divider />
+      <app-setting
+        :title="$t('app.spoolman.setting.prefer_device_camera')"
+      >
+        <v-switch
+          v-model="preferDeviceCamera"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
+
+      <v-divider />
+      <app-setting
+        :title="$t('app.spoolman.setting.auto_select_spool_on_match')"
+      >
+        <v-switch
+          v-model="autoSelectSpoolOnMatch"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
 
       <v-divider />
       <app-setting :title="$t('app.setting.label.reset')">
@@ -91,6 +111,30 @@ export default class SpoolmanSettings extends Mixins(StateMixin) {
     })
   }
 
+  get preferDeviceCamera () {
+    return this.$store.state.config.uiSettings.spoolman.preferDeviceCamera
+  }
+
+  set preferDeviceCamera (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.spoolman.preferDeviceCamera',
+      value,
+      server: true
+    })
+  }
+
+  get autoSelectSpoolOnMatch () {
+    return this.$store.state.config.uiSettings.spoolman.autoSelectSpoolOnMatch
+  }
+
+  set autoSelectSpoolOnMatch (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.spoolman.autoSelectSpoolOnMatch',
+      value,
+      server: true
+    })
+  }
+
   handleReset () {
     this.$store.dispatch('config/saveByPath', {
       path: 'uiSettings.spoolman',

src/components/widgets/camera/CameraItem.vue

@@ -13,6 +13,7 @@
         class="camera-image"
         @raw-camera-url="rawCameraUrl = $event"
         @frames-per-second="framesPerSecond = $event"
+        @playback="setupFrameEvents()"
       />
     </template>
     <div v-else>
@@ -33,7 +34,7 @@
     </div>
 
     <div
-      v-if="!fullscreen && (fullscreenMode === 'embed' || !rawCameraUrl)"
+      v-if="!fullscreen && (fullscreenMode === 'embed' || !rawCameraUrl) && camera.service !== 'device'"
       class="camera-fullscreen"
     >
       <a :href="`/#/camera/${camera.id}`">
@@ -79,7 +80,11 @@ export default class CameraItem extends Vue {
   framesPerSecond : string | null = null
 
   mounted () {
-    if (this.$listeners?.frame) {
+    this.setupFrameEvents()
+  }
+
+  setupFrameEvents () {
+    if (this.$listeners?.frame && this.componentInstance) {
       if (this.componentInstance.streamingElement instanceof HTMLImageElement) {
         this.componentInstance.streamingElement.addEventListener('load', () => this.handleFrame())
       } else if (this.componentInstance.streamingElement instanceof HTMLVideoElement) {

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

@@ -0,0 +1,29 @@
+<template>
+  <video
+    ref="streamingElement"
+    autoplay
+    muted
+    :style="cameraStyle"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Ref, Mixins } from 'vue-property-decorator'
+import CameraMixin from '@/mixins/camera'
+
+@Component({})
+export default class DeviceCamera extends Mixins(CameraMixin) {
+  @Ref('streamingElement')
+  readonly cameraVideo!: HTMLVideoElement
+
+  startPlayback () {
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then(stream => (this.cameraVideo.srcObject = stream))
+      .then(() => this.$emit('playback'))
+  }
+
+  stopPlayback () {
+    this.cameraVideo.srcObject = null
+  }
+}
+</script>

src/components/widgets/spoolman/QRReader.vue

@@ -16,6 +16,7 @@
       <CameraItem
         :camera="camera"
         :embedded="true"
+        crossorigin="anonymous"
         @frame="handlePrinterCameraFrame"
       />
     </v-card-text>
@@ -34,12 +35,14 @@ import BrowserMixin from '@/mixins/browser'
   components: { CameraItem }
 })
 export default class QRReader extends Mixins(StateMixin, BrowserMixin) {
-  dataPatterns = [/\/spool\/show\/(\d+)\/?/]
+  dataPatterns = [
+    /web\+spoolman:s-(\d+)/,
+    /\/spool\/show\/(\d+)\/?/
+  ]
+
   statusMessage = 'info.howto'
   lastScanTimestamp = Date.now()
   processing = false
-
-  video!: HTMLVideoElement | HTMLImageElement
   context!: CanvasRenderingContext2D
 
   @VModel({ type: String, default: null })
@@ -49,6 +52,9 @@ export default class QRReader extends Mixins(StateMixin, BrowserMixin) {
     canvas!: HTMLCanvasElement
 
   get camera () {
+    if (this.source === 'device') {
+      return { name: this.$t('app.spoolman.label.device_camera'), service: 'device' }
+    }
     return this.$store.getters['cameras/getCameraById'](this.source)
   }
 
@@ -90,13 +96,23 @@ export default class QRReader extends Mixins(StateMixin, BrowserMixin) {
       this.canvas.height = image.naturalHeight
     }
 
+    if (!this.canvas.width || !this.canvas.height) {
+      // no image drawn yet
+      this.processing = false
+      return
+    }
+
     try {
       this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height)
       const result = await QrScanner.scanImage(this.canvas, { returnDetailedScanResult: true })
       if (result.data) { this.handleCodeFound(result.data) }
     } catch (err) {
       if (err instanceof DOMException) {
-        this.statusMessage = 'error.no_image_data'
+        if (err.name === 'SecurityError') {
+          this.statusMessage = 'error.cors'
+        } else {
+          this.statusMessage = 'error.no_image_data'
+        }
       }
 
       // no QR code found

src/components/widgets/spoolman/SpoolSelectionDialog.vue

@@ -18,7 +18,6 @@
 
           <v-spacer />
 
-          <!-- TODO uncomment when QR scanning is available
           <v-menu
             v-if="cameras.length > 1"
             v-model="cameraSelectionMenuOpen"
@@ -74,7 +73,6 @@
               {{ $t('app.spoolman.btn.scan_code') }}
             </template>
           </app-btn>
-          -->
 
           <v-text-field
             v-model="search"
@@ -130,6 +128,7 @@
                     </div>
                   </div>
                 </td>
+                <td>{{ item.id }}</td>
                 <td>{{ item.filament.material }}</td>
                 <td>{{ item.location }}</td>
                 <td>{{ item.comment }}</td>
@@ -196,6 +195,7 @@ import { Spool } from '@/store/spoolman/types'
 import BrowserMixin from '@/mixins/browser'
 import QRReader from '@/components/widgets/spoolman/QRReader.vue'
 import { CameraConfig } from '@/store/cameras/types'
+import QrScanner from 'qr-scanner'
 
 @Component({
   components: { QRReader }
@@ -207,6 +207,12 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
   cameraScanSource: null | string = null
   cameraSelectionMenuOpen = false
 
+  hasDeviceCamera = false
+
+  async mounted () {
+    this.hasDeviceCamera = await QrScanner.hasCamera()
+  }
+
   @Watch('open')
   onOpen () {
     if (this.open) {
@@ -217,9 +223,13 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
         SocketActions.serverFilesMetadata(this.currentFileName)
       }
 
-      const autoOpenCameraId = this.$store.state.config.uiSettings.spoolman.autoOpenQRDetectionCamera
-      if (this.$store.getters['cameras/getCameraById'](autoOpenCameraId)) {
-        this.$nextTick(() => (this.cameraScanSource = autoOpenCameraId))
+      if (this.hasDeviceCamera && this.$store.state.config.uiSettings.spoolman.preferDeviceCamera) {
+        this.$nextTick(() => (this.cameraScanSource = 'device'))
+      } else {
+        const autoOpenCameraId = this.$store.state.config.uiSettings.spoolman.autoOpenQRDetectionCamera
+        if (this.$store.getters['cameras/getCameraById'](autoOpenCameraId)) {
+          this.$nextTick(() => (this.cameraScanSource = autoOpenCameraId))
+        }
       }
     }
   }
@@ -260,6 +270,7 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
   get headers () {
     return [
       'filament_name',
+      'id',
       'material',
       'location',
       'comment',
@@ -302,8 +313,15 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
   }
 
   get cameras () {
-    return this.$store.getters['cameras/getEnabledCameras']
+    const cameras = this.$store.getters['cameras/getEnabledCameras']
       .filter((camera: CameraConfig) => camera.service !== 'iframe')
+
+    if (this.hasDeviceCamera) {
+      // always show device camera first
+      cameras.unshift({ name: this.$t('app.spoolman.label.device_camera'), id: 'device' })
+    }
+
+    return cameras
   }
 
   get scanSource () {
@@ -325,6 +343,10 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
       // clear filter if selected spool isn't in filter results
       this.search = ''
     }
+
+    if (this.$store.state.config.uiSettings.spoolman.autoSelectSpoolOnMatch) {
+      this.handleSelectSpool()
+    }
   }
 
   async handleSelectSpool () {

src/locales/de.yaml

@@ -706,6 +706,7 @@ app:
     label:
       change_spool: Suple wechseln
       comment: Kommentar
+      device_camera: Gerät
       filament_name: Filament
       first_used: Zuerst genutzt
       last_used: Zuletzt genutzt
@@ -739,11 +740,17 @@ app:
         code_not_recognized: Dieser Code sieht nicht nach einem kompatiblen QR-Code aus.
         invalid_spool_id: Die Spulen-ID in diesem QR-Code ist ungültig.
       error:
+        cors: >-
+          Es ist ein Fehler beim Abrufen des Kamerabilds aufgetreten.
+          Bitte stellen Sie sicher, dass Ihr Kameraserver CORS-Zugriff erlaubt.
+          Please make sure your webcam server allows CORS access.
         spool_not_existant: Die von Ihnen gescannte Spule existiert nicht in der Datenbank.
         no_image_data: >-
           Es ist ein Fehler beim Abrufen des Kamerabilds aufgetreten.
           Bitte überprüfen Sie Ihre Kameraeinstellungen oder versuchen Sie,
           eine andere Kameraquelle zu verwenden.
     setting:
       auto_open_qr_camera: Kamera automatisch zur QR-Code- Erkennung öffnen
+      auto_select_spool_on_match: Spulenauswahl bei QR-Code- Übereinstimmung automatisch übernehmen
+      prefer_device_camera: Gerätekamera wenn verfügbar zur QR-Code- Erkennung verwenden
       show_spool_selection_dialog_on_print_start: Spulenauswahl-Dialog automatisch bei Druckstart anzeigen

src/locales/en.yaml

@@ -769,8 +769,10 @@ app:
     label:
       change_spool: Change Spool
       comment: Comment
+      device_camera: Device
       filament_name: Filament
       first_used: First Used
+      id: ID
       last_used: Last Used
       location: Location
       lot_nr: Lot Nr
@@ -802,10 +804,15 @@ app:
         code_not_recognized: This code doesn't look like a compatible QR code.
         invalid_spool_id: The spool ID contained in this QR code is invalid.
       error:
+        cors: >-
+          There was an error accessing the cameras feed.
+          Please make sure your webcam server allows CORS access.
         spool_not_existant: The spool you scanned doesn't exist in the database.
         no_image_data: >-
           There was an error accessing the cameras feed.
           Please check your camera configuration or try another camera source.
     setting:
       auto_open_qr_camera: Automatically open camera for QR code detection
+      auto_select_spool_on_match: Automatically commit spool selection on QR code match
+      prefer_device_camera: Use device camera for QR code detection if available
       show_spool_selection_dialog_on_print_start: Show spool selection dialog on print start

src/store/cameras/types.ts

@@ -33,7 +33,7 @@ export interface CameraConfig extends CameraConfigWithoutId {
   id: string;
 }
 
-export type CameraService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer'
+export type CameraService = 'mjpegstreamer' | 'mjpegstreamer-adaptive' | 'ipstream' | 'iframe' | 'hlsstream' | 'webrtc-camerastreamer' | 'device'
 
 export interface LegacyCamerasState {
   activeCamera: string;

src/store/config/state.ts

@@ -143,7 +143,9 @@ export const defaultState = (): ConfigState => {
       },
       spoolman: {
         autoSpoolSelectionDialog: true,
-        autoOpenQRDetectionCamera: null
+        autoOpenQRDetectionCamera: null,
+        autoSelectSpoolOnMatch: false,
+        preferDeviceCamera: false
       }
     }
   }