Invario/Inventarsystem
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 24 Wiki Activity

feat: Implement hybrid barcode scanner with real-time camera support and image upload fallback

Browse Source
This commit is contained in:
Aiirondev
2026-06-01 11:55:28 +02:00
parent 20e5d3bb9a
commit 997c7b42d5
7 changed files with 626 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/library_table.html
+18 -80
View File
@@ -459,7 +459,10 @@
Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
</div>
<div id="scanReaderWrap" class="library-scan-reader-wrap">
<div id="libraryQrReader" class="library-scan-reader"></div>
<div id="libraryQrReader" class="library-scan-reader">
<video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px; display: none;"></video>
<canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
</div>
</div>
</div>
<div id="filterPanel" class="library-filter-panel">
@@ -547,7 +550,8 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
<script src="/static/js/scanner.js"></script>
<script>
// State
let libraryItems = [];
@@ -1002,54 +1006,8 @@
}
async function ensureScannerLibraryLoaded() {
if (typeof Html5QrcodeScanner !== 'undefined') {
return true;
}
const sources = [
'https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js'
];
for (const src of sources) {
try {
await new Promise((resolve, reject) => {
const existing = document.querySelector(`script[data-scanner-src="${src}"]`);
if (existing) {
const onLoad = () => resolve();
const onError = () => reject(new Error('Script load failed'));
existing.addEventListener('load', onLoad, { once: true });
existing.addEventListener('error', onError, { once: true });
setTimeout(() => {
existing.removeEventListener('load', onLoad);
existing.removeEventListener('error', onError);
if (typeof Html5QrcodeScanner !== 'undefined') {
resolve();
} else {
reject(new Error('Script not available'));
}
}, 1200);
return;
}
const script = document.createElement('script');
script.src = src;
script.async = true;
script.defer = true;
script.dataset.scannerSrc = src;
script.onload = () => resolve();
script.onerror = () => reject(new Error('Script load failed'));
document.head.appendChild(script);
});
if (typeof Html5QrcodeScanner !== 'undefined') {
return true;
}
} catch (err) {
console.warn('Scanner library load failed from', src, err);
}
}
return false;
// HybridScanner is loaded globally via script tag
return typeof HybridScanner !== 'undefined';
}
async function startScanner() {
@@ -1066,37 +1024,17 @@
readerWrap.style.display = 'block';
try {
const formats = [];
if (typeof Html5QrcodeSupportedFormats !== 'undefined') {
formats.push(
Html5QrcodeSupportedFormats.QR_CODE,
Html5QrcodeSupportedFormats.EAN_13,
Html5QrcodeSupportedFormats.EAN_8,
Html5QrcodeSupportedFormats.CODE_128,
Html5QrcodeSupportedFormats.CODE_39,
Html5QrcodeSupportedFormats.UPC_A,
Html5QrcodeSupportedFormats.UPC_E,
Html5QrcodeSupportedFormats.ITF,
Html5QrcodeSupportedFormats.CODABAR
);
}
const scannerConfig = {
scannerInstance = scannerInstance || new HybridScanner({
videoId: 'libraryQrReaderVideo',
canvasId: 'libraryQrReaderCanvas',
formats: ['QR_CODE', 'EAN_13', 'EAN_8', 'CODE_128', 'CODE_39', 'UPC_A', 'UPC_E', 'ITF', 'CODABAR'],
fps: 10,
rememberLastUsedCamera: true,
aspectRatio: 1.333334
};
if (formats.length > 0) {
scannerConfig.formatsToSupport = formats;
}
facingMode: 'environment',
onSuccess: handleScanSuccess,
onError: handleScanError
});
scannerInstance = scannerInstance || new Html5QrcodeScanner(
'libraryQrReader',
scannerConfig,
false
);
scannerInstance.render(handleScanSuccess, handleScanError);
scannerInstance.start();
scannerRunning = true;
toggleBtn.textContent = 'Scanner stoppen';
setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
@@ -1113,7 +1051,7 @@
const readerWrap = document.getElementById('scanReaderWrap');
const toggleBtn = document.getElementById('toggleScannerBtn');
try {
await scannerInstance.clear();
scannerInstance.stop();
} catch (err) {
console.error('Scanner stop failed:', err);
}