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

feat: Enhance barcode scanner with improved mobile compatibility and error handling

Browse Source
This commit is contained in:
Aiirondev
2026-06-01 12:22:54 +02:00
parent ab718d6ac2
commit b83b6c0ba2
3 changed files with 182 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/static/js/scanner.js
+49 -17
View File
@@ -47,8 +47,26 @@ class HybridScanner {
return;
}
// Use fallback URL for better mobile compatibility
let scriptUrl = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
// Check if already loading
const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
if (existingScript) {
existingScript.addEventListener('load', () => {
this.state.zxingReady = typeof ZXing !== 'undefined';
resolve(this.state.zxingReady);
}, { once: true });
existingScript.addEventListener('error', () => {
console.error('Failed to load ZXing library');
resolve(false);
}, { once: true });
return;
}
const script = document.createElement('script');
script.src = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
script.src = scriptUrl;
script.async = true;
script.onload = () => {
this.state.zxingReady = typeof ZXing !== 'undefined';
resolve(this.state.zxingReady);
@@ -154,32 +172,46 @@ class HybridScanner {
const canvas = this.state.canvas;
const video = this.state.videoElement;
if (!video || !canvas) {
setTimeout(() => this.scanLoop(), 100);
return;
}
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const context = canvas.getContext('2d');
try {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
if (canvas.width === 0 || canvas.height === 0) {
setTimeout(() => this.scanLoop(), 100);
return;
}
if (context) {
context.drawImage(video, 0, 0);
const context = canvas.getContext('2d');
try {
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
if (context) {
context.drawImage(video, 0, 0);
try {
const result = this.state.reader.decodeFromBitmap(binaryBitmap);
this.handleScanResult(result.text);
} catch (e) {
// No barcode found in frame; continue scanning
const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
try {
const result = this.state.reader.decodeFromBitmap(binaryBitmap);
this.handleScanResult(result.text);
} catch (e) {
// No barcode found in frame; continue scanning
}
} catch (err) {
// Silently ignore canvas errors
}
} catch (err) {
// Silently ignore canvas errors
}
} catch (err) {
console.warn('Scan loop error:', err);
}
}
// Throttle scan loop
// Throttle scan loop based on FPS setting
setTimeout(() => this.scanLoop(), 1000 / this.options.fps);
}
Web/templates/library.html
+58 -12
View File
@@ -76,11 +76,11 @@
</div>
</div>
<div class="scanner-video-wrapper">
<video id="qr-reader" playsinline style="width: 100%; max-width: 500px; border-radius: 8px;"></video>
<video id="qr-reader" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
<canvas id="scanner-canvas" style="display: none;"></canvas>
</div>
<div id="scanMessage" class="scanner-message" style="margin-top: 10px; text-align: center; font-weight: bold; color: #666;"></div>
<p style="font-size: 0.9em; color: #999; margin-top: 10px; text-align: center;">
<p style="font-size: 0.85em; color: #999; margin-top: 10px; margin-bottom: 0; text-align: center;">
💡 Hinweis: Scan-Ergebnis wird automatisch in das Feld oben übernommen. USB-Scanner werden als Tastatureingabe erkannt.
</p>
</div>
@@ -797,6 +797,9 @@ function onScanError(error) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
box-sizing: border-box;
margin: 0 -12px;
padding: 0 12px;
}
.library-table-wrapper .table-row {
min-width: 720px; /* allow table to have intrinsic width and be scrolled */
@@ -811,38 +814,50 @@ function onScanError(error) {
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
padding: 12px;
margin: 12px 0;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
.scanner-header {
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
margin-bottom: 12px;
flex-wrap: wrap;
gap: 12px;
gap: 8px;
width: 100%;
box-sizing: border-box;
}
.scanner-header h3 {
margin: 0;
color: #333;
font-size: 1.1em;
font-size: 1em;
flex: 0 0 auto;
white-space: nowrap;
}
.scanner-controls {
display: flex;
gap: 8px;
gap: 6px;
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
.scanner-button {
background: #2196F3;
color: white;
border: none;
padding: 8px 12px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
font-size: 0.85em;
white-space: nowrap;
flex: 0 1 auto;
transition: background-color 0.2s;
}
@@ -857,24 +872,44 @@ function onScanError(error) {
.scanner-video-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 12px 0;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
#qr-reader {
width: 100%;
max-width: 100%;
height: auto;
border: 2px solid #2196F3;
border-radius: 8px;
display: block;
}
.scanner-message {
min-height: 20px;
font-size: 0.95em;
font-size: 0.9em;
text-align: center;
word-wrap: break-word;
}
@media (max-width: 600px) {
.qr-container {
padding: 10px;
margin: 10px 0;
}
.scanner-header {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.scanner-header h3 {
width: 100%;
font-size: 0.95em;
}
.scanner-controls {
@@ -883,7 +918,18 @@ function onScanError(error) {
}
.scanner-button {
flex: 1;
flex: 1 1 auto;
padding: 8px 6px;
font-size: 0.8em;
}
#qr-reader {
max-width: 100%;
border-radius: 6px;
}
.scanner-message {
font-size: 0.85em;
}
}
</style>
Web/templates/main_admin.html
+75 -51
View File
@@ -2435,7 +2435,10 @@ document.addEventListener('DOMContentLoaded', ()=>{
</div>
<div class="qr-container">
<button id="scanButton" class="scan-button" aria-controls="qr-reader" aria-expanded="false">Barcode scannen</button>
<div id="qr-reader"></div>
<div id="qr-reader" style="display: none;">
<video id="qr-reader-video" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
<canvas id="qr-reader-canvas" style="display: none;"></canvas>
</div>
</div>
<div id="table-view-header" class="table-view-header" aria-hidden="true">
@@ -2729,7 +2732,8 @@ document.addEventListener('DOMContentLoaded', ()=>{
window.isDebug = false; // Set to true only for development environment
</script>
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/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>
// Function to check if a file is a video
function isVideoFile(filename) {
@@ -2739,7 +2743,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
}
// Initialize QR Code scanner and global variables
let html5QrcodeScanner = null;
let hybridScanner = null;
let codeSearchTerm = '';
let descSearchIds = null; // Set of matching IDs or null when disabled
let currentUsername = '';
@@ -2783,33 +2787,37 @@ document.addEventListener('DOMContentLoaded', ()=>{
if (qrReader.style.display === 'none') {
qrReader.style.display = 'block';
html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", {
fps: 10,
qrbox: 250,
rememberLastUsedCamera: true
}
);
html5QrcodeScanner.render((decodedText) => {
html5QrcodeScanner.clear();
qrReader.style.display = 'none';
// Instead of navigating to the URL, put the scanned code in the search box
const searchInput = document.getElementById('code-search');
if (searchInput) {
searchInput.value = decodedText;
// Trigger search automatically
searchByCode();
}
hybridScanner = new HybridScanner({
videoId: 'qr-reader-video',
canvasId: 'qr-reader-canvas',
formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'EAN_8', 'CODE_39', 'UPC_A'],
fps: 10,
facingMode: 'environment',
onSuccess: function(decodedText) {
hybridScanner.stop();
qrReader.style.display = 'none';
// Put the scanned code in the search box
const searchInput = document.getElementById('code-search');
if (searchInput) {
searchInput.value = decodedText;
// Trigger search automatically
searchByCode();
}
setScannerUi(false);
setScannerUi(false);
},
onError: function(error) {
console.error('Scanner error:', error);
}
});
hybridScanner.start();
setScannerUi(true);
} else {
if (html5QrcodeScanner) {
html5QrcodeScanner.clear();
if (hybridScanner) {
hybridScanner.stop();
hybridScanner = null;
}
qrReader.style.display = 'none';
setScannerUi(false);
@@ -2825,8 +2833,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
}
if (qrReader.style.display !== 'none') {
if (html5QrcodeScanner) {
html5QrcodeScanner.clear();
if (hybridScanner) {
hybridScanner.stop();
hybridScanner = null;
}
qrReader.style.display = 'none';
scanEditBtn.textContent = 'Barcode scannen';
@@ -2835,18 +2844,25 @@ document.addEventListener('DOMContentLoaded', ()=>{
qrReader.style.display = 'block';
scanEditBtn.textContent = 'Scanner schließen';
html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', {
fps: 10,
qrbox: 250,
rememberLastUsedCamera: true
});
html5QrcodeScanner.render((decodedText) => {
html5QrcodeScanner.clear();
qrReader.style.display = 'none';
editCodeInput.value = String(decodedText || '').trim();
validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
scanEditBtn.textContent = 'Barcode scannen';
hybridScanner = new HybridScanner({
videoId: 'qr-reader-video',
canvasId: 'qr-reader-canvas',
formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
fps: 10,
facingMode: 'environment',
onSuccess: function(decodedText) {
hybridScanner.stop();
qrReader.style.display = 'none';
editCodeInput.value = String(decodedText || '').trim();
validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
scanEditBtn.textContent = 'Barcode scannen';
},
onError: function(error) {
console.error('Scanner error:', error);
}
});
hybridScanner.start();
}
function scanIntoEditIsbn() {
@@ -2858,8 +2874,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
}
if (qrReader.style.display !== 'none') {
if (html5QrcodeScanner) {
html5QrcodeScanner.clear();
if (hybridScanner) {
hybridScanner.stop();
hybridScanner = null;
}
qrReader.style.display = 'none';
scanIsbnBtn.textContent = 'ISBN scannen';
@@ -2868,20 +2885,27 @@ document.addEventListener('DOMContentLoaded', ()=>{
qrReader.style.display = 'block';
scanIsbnBtn.textContent = 'Scanner schließen';
html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', {
hybridScanner = new HybridScanner({
videoId: 'qr-reader-video',
canvasId: 'qr-reader-canvas',
formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
fps: 10,
qrbox: 250,
rememberLastUsedCamera: true
});
html5QrcodeScanner.render((decodedText) => {
html5QrcodeScanner.clear();
qrReader.style.display = 'none';
editIsbnInput.value = String(decodedText || '').trim();
scanIsbnBtn.textContent = 'ISBN scannen';
if (typeof fetchBookInfo === 'function') {
fetchBookInfo('edit');
facingMode: 'environment',
onSuccess: function(decodedText) {
hybridScanner.stop();
qrReader.style.display = 'none';
editIsbnInput.value = String(decodedText || '').trim();
scanIsbnBtn.textContent = 'ISBN scannen';
if (typeof fetchBookInfo === 'function') {
fetchBookInfo('edit');
}
},
onError: function(error) {
console.error('Scanner error:', error);
}
});
hybridScanner.start();
}
function rebuildFilter3Options() {