Skip to content

Commit

Permalink
scan page for test
Browse files Browse the repository at this point in the history
  • Loading branch information
jlucaspains committed Jan 7, 2025
1 parent 23ccd46 commit 1095c74
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"browser-fs-access": "^0.35.0",
"dexie": "^4.0.10",
"fraction.js": "^5.2.1",
"html5-qrcode": "^2.3.8",
"i18next": "^24.2.0",
"i18next-browser-languagedetector": "^8.0.2",
"i18next-http-backend": "^3.0.1",
Expand Down
56 changes: 56 additions & 0 deletions src/pages/scan.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useState } from "../services/store";
import { useTranslation } from "i18next-vue";
import { Html5QrcodeScanner, Html5QrcodeScanType, Html5QrcodeSupportedFormats } from "html5-qrcode";
const { t } = useTranslation();
const state = useState()!;
let html5QrcodeScanner: Html5QrcodeScanner;
onMounted(async () => {
state.title = t("pages.categories.title");
state.menuOptions = [];
setupScanner();
});
function setupScanner() {
function onScanSuccess(decodedText: string) {
// handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`);
html5QrcodeScanner.pause(true);
}
function onScanFailure(error: string) {
// handle scan failure, usually better to ignore and keep scanning.
// for example:
console.warn(`Code scan error = ${error}`);
}
html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{
fps: 10,
useBarCodeDetectorIfSupported: true,
rememberLastUsedCamera: true,
showTorchButtonIfSupported: true,
showZoomSliderIfSupported: true,
defaultZoomValueIfSupported: 1.5,
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA
],
formatsToSupport: [
Html5QrcodeSupportedFormats.QR_CODE
],
qrbox: {width: 250, height: 250}
}, false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
}
</script>

<template>
<div id="reader" width="600px"></div>
</template>
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2276,6 +2276,11 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

html5-qrcode@^2.3.8:
version "2.3.8"
resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz#0b0cdf7a9926cfd4be530e13a51db47592adfa0d"
integrity sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==

i18next-browser-languagedetector@^8.0.2:
version "8.0.2"
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.2.tgz#037ca25c26877cad778f060a9e177054d9f8eaa3"
Expand Down Expand Up @@ -3363,6 +3368,7 @@ sourcemap-codec@^1.4.8:
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -3441,6 +3447,7 @@ stringify-object@^3.3.0:
is-regexp "^1.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
name strip-ansi-cjs
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down

0 comments on commit 1095c74

Please sign in to comment.