fix: barcode reader issues bayang#126 bayang#118

rluetzner · Aug 19, 2024 · ff6090b · ff6090b
1 parent f623512
commit ff6090b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/jelu-ui/package-lock.json b/src/jelu-ui/package-lock.json
diff --git a/src/jelu-ui/package.json b/src/jelu-ui/package.json
@@ -19,7 +19,7 @@
     "@saekitominaga/isbn-verify": "2.0.1",
     "@splidejs/splide": "4.1.4",
     "@splidejs/vue-splide": "0.6.12",
-    "@teckel/vue-barcode-reader": "^1.1.6",
+    "@teckel/vue-barcode-reader": "^1.1.7",
     "@vueuse/core": "10.9.0",
     "@vueuse/router": "10.9.0",
     "axios": "1.6.8",

diff --git a/src/jelu-ui/src/components/AutoImportFormModal.vue b/src/jelu-ui/src/components/AutoImportFormModal.vue
@@ -75,6 +75,8 @@ const isValid = computed(() => StringUtils.isNotBlank(form.title)
 || StringUtils.isNotBlank(form.isbn)
 || StringUtils.isNotBlank(form.authors))
 
+let barcodeReader: any = null
+
 function toggleScanModal() {
     oruga.modal.open({
       component: ScanModal,
@@ -90,6 +92,9 @@ function toggleScanModal() {
           if (barcode != null) {
             form.isbn = barcode
           }
+      },
+      barcodeLoaded: (reader) => {
+        barcodeReader = reader
       }
     },
       onClose: scanModalClosed
@@ -118,7 +123,13 @@ function togglePluginsModal() {
 
 function scanModalClosed() {
   console.log("scan modal closed")
+    barcodeReader.codeReader.stream
+        .getTracks()
+        .forEach(function (track) {
+            track.stop();
+        });
 }
+
 function pluginsModalClosed() {
   console.log("plugins modal closed")
 }

diff --git a/src/jelu-ui/src/components/ScanModal.vue b/src/jelu-ui/src/components/ScanModal.vue
@@ -10,10 +10,12 @@ const { t } = useI18n({
 
 const emit = defineEmits<{
   (e: 'close'): void,
-  (e: 'decoded', barcode: string|null): void
+  (e: 'decoded', barcode: string|null): void,
+  (e: 'barcodeLoaded', reader: any): void
 }>()
 
 const decodedText = ref("");
+const barcodeReader = ref()
 
 const acceptBarcode = () => {
     emit('decoded', decodedText.value)
@@ -22,6 +24,7 @@ const acceptBarcode = () => {
 
 const onLoaded = () => {
   console.log("barcode modal loaded");
+  emit('barcodeLoaded', barcodeReader.value)
 };
 const onDecode = (text: string) => {
   console.log("barcode " + text);
@@ -42,6 +45,7 @@ const onDecode = (text: string) => {
       <div>
         <div class="field mb-2">
           <StreamBarcodeReader
+            ref="barcodeReader"
             torch
             no-front-cameras
             @decode="onDecode"