Barcode scanner improvements

- Added a message when no cameras are found.
- Release the camera when the popup is closed.

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 { t } = i18n.global;
-const codeReader = new BrowserMultiFormatReader()
+
-const scannerElement = useTemplateRef('scanner')
+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 (!codeReader.isMediaDevicesSuported || !codeReader.canEnumerateDevices) {
-    if (result) {
+    scanErr.value = "This browser does not support this feature.";
-      emit('readBarcode', result.text)
+    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>

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",

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",

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 },