From 18860c330785cc835e2efa21e3910ce373acf091 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:38:12 +0300
Subject: [PATCH 01/13] chore: update zxing library to version 21

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7e5799b79..645ef385d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@mdi/font": "^7.4.47",
         "@stablelib/utf8": "^1.0.2",
         "@zxing/browser": "^0.1.4",
-        "@zxing/library": "^0.20.0",
+        "@zxing/library": "^0.21.0",
         "assert": "^2.1.0",
         "axios": "^1.6.8",
         "b64-to-blob": "^1.2.19",
@@ -6682,9 +6682,9 @@
       }
     },
     "node_modules/@zxing/library": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz",
-      "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.0.tgz",
+      "integrity": "sha512-2+DFYM6NLl+ZXXUbDOkmVn4TAAOgTniEx5MJD2kStujcxSl6j9CfAgIT8DcsBYIlT5DW7oeiShEzWZjpL0hNOw==",
       "dependencies": {
         "ts-custom-error": "^3.2.1"
       },
diff --git a/package.json b/package.json
index c9b7b2210..cb02de43d 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@mdi/font": "^7.4.47",
     "@stablelib/utf8": "^1.0.2",
     "@zxing/browser": "^0.1.4",
-    "@zxing/library": "^0.20.0",
+    "@zxing/library": "^0.21.0",
     "assert": "^2.1.0",
     "axios": "^1.6.8",
     "b64-to-blob": "^1.2.19",

From 7e33e13033c7da642ef58c57f7249cbda8ad0a7e Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:49:23 +0300
Subject: [PATCH 02/13] chore: update zxing browser to version 5

---
 package-lock.json | 10 +++++-----
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 645ef385d..b0a4f9e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
         "@liskhq/lisk-validator": "^0.9.0",
         "@mdi/font": "^7.4.47",
         "@stablelib/utf8": "^1.0.2",
-        "@zxing/browser": "^0.1.4",
+        "@zxing/browser": "^0.1.5",
         "@zxing/library": "^0.21.0",
         "assert": "^2.1.0",
         "axios": "^1.6.8",
@@ -6671,14 +6671,14 @@
       "peer": true
     },
     "node_modules/@zxing/browser": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.4.tgz",
-      "integrity": "sha512-WYjaav7St4sj/u/Km2llE4NU2Pq3JFIWnczr0tmyCC1KUlp08rV3qpu7iiEB4kOx/CgcCzrSebNnSmFt5B3IFg==",
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.5.tgz",
+      "integrity": "sha512-4Lmrn/il4+UNb87Gk8h1iWnhj39TASEHpd91CwwSJtY5u+wa0iH9qS0wNLAWbNVYXR66WmT5uiMhZ7oVTrKfxw==",
       "optionalDependencies": {
         "@zxing/text-encoding": "^0.9.0"
       },
       "peerDependencies": {
-        "@zxing/library": "^0.20.0"
+        "@zxing/library": "^0.21.0"
       }
     },
     "node_modules/@zxing/library": {
diff --git a/package.json b/package.json
index cb02de43d..1bd5437da 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@liskhq/lisk-validator": "^0.9.0",
     "@mdi/font": "^7.4.47",
     "@stablelib/utf8": "^1.0.2",
-    "@zxing/browser": "^0.1.4",
+    "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.0",
     "assert": "^2.1.0",
     "axios": "^1.6.8",

From 1ca56c74c7e643947e2aff160b42760c05d00b3c Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:58:00 +0300
Subject: [PATCH 03/13] fix: mobile devices can contain more than two cameras

---
 src/components/QrcodeScannerDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index d33ddde05..c73564d21 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -106,7 +106,7 @@ export default {
   watch: {
     cameras(cameras) {
       if (cameras.length > 0) {
-        const cameraKey = cameras.length === 2 ? 1 : 0
+        const cameraKey = cameras.length >= 2 ? 1 : 0
         this.currentCamera = this.cameras[cameraKey].deviceId
 
         this.cameraStatus = 'active'

From 597b5fa86072dfb16e14e5dcbab3363166c13de8 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Fri, 14 Jun 2024 12:42:53 +0300
Subject: [PATCH 04/13] chore: refactor to composition api & from zxing/library
 to zxing/browser

---
 src/components/QrcodeScannerDialog.vue | 172 +++++++++++++++----------
 src/lib/zxing/index.js                 |  30 -----
 src/lib/zxing/index.ts                 |  26 ++++
 3 files changed, 132 insertions(+), 96 deletions(-)
 delete mode 100644 src/lib/zxing/index.js
 create mode 100644 src/lib/zxing/index.ts

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index c73564d21..7472b8943 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-dialog v-model="show" :class="className" width="500">
-    <v-card :class="className">
+  <v-dialog v-model="show" :class="classes.root" width="500">
+    <v-card :class="classes.root">
       <!-- Camera Waiting -->
       <v-row
         v-if="cameraStatus === 'waiting'"
@@ -18,9 +18,9 @@
       <!-- Camera Active -->
       <v-row v-show="cameraStatus === 'active'" no-gutters>
         <v-col cols="12">
-          <div :class="`${className}__camera`">
-            <video ref="camera" />
-            <v-menu v-if="cameras.length > 1" offset-y :class="`${className}__camera-select`">
+          <div :class="classes.camera">
+            <video ref="videoElement" />
+            <v-menu v-if="cameras.length > 1" offset-y :class="classes.cameraSelect">
               <template #activator>
                 <v-btn variant="text" color="white">
                   <v-icon size="x-large" icon="mdi-camera" />
@@ -75,10 +75,23 @@
   </v-dialog>
 </template>
 
-<script>
-import { Scanner } from '@/lib/zxing'
+<script lang="ts">
+import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import { Result } from '@zxing/library'
+import { IScannerControls } from '@zxing/browser'
 
-export default {
+import { Scanner } from '@/lib/zxing/index'
+
+const className = 'qrcode-scanner-dialog'
+const classes = {
+  root: className,
+  camera: `${className}__camera`,
+  cameraSelect: `${className}__camera-select`
+}
+
+export default defineComponent({
   props: {
     modelValue: {
       type: Boolean,
@@ -86,81 +99,108 @@ export default {
     }
   },
   emits: ['scan', 'update:modelValue'],
-  data: () => ({
-    cameraStatus: 'waiting', // can be: waiting, active, nocamera
-    scanner: null,
-    currentCamera: null,
-    cameras: []
-  }),
-  computed: {
-    className: () => 'qrcode-scanner-dialog',
-    show: {
+  setup(props, { emit }) {
+    const store = useStore()
+    const { t } = useI18n()
+
+    const videoElement = ref<HTMLVideoElement | null>(null)
+    const cameraStatus = ref('waiting') // can be: waiting, active, nocamera
+    const scanner = ref<Scanner | null>(null)
+    const cameras = ref<MediaDeviceInfo[]>([])
+    const currentCamera = ref<string | null>(null)
+    const scannerControls = ref<IScannerControls | null>(null)
+
+    // computed
+    const show = computed<boolean>({
       get() {
-        return this.modelValue
+        return props.modelValue
       },
       set(value) {
-        this.$emit('update:modelValue', value)
+        emit('update:modelValue', value)
       }
-    }
-  },
-  watch: {
-    cameras(cameras) {
-      if (cameras.length > 0) {
-        const cameraKey = cameras.length >= 2 ? 1 : 0
-        this.currentCamera = this.cameras[cameraKey].deviceId
+    })
 
-        this.cameraStatus = 'active'
-      } else {
-        this.cameraStatus = 'nocamera'
-      }
-    },
-    currentCamera() {
-      this.scanner.start(this.currentCamera).then((content) => this.onScan(content))
-    }
-  },
-  mounted() {
-    this.init()
-  },
-  beforeUnmount() {
-    this.destroyScanner()
-  },
-  methods: {
-    init() {
-      return this.initScanner()
+    // methods
+    const init = async () => {
+      return initScanner()
         .then(() => {
-          return this.getCameras()
+          return getCameras()
         })
         .catch((err) => {
-          this.cameraStatus = 'nocamera'
-          this.$store.dispatch('snackbar/show', {
-            message: this.$t('scan.something_wrong')
+          cameraStatus.value = 'nocamera'
+          store.dispatch('snackbar/show', {
+            message: t('scan.something_wrong')
           })
           console.error(err)
         })
-    },
-    async initScanner() {
-      this.scanner = new Scanner({
-        videoElement: this.$refs.camera
+    }
+
+    const initScanner = async () => {
+      scanner.value = new Scanner({
+        videoElement: videoElement.value as HTMLVideoElement
       })
 
-      return this.scanner.init()
-    },
-    destroyScanner() {
-      // First check if the scanner was initialized.
+      return scanner.value.init()
+    }
+
+    const getCameras = async () => {
+      cameras.value = await (scanner.value as Scanner).getCameras()
+    }
+
+    const destroyScanner = () => {
+      // First check if the scanner controls was initialized.
       // Needed when an unexpected error occurred,
       // or when the dialog closes before initialization.
-      return this.scanner && this.scanner.stop()
-    },
-    async getCameras() {
-      this.cameras = await this.scanner.getCameras()
-    },
-    onScan(content) {
-      this.$emit('scan', content)
-      this.destroyScanner()
-      this.show = false
+      return scannerControls.value && scannerControls.value.stop()
+    }
+
+    const onScan = (content: string) => {
+      emit('scan', content)
+      destroyScanner()
+      show.value = false
+    }
+
+    // watchers
+    watch(cameras, (cameras: MediaDeviceInfo[]) => {
+      if (cameras.length > 0) {
+        const cameraKey = cameras.length >= 2 ? 1 : 0
+        currentCamera.value = cameras[cameraKey].deviceId
+
+        cameraStatus.value = 'active'
+      } else {
+        cameraStatus.value = 'nocamera'
+      }
+    })
+
+    watch(currentCamera, async () => {
+      scannerControls.value =
+        scanner.value &&
+        (await scanner.value.start(currentCamera.value as string, (result: Result) => {
+          if (result) {
+            onScan(result.getText())
+          }
+        }))
+    })
+
+    // lifecycle components
+    onMounted(() => {
+      init()
+    })
+
+    onBeforeUnmount(() => {
+      destroyScanner()
+    })
+
+    return {
+      cameras,
+      cameraStatus,
+      classes,
+      currentCamera,
+      show,
+      videoElement
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/lib/zxing/index.js b/src/lib/zxing/index.js
deleted file mode 100644
index f0090e0e6..000000000
--- a/src/lib/zxing/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export class Scanner {
-  constructor({ videoElement }) {
-    this.videoElement = videoElement
-  }
-
-  async init() {
-    const { BrowserQRCodeReader } = await import(
-      /* webpackChunkName: "zxing" */
-      '@zxing/library'
-    )
-
-    this.codeReader = new BrowserQRCodeReader()
-  }
-
-  start(deviceId) {
-    return this.codeReader
-      .decodeFromInputVideoDevice(deviceId, this.videoElement)
-      .then((result) => {
-        return result.text
-      })
-  }
-
-  stop() {
-    this.codeReader.reset()
-  }
-
-  getCameras() {
-    return this.codeReader.getVideoInputDevices()
-  }
-}
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
new file mode 100644
index 000000000..854044ed2
--- /dev/null
+++ b/src/lib/zxing/index.ts
@@ -0,0 +1,26 @@
+import { BrowserCodeReader, BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
+
+export class Scanner {
+  codeReader!: BrowserQRCodeReader
+  videoElement: HTMLVideoElement
+
+  constructor({ videoElement }: { videoElement: HTMLVideoElement }) {
+    this.videoElement = videoElement
+  }
+
+  async init() {
+    this.codeReader = new BrowserQRCodeReader()
+  }
+
+  async start(deviceId: string, decodeCallback: any) {
+    return this.codeReader.decodeFromVideoDevice(deviceId, this.videoElement, decodeCallback)
+  }
+
+  stop(controls: IScannerControls) {
+    controls.stop()
+  }
+
+  async getCameras(): Promise<MediaDeviceInfo[]> {
+    return await new (BrowserCodeReader.listVideoInputDevices as any)()
+  }
+}

From 9078925ce20dd32e63552596a59909a202f2d59a Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Fri, 14 Jun 2024 19:26:09 +0300
Subject: [PATCH 05/13] fix: cannot switch between front and back camera

---
 src/components/QrcodeScannerDialog.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index 7472b8943..886154688 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -21,8 +21,8 @@
           <div :class="classes.camera">
             <video ref="videoElement" />
             <v-menu v-if="cameras.length > 1" offset-y :class="classes.cameraSelect">
-              <template #activator>
-                <v-btn variant="text" color="white">
+              <template #activator="{ props }">
+                <v-btn variant="text" color="white" v-bind="props">
                   <v-icon size="x-large" icon="mdi-camera" />
                 </v-btn>
               </template>
@@ -110,7 +110,6 @@ export default defineComponent({
     const currentCamera = ref<string | null>(null)
     const scannerControls = ref<IScannerControls | null>(null)
 
-    // computed
     const show = computed<boolean>({
       get() {
         return props.modelValue
@@ -120,7 +119,6 @@ export default defineComponent({
       }
     })
 
-    // methods
     const init = async () => {
       return initScanner()
         .then(() => {
@@ -160,7 +158,6 @@ export default defineComponent({
       show.value = false
     }
 
-    // watchers
     watch(cameras, (cameras: MediaDeviceInfo[]) => {
       if (cameras.length > 0) {
         const cameraKey = cameras.length >= 2 ? 1 : 0
@@ -177,12 +174,11 @@ export default defineComponent({
         scanner.value &&
         (await scanner.value.start(currentCamera.value as string, (result: Result) => {
           if (result) {
-            onScan(result.getText())
+            onScan(result.getText()) // text is private field for zxing/browser
           }
         }))
     })
 
-    // lifecycle components
     onMounted(() => {
       init()
     })
@@ -196,6 +192,7 @@ export default defineComponent({
       cameraStatus,
       classes,
       currentCamera,
+      props,
       show,
       videoElement
     }

From 9fad54d9dd8eceb8b8a749d6bc2430b0b4e48491 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 17 Jun 2024 18:33:58 +0300
Subject: [PATCH 06/13] chore: simplify scanning; remove library; typings

---
 package-lock.json                      |  9 +++---
 package.json                           |  1 -
 src/components/QrcodeScannerDialog.vue | 40 +++++++++++---------------
 src/lib/zxing/index.ts                 | 15 ++++++----
 4 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b0a4f9e94..3e5cd012c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "@mdi/font": "^7.4.47",
         "@stablelib/utf8": "^1.0.2",
         "@zxing/browser": "^0.1.5",
-        "@zxing/library": "^0.21.0",
         "assert": "^2.1.0",
         "axios": "^1.6.8",
         "b64-to-blob": "^1.2.19",
@@ -6682,9 +6681,10 @@
       }
     },
     "node_modules/@zxing/library": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.0.tgz",
-      "integrity": "sha512-2+DFYM6NLl+ZXXUbDOkmVn4TAAOgTniEx5MJD2kStujcxSl6j9CfAgIT8DcsBYIlT5DW7oeiShEzWZjpL0hNOw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.1.tgz",
+      "integrity": "sha512-wCGA2gEUPJQEcsgH7posIne5vVocvOKrkGAYn8KvB8lqSJjzvATpLh2rc/hR6HqVVmW/rOcuRircJBHtRqHR3g==",
+      "peer": true,
       "dependencies": {
         "ts-custom-error": "^3.2.1"
       },
@@ -19778,6 +19778,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
       "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "peer": true,
       "engines": {
         "node": ">=14.0.0"
       }
diff --git a/package.json b/package.json
index 1bd5437da..fcc898958 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "@mdi/font": "^7.4.47",
     "@stablelib/utf8": "^1.0.2",
     "@zxing/browser": "^0.1.5",
-    "@zxing/library": "^0.21.0",
     "assert": "^2.1.0",
     "axios": "^1.6.8",
     "b64-to-blob": "^1.2.19",
diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index 886154688..6cede7120 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -91,6 +91,8 @@ const classes = {
   cameraSelect: `${className}__camera-select`
 }
 
+type CameraStatus = 'waiting' | 'active' | 'nocamera'
+
 export default defineComponent({
   props: {
     modelValue: {
@@ -104,7 +106,7 @@ export default defineComponent({
     const { t } = useI18n()
 
     const videoElement = ref<HTMLVideoElement | null>(null)
-    const cameraStatus = ref('waiting') // can be: waiting, active, nocamera
+    const cameraStatus = ref<CameraStatus>('waiting')
     const scanner = ref<Scanner | null>(null)
     const cameras = ref<MediaDeviceInfo[]>([])
     const currentCamera = ref<string | null>(null)
@@ -120,29 +122,21 @@ export default defineComponent({
     })
 
     const init = async () => {
-      return initScanner()
-        .then(() => {
-          return getCameras()
-        })
-        .catch((err) => {
-          cameraStatus.value = 'nocamera'
-          store.dispatch('snackbar/show', {
-            message: t('scan.something_wrong')
-          })
-          console.error(err)
+      try {
+        scanner.value = new Scanner({
+          videoElement: videoElement.value as HTMLVideoElement
         })
-    }
-
-    const initScanner = async () => {
-      scanner.value = new Scanner({
-        videoElement: videoElement.value as HTMLVideoElement
-      })
-
-      return scanner.value.init()
-    }
 
-    const getCameras = async () => {
-      cameras.value = await (scanner.value as Scanner).getCameras()
+        scanner.value.init().then((camerasValue: MediaDeviceInfo[]) => {
+          cameras.value = camerasValue
+        })
+      } catch (error) {
+        cameraStatus.value = 'nocamera'
+        store.dispatch('snackbar/show', {
+          message: t('scan.something_wrong')
+        })
+        console.error(error)
+      }
     }
 
     const destroyScanner = () => {
@@ -172,7 +166,7 @@ export default defineComponent({
     watch(currentCamera, async () => {
       scannerControls.value =
         scanner.value &&
-        (await scanner.value.start(currentCamera.value as string, (result: Result) => {
+        (await scanner.value.start(currentCamera.value as string, (result?: Result) => {
           if (result) {
             onScan(result.getText()) // text is private field for zxing/browser
           }
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index 854044ed2..ba63cf49a 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -1,4 +1,5 @@
-import { BrowserCodeReader, BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
+import { BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
+import { DecodeContinuouslyCallback } from '@zxing/browser/esm/common/DecodeContinuouslyCallback'
 
 export class Scanner {
   codeReader!: BrowserQRCodeReader
@@ -9,18 +10,20 @@ export class Scanner {
   }
 
   async init() {
+    const { BrowserCodeReader, BrowserQRCodeReader } = await import('@zxing/browser')
+
     this.codeReader = new BrowserQRCodeReader()
+
+    const cameras = await new (BrowserCodeReader.listVideoInputDevices as any)()
+
+    return cameras
   }
 
-  async start(deviceId: string, decodeCallback: any) {
+  async start(deviceId: string, decodeCallback: DecodeContinuouslyCallback) {
     return this.codeReader.decodeFromVideoDevice(deviceId, this.videoElement, decodeCallback)
   }
 
   stop(controls: IScannerControls) {
     controls.stop()
   }
-
-  async getCameras(): Promise<MediaDeviceInfo[]> {
-    return await new (BrowserCodeReader.listVideoInputDevices as any)()
-  }
 }

From 60e1aba15a4295c750da00b4d229a375eef5fe34 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 17 Jun 2024 18:48:01 +0300
Subject: [PATCH 07/13] chore: code review, divide await and new

---
 src/lib/zxing/index.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index ba63cf49a..e8396c5e1 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -14,9 +14,7 @@ export class Scanner {
 
     this.codeReader = new BrowserQRCodeReader()
 
-    const cameras = await new (BrowserCodeReader.listVideoInputDevices as any)()
-
-    return cameras
+    return new (BrowserCodeReader.listVideoInputDevices as any)()
   }
 
   async start(deviceId: string, decodeCallback: DecodeContinuouslyCallback) {

From 77f84daaa7010c8855742887042c8920c51a2823 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:11:21 +0300
Subject: [PATCH 08/13] chore: separate get cameras method in scanner, typings

---
 src/components/QrcodeScannerDialog.vue | 33 +++++++++++---------------
 src/lib/zxing/index.ts                 | 10 ++++++--
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index 6cede7120..2b7329878 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -79,10 +79,9 @@
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
-import { Result } from '@zxing/library'
 import { IScannerControls } from '@zxing/browser'
 
-import { Scanner } from '@/lib/zxing/index'
+import { Scanner } from '@/lib/zxing'
 
 const className = 'qrcode-scanner-dialog'
 const classes = {
@@ -124,12 +123,11 @@ export default defineComponent({
     const init = async () => {
       try {
         scanner.value = new Scanner({
-          videoElement: videoElement.value as HTMLVideoElement
+          videoElement: videoElement.value!
         })
 
-        scanner.value.init().then((camerasValue: MediaDeviceInfo[]) => {
-          cameras.value = camerasValue
-        })
+        await scanner.value.init()
+        cameras.value = await scanner.value.getCameras()
       } catch (error) {
         cameraStatus.value = 'nocamera'
         store.dispatch('snackbar/show', {
@@ -140,10 +138,7 @@ export default defineComponent({
     }
 
     const destroyScanner = () => {
-      // First check if the scanner controls was initialized.
-      // Needed when an unexpected error occurred,
-      // or when the dialog closes before initialization.
-      return scannerControls.value && scannerControls.value.stop()
+      return scannerControls.value?.stop()
     }
 
     const onScan = (content: string) => {
@@ -152,7 +147,7 @@ export default defineComponent({
       show.value = false
     }
 
-    watch(cameras, (cameras: MediaDeviceInfo[]) => {
+    watch(cameras, (cameras) => {
       if (cameras.length > 0) {
         const cameraKey = cameras.length >= 2 ? 1 : 0
         currentCamera.value = cameras[cameraKey].deviceId
@@ -163,14 +158,14 @@ export default defineComponent({
       }
     })
 
-    watch(currentCamera, async () => {
-      scannerControls.value =
-        scanner.value &&
-        (await scanner.value.start(currentCamera.value as string, (result?: Result) => {
-          if (result) {
-            onScan(result.getText()) // text is private field for zxing/browser
-          }
-        }))
+    watch(currentCamera, () => {
+      if (!currentCamera.value) return
+
+      void scanner.value?.start(currentCamera.value, result => {
+        if (result) {
+          onScan(result.getText()) // text is private field for zxing/browser
+        }
+      })
     })
 
     onMounted(() => {
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index e8396c5e1..9b0d47ef6 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -1,6 +1,7 @@
-import { BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
-import { DecodeContinuouslyCallback } from '@zxing/browser/esm/common/DecodeContinuouslyCallback'
+import type { BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
+import { Result } from '@zxing/library'
 
+type DecodeContinuouslyCallback = (result?: Result) => void
 export class Scanner {
   codeReader!: BrowserQRCodeReader
   videoElement: HTMLVideoElement
@@ -21,6 +22,11 @@ export class Scanner {
     return this.codeReader.decodeFromVideoDevice(deviceId, this.videoElement, decodeCallback)
   }
 
+  async getCameras() {
+    const { BrowserCodeReader } = await import('@zxing/browser')
+    return BrowserCodeReader.listVideoInputDevices()
+  }
+
   stop(controls: IScannerControls) {
     controls.stop()
   }

From 8065afdf802125c84371537e9369abca77f01956 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 12:39:41 +0300
Subject: [PATCH 09/13] chore: return zxing library; code improvements

---
 package-lock.json                      | 9 ++++-----
 package.json                           | 1 +
 src/components/QrcodeScannerDialog.vue | 2 +-
 src/lib/zxing/index.ts                 | 7 ++-----
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e5cd012c..b0a4f9e94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@mdi/font": "^7.4.47",
         "@stablelib/utf8": "^1.0.2",
         "@zxing/browser": "^0.1.5",
+        "@zxing/library": "^0.21.0",
         "assert": "^2.1.0",
         "axios": "^1.6.8",
         "b64-to-blob": "^1.2.19",
@@ -6681,10 +6682,9 @@
       }
     },
     "node_modules/@zxing/library": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.1.tgz",
-      "integrity": "sha512-wCGA2gEUPJQEcsgH7posIne5vVocvOKrkGAYn8KvB8lqSJjzvATpLh2rc/hR6HqVVmW/rOcuRircJBHtRqHR3g==",
-      "peer": true,
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.0.tgz",
+      "integrity": "sha512-2+DFYM6NLl+ZXXUbDOkmVn4TAAOgTniEx5MJD2kStujcxSl6j9CfAgIT8DcsBYIlT5DW7oeiShEzWZjpL0hNOw==",
       "dependencies": {
         "ts-custom-error": "^3.2.1"
       },
@@ -19778,7 +19778,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
       "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
-      "peer": true,
       "engines": {
         "node": ">=14.0.0"
       }
diff --git a/package.json b/package.json
index fcc898958..1bd5437da 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@mdi/font": "^7.4.47",
     "@stablelib/utf8": "^1.0.2",
     "@zxing/browser": "^0.1.5",
+    "@zxing/library": "^0.21.0",
     "assert": "^2.1.0",
     "axios": "^1.6.8",
     "b64-to-blob": "^1.2.19",
diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index 2b7329878..3df4f80d4 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -79,7 +79,7 @@
 import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
-import { IScannerControls } from '@zxing/browser'
+import type { IScannerControls } from '@zxing/browser'
 
 import { Scanner } from '@/lib/zxing'
 
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index 9b0d47ef6..fecc473d3 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -1,5 +1,5 @@
 import type { BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
-import { Result } from '@zxing/library'
+import type { Result } from '@zxing/library'
 
 type DecodeContinuouslyCallback = (result?: Result) => void
 export class Scanner {
@@ -11,11 +11,8 @@ export class Scanner {
   }
 
   async init() {
-    const { BrowserCodeReader, BrowserQRCodeReader } = await import('@zxing/browser')
-
+    const { BrowserQRCodeReader } = await import('@zxing/browser')
     this.codeReader = new BrowserQRCodeReader()
-
-    return new (BrowserCodeReader.listVideoInputDevices as any)()
   }
 
   async start(deviceId: string, decodeCallback: DecodeContinuouslyCallback) {

From 1b7289f976c25f56e5e8ec76bfb482323b61bedf Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 15:32:08 +0300
Subject: [PATCH 10/13] fix: no auto request of camera permissions for chrome

---
 src/lib/zxing/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index fecc473d3..9f2a0a9cd 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -21,7 +21,9 @@ export class Scanner {
 
   async getCameras() {
     const { BrowserCodeReader } = await import('@zxing/browser')
-    return BrowserCodeReader.listVideoInputDevices()
+    // wait for camera stream and only after that request a list of input devices
+    const cameraStream = await navigator.mediaDevices.getUserMedia({ video: true })
+    return cameraStream ? BrowserCodeReader.listVideoInputDevices() : []
   }
 
   stop(controls: IScannerControls) {

From db1a06e61b7047df529ad90a415d5a9048a17537 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Fri, 21 Jun 2024 16:57:18 +0300
Subject: [PATCH 11/13] fix, chore: stop scanner controls and video tracks
 after closing modal window

---
 src/components/QrcodeScannerDialog.vue |  9 +++++++--
 src/lib/zxing/index.ts                 | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index 3df4f80d4..fb572576e 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -138,7 +138,8 @@ export default defineComponent({
     }
 
     const destroyScanner = () => {
-      return scannerControls.value?.stop()
+      if (!scannerControls.value) return
+      return scanner.value?.stop(scannerControls.value)
     }
 
     const onScan = (content: string) => {
@@ -161,10 +162,14 @@ export default defineComponent({
     watch(currentCamera, () => {
       if (!currentCamera.value) return
 
-      void scanner.value?.start(currentCamera.value, result => {
+      void scanner.value?.start(currentCamera.value, (result, _, controls) => {
         if (result) {
           onScan(result.getText()) // text is private field for zxing/browser
         }
+
+        if (controls) {
+          scannerControls.value = controls
+        }
       })
     })
 
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index 9f2a0a9cd..d91fd5f46 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -1,8 +1,13 @@
 import type { BrowserQRCodeReader, IScannerControls } from '@zxing/browser'
-import type { Result } from '@zxing/library'
+import type { Exception, Result } from '@zxing/library'
 
-type DecodeContinuouslyCallback = (result?: Result) => void
+type DecodeContinuouslyCallback = (
+  result?: Result,
+  error?: Exception,
+  controls?: IScannerControls
+) => void
 export class Scanner {
+  cameraStream!: MediaStream
   codeReader!: BrowserQRCodeReader
   videoElement: HTMLVideoElement
 
@@ -21,12 +26,14 @@ export class Scanner {
 
   async getCameras() {
     const { BrowserCodeReader } = await import('@zxing/browser')
-    // wait for camera stream and only after that request a list of input devices
-    const cameraStream = await navigator.mediaDevices.getUserMedia({ video: true })
-    return cameraStream ? BrowserCodeReader.listVideoInputDevices() : []
+    // Wait for camera stream and only after that request a list of input devices
+    this.cameraStream = await navigator.mediaDevices.getUserMedia({ video: true })
+    return this.cameraStream ? BrowserCodeReader.listVideoInputDevices() : []
   }
 
   stop(controls: IScannerControls) {
+    // Stop all tracks from the requested media stream before controls stopping
+    this.cameraStream.getVideoTracks().forEach((track) => track.stop())
     controls.stop()
   }
 }

From 61023665bce609aacf435d86105f05c5b0002d15 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Mon, 1 Jul 2024 17:07:56 +0300
Subject: [PATCH 12/13] fix, chore: back camera on android, use lib only for qr
 decoding

---
 src/components/QrcodeScannerDialog.vue | 14 ++++++-------
 src/lib/zxing/index.ts                 | 29 +++++++++++++++++++-------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/QrcodeScannerDialog.vue b/src/components/QrcodeScannerDialog.vue
index fb572576e..ac7f13fa5 100644
--- a/src/components/QrcodeScannerDialog.vue
+++ b/src/components/QrcodeScannerDialog.vue
@@ -28,9 +28,10 @@
               </template>
               <v-list>
                 <v-list-item
-                  v-for="camera in cameras"
-                  :key="camera.deviceId"
-                  @click="currentCamera = camera.deviceId"
+                  v-for="(camera, index) in cameras"
+                  :key="index"
+                  @click="currentCamera = index"
+                  :disabled="currentCamera === index"
                 >
                   <v-list-item-title>{{ camera.label }}</v-list-item-title>
                 </v-list-item>
@@ -108,7 +109,7 @@ export default defineComponent({
     const cameraStatus = ref<CameraStatus>('waiting')
     const scanner = ref<Scanner | null>(null)
     const cameras = ref<MediaDeviceInfo[]>([])
-    const currentCamera = ref<string | null>(null)
+    const currentCamera = ref<number | null>(null)
     const scannerControls = ref<IScannerControls | null>(null)
 
     const show = computed<boolean>({
@@ -150,8 +151,7 @@ export default defineComponent({
 
     watch(cameras, (cameras) => {
       if (cameras.length > 0) {
-        const cameraKey = cameras.length >= 2 ? 1 : 0
-        currentCamera.value = cameras[cameraKey].deviceId
+        currentCamera.value = cameras.length >= 2 ? 1 : 0
 
         cameraStatus.value = 'active'
       } else {
@@ -160,8 +160,6 @@ export default defineComponent({
     })
 
     watch(currentCamera, () => {
-      if (!currentCamera.value) return
-
       void scanner.value?.start(currentCamera.value, (result, _, controls) => {
         if (result) {
           onScan(result.getText()) // text is private field for zxing/browser
diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index d91fd5f46..9cc58a2c2 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -20,20 +20,35 @@ export class Scanner {
     this.codeReader = new BrowserQRCodeReader()
   }
 
-  async start(deviceId: string, decodeCallback: DecodeContinuouslyCallback) {
-    return this.codeReader.decodeFromVideoDevice(deviceId, this.videoElement, decodeCallback)
+  async start(currentCamera: number | null, decodeCallback: DecodeContinuouslyCallback) {
+    // Stop all tracks from media stream before camera changing
+    if (this.cameraStream) this.stopVideoTracks()
+
+    // Request new media stream and attach to video element as source object
+    const facingMode = currentCamera === 1 ? 'environment' : 'user'
+    this.cameraStream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode },
+      audio: false
+    })
+    this.videoElement.srcObject = this.cameraStream
+
+    return this.codeReader.decodeFromVideoElement(this.videoElement, decodeCallback)
   }
 
   async getCameras() {
-    const { BrowserCodeReader } = await import('@zxing/browser')
-    // Wait for camera stream and only after that request a list of input devices
-    this.cameraStream = await navigator.mediaDevices.getUserMedia({ video: true })
-    return this.cameraStream ? BrowserCodeReader.listVideoInputDevices() : []
+    // Get only first two video devices. First - front camera, second (if available) - back camera
+    return (await navigator.mediaDevices.enumerateDevices())
+      .filter((device: MediaDeviceInfo) => device.kind === 'videoinput')
+      .slice(0, 2)
   }
 
   stop(controls: IScannerControls) {
     // Stop all tracks from the requested media stream before controls stopping
-    this.cameraStream.getVideoTracks().forEach((track) => track.stop())
+    this.stopVideoTracks()
     controls.stop()
   }
+
+  private stopVideoTracks() {
+    this.cameraStream.getVideoTracks().forEach((track) => track.stop())
+  }
 }

From e2857e2dcf52c16be7c35bbd3c5d919c15967c94 Mon Sep 17 00:00:00 2001
From: aineo <124525926+aineo@users.noreply.github.com>
Date: Tue, 2 Jul 2024 17:01:33 +0300
Subject: [PATCH 13/13] chore: improve cameras selection method

---
 src/lib/zxing/index.ts | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/lib/zxing/index.ts b/src/lib/zxing/index.ts
index 7b48e1c2f..af823598f 100644
--- a/src/lib/zxing/index.ts
+++ b/src/lib/zxing/index.ts
@@ -36,10 +36,32 @@ export class Scanner {
   }
 
   async getCameras() {
-    // Get only first two video devices. First - front camera, second (if available) - back camera
-    return (await navigator.mediaDevices.enumerateDevices())
-      .filter((device) => device.kind === 'videoinput')
-      .slice(0, 2)
+    const deviceCameras = (await navigator.mediaDevices.enumerateDevices()).filter(
+      (device) => device.kind === 'videoinput'
+    )
+
+    // Change only two video devices. First - front camera, second (is available) - back camera
+    const cameras: MediaDeviceInfo[] = []
+    if (deviceCameras.length > 0) {
+      cameras.push(deviceCameras[0])
+
+      if (deviceCameras.length > 1) {
+        let backCamera: MediaDeviceInfo | undefined
+        if (navigator.userAgent.includes('iPhone')) {
+          // On iOS devices the device name can be localized
+          // But the second camera is back
+          backCamera = deviceCameras[1]
+        } else {
+          // Devices with other mobile os may have two front cameras
+          // So let's take first back camera
+          backCamera = deviceCameras.slice(1).find((device) => device.label.includes('back'))
+        }
+
+        if (backCamera) cameras.push(backCamera)
+      }
+    }
+
+    return cameras
   }
 
   stop(controls: IScannerControls) {