From 28e86e50323e5b2bee4d0564f7c3c34e8e0cddde Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Fri, 6 Mar 2026 15:21:10 +0100
Subject: [PATCH] Barcode scanner improvements

- Added a message when no cameras are found.
- Release the camera when the popup is closed.
---
 front/src/ScanBook.vue    | 38 +++++++++++++++++++++++++++++---------
 front/src/locales/en.json |  3 ++-
 front/src/locales/fr.json |  3 ++-
 front/src/main.js         |  2 +-
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/front/src/ScanBook.vue b/front/src/ScanBook.vue
index 03565fc..d86c22b 100644
--- a/front/src/ScanBook.vue
+++ b/front/src/ScanBook.vue
@@ -1,21 +1,40 @@
 <script setup>
-import { useTemplateRef, onMounted, ref } from 'vue'
+import { useTemplateRef, onMounted, onUnmounted, ref } from 'vue'
 import { BrowserMultiFormatReader } from '@zxing/library'
+import { i18n } from "@/main";
 
 const emit = defineEmits('readBarcode')
 
-const scanResult = ref(null)
-const codeReader = new BrowserMultiFormatReader()
-const scannerElement = useTemplateRef('scanner')
+const { t } = i18n.global;
+
+const scanResult = ref(null);
+const scanErr = ref(null);
+const codeReader = new BrowserMultiFormatReader();
+const scannerElement = useTemplateRef('scanner');
 
 onMounted(() => {
-  codeReader.decodeFromVideoDevice(undefined, scannerElement.value, (result, err) => {
-    if (result) {
-      emit('readBarcode', result.text)
-    }
-  })
+  if (!codeReader.isMediaDevicesSuported || !codeReader.canEnumerateDevices) {
+    scanErr.value = "This browser does not support this feature.";
+    return
+  }
+  codeReader.listVideoInputDevices()
+    .then((mediaDevicesInfoArray) => {
+      if (mediaDevicesInfoArray.length > 0) {
+        codeReader.decodeFromVideoDevice(undefined, scannerElement.value, (result, err) => {
+          if (result) {
+            emit('readBarcode', result.text);
+          }
+        })
+      } else {
+        scanErr.value = t('barcode.nocamera');
+      }
+    })
 })
 
+
+onUnmounted(() => {
+  codeReader.reset();
+})
 function onResult(result) {
   scanResult.value = result
 }
@@ -23,6 +42,7 @@ function onResult(result) {
 
 <template>
   <h1 class="subtitle">{{ $t('barcode.title') }}</h1>
+  <div v-if="scanErr">{{ scanErr }}</div>
   <div v-if="scanResult">{{ scanResult }}</div>
   <video poster="data:image/gif,AAAA" ref="scanner"></video>
 </template>
diff --git a/front/src/locales/en.json b/front/src/locales/en.json
index fba04fd..7c452c3 100644
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@@ -13,7 +13,8 @@
   },
   "barcode": {
     "title": "Scan barcode",
-    "barcode": "Scan barcode"
+    "barcode": "Scan barcode",
+    "nocamera": "No camera found."
   },
   "addbook": {
     "title": "Title",
diff --git a/front/src/locales/fr.json b/front/src/locales/fr.json
index c90542f..b87eac6 100644
--- a/front/src/locales/fr.json
+++ b/front/src/locales/fr.json
@@ -13,7 +13,8 @@
   },
   "barcode": {
     "title": "Scanner le code-barres",
-    "barcode": "Scanner le code-barres"
+    "barcode": "Scanner le code-barres",
+    "nocamera": "Impossible de détecter la caméra."
   },
   "addbook": {
     "title": "Titre",
diff --git a/front/src/main.js b/front/src/main.js
index e04538d..2d5008d 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -14,7 +14,7 @@ import fr from './locales/fr.json'
 import en from './locales/en.json'
 
 // configure i18n
-const i18n = createI18n({
+export const i18n = createI18n({
   locale: navigator.language,
   fallbackLocale: 'en',
   messages: { fr, en },