Merge branch 'develop'

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

Author: pedrolamas

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

@@ -9,9 +9,11 @@
         :is="cameraComponent"
         ref="component-instance"
         :camera="camera"
+        :crossorigin="crossorigin"
         class="camera-image"
         @raw-camera-url="rawCameraUrl = $event"
         @frames-per-second="framesPerSecond = $event"
+        @playback="setupFrameEvents()"
       />
     </template>
     <div v-else>
@@ -32,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}`">
@@ -68,14 +70,21 @@ export default class CameraItem extends Vue {
   @Prop({ type: Boolean, required: false, default: false })
   readonly fullscreen!: boolean
 
+  @Prop({ type: String })
+  readonly crossorigin?: 'anonymous' | 'use-credentials' | ''
+
   @Ref('component-instance')
   readonly componentInstance!: CameraMixin
 
   rawCameraUrl: string | null = null
   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/camera/services/HlsstreamCamera.vue

@@ -3,7 +3,7 @@
     ref="streamingElement"
     autoplay
     muted
-    crossorigin="anonymous"
+    :crossorigin="crossorigin"
     :style="cameraStyle"
   />
 </template>

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

@@ -4,7 +4,7 @@
     :src="cameraVideoSource"
     autoplay
     muted
-    crossorigin="anonymous"
+    :crossorigin="crossorigin"
     :style="cameraStyle"
   />
 </template>

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

@@ -3,7 +3,7 @@
     ref="streamingElement"
     :src="cameraImageSource"
     :style="cameraStyle"
-    crossorigin="anonymous"
+    :crossorigin="crossorigin"
     @load="handleImageLoad"
   >
 </template>

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

@@ -3,7 +3,7 @@
     ref="streamingElement"
     :src="cameraImageSource"
     :style="cameraStyle"
-    crossorigin="anonymous"
+    :crossorigin="crossorigin"
   >
 </template>
 

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

@@ -4,7 +4,7 @@
     autoplay
     muted
     :style="cameraStyle"
-    crossorigin="anonymous"
+    :crossorigin="crossorigin"
   />
 </template>
 

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