Label scanner: fix QR detection, blank camera on processing, improve permission flow
QR scanning:
- BarcodeDetector now snapshots to canvas before detect() instead of passing
live video element — more reliable across Chrome versions
- Uses BarcodeDetector.getSupportedFormats() to detect all formats the browser
supports rather than hardcoding ['qr_code'], catching data_matrix etc.
- jsQR fallback unchanged (attemptBoth inversion)
Processing overlay:
- Added #scan-processing overlay div to _LabelScanModal with spinner + message
- Camera/scanning UI blanks immediately when QR is found or Scan Text tapped;
overlay message differs per path ("QR code found..." vs "Reading label with AI...")
- Overlay hides on error (modal stays open); modal close triggers hideProcessing()
Camera permission:
- localStorage flag (scannerCameraGranted) set on every successful getUserMedia
- preWarmCamera() checks flag first, bypassing navigator.permissions.query which
can return 'prompt' for localhost even when Chrome has 'Allow' internally;
proactive getUserMedia on page load succeeds silently when permission is granted
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -36,6 +36,13 @@
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Processing overlay: shown while the server lookup is running -->
|
||||
<div id="scan-processing" style="display:none;position:absolute;inset:0;z-index:10;background:rgba(0,0,0,0.88);align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center;padding:1.5rem;">
|
||||
<div class="spinner-border text-light mb-3" style="width:2.5rem;height:2.5rem;"></div>
|
||||
<div id="scan-processing-msg" class="fw-medium fs-6">Looking up product…</div>
|
||||
<div class="text-white-50 small mt-1">This may take a few seconds</div>
|
||||
</div>
|
||||
|
||||
<!-- Status inside the modal -->
|
||||
<div id="scan-modal-status" class="alert alert-info py-2 small mb-0 mt-2 d-none mx-2 mb-2"
|
||||
style="position:absolute;bottom:0;left:0;right:0;margin:8px !important;"></div>
|
||||
|
||||
Reference in New Issue
Block a user