spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix QR detection (parallel loops), price extraction, and camera pre-warm

Browse Source 
QR scanning:
- Run BarcodeDetector and jsQR in parallel — jsQR starts after JSQR_DELAY_MS
  (1.5 s) so both decode simultaneously. BarcodeDetector silently returns empty
  arrays for some QR variants; running jsQR in parallel via a separate rAF loop
  (rafId2) and its own off-screen canvas catches those cases. First decoder to
  find anything calls handleQrResult and sets qrFound = true; the other stops.

Price extraction (two bugs):
- ScanLabel: unitPrice was catalogMatch?.UnitPrice ?? 0m, ignoring aiResult
  .UnitCostPerLb entirely when no catalog match — changed to fall through to AI result
- AppendOffer: only read JSON-LD "price" field; Shopify AggregateOffer uses
  "lowPrice" instead — now checked as fallback so Prismatic Powders prices are found

Camera pre-warm:
- Reverted localStorage approach (caused getUserMedia to fire on every page load,
  showing Chrome's "Ask" prompt immediately before user clicked anything)
- Restored Permissions API gate: preWarmCamera only calls getUserMedia when
  navigator.permissions.query returns 'granted', never risks a page-load prompt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-05-03 19:45:22 -04:00
parent cf36e41139
commit 28b7b9f86b
3 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/wwwroot/js/inventory-label-scan.js
+59 -52
View File
@@ -1,25 +1,24 @@
/**
* In-browser powder label scanner for the Inventory Create/Edit forms.
*
* QR scanning priority:
* 1. Native BarcodeDetector API (Chrome/Edge/Android) — uses OS-level decoding,
* all supported formats, canvas-snapshot approach for reliability.
* 2. jsQR fallback for Safari/Firefox.
* QR scanning strategy (parallel for maximum compatibility):
* 1. BarcodeDetector (Chrome/Edge/Android) starts immediately — canvas snapshot approach.
* 2. jsQR starts in parallel after JSQR_DELAY_MS so both libraries run simultaneously.
* First one to decode anything wins. Running both covers cases where BarcodeDetector
* silently returns empty arrays for certain QR variants (e.g. Prismatic Powders).
*
* Camera permission strategy:
* - A localStorage flag ('scannerCameraGranted') is set the first time getUserMedia
* succeeds. On subsequent page loads the flag triggers a proactive getUserMedia call
* that succeeds silently when Chrome has the site at "Allow", bypassing any quirk
* where navigator.permissions.query still returns 'prompt' for localhost.
* - The MediaStream is kept alive between modal opens (only closed after 2 min idle
* or page unload) so re-opening the scanner within a session never re-prompts.
* Camera permission:
* Pre-warm only fires when navigator.permissions.query returns 'granted' so we never
* show a browser prompt on page load — if Chrome has the site at "Ask", the prompt
* appears only when the user explicitly clicks Scan Label (once per page session after
* that, because the stream stays alive between modal opens).
*/
(function () {
'use strict';
const SCAN_URL = '/Inventory/ScanLabel';
const JSQR_CDN = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js';
const STORAGE_KEY = 'scannerCameraGranted';
const JSQR_DELAY_MS = 1500; // start jsQR fallback this long after BarcodeDetector
const IDLE_RELEASE_MS = 2 * 60 * 1000;
const scanBtn = document.getElementById('scan-label-btn');
@@ -27,11 +26,13 @@
if (!scanBtn) return;
let stream = null;
let rafId = null;
let qrFound = false;
let shutterTimer = null;
let idleTimer = null;
let stream = null;
let rafId = null; // BarcodeDetector rAF
let rafId2 = null; // jsQR rAF (parallel fallback)
let jsqrTimer = null; // timer that starts jsQR loop
let qrFound = false;
let shutterTimer = null;
let idleTimer = null;
// ── Modal elements ────────────────────────────────────────────────────
@@ -52,7 +53,7 @@
if (shutterBtn) shutterBtn.addEventListener('click', captureFrame);
window.addEventListener('beforeunload', releaseCamera);
// Pre-warm if we've ever gotten camera permission on this site
// Pre-warm camera if browser has already granted permission (no prompt risk)
preWarmCamera();
// ── Open / close ──────────────────────────────────────────────────────
@@ -95,8 +96,10 @@
}
function stopQrLoop() {
if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
if (shutterTimer) { clearTimeout(shutterTimer); shutterTimer = null; }
if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
if (rafId2) { cancelAnimationFrame(rafId2); rafId2 = null; }
if (jsqrTimer) { clearTimeout(jsqrTimer); jsqrTimer = null; }
if (shutterTimer){ clearTimeout(shutterTimer); shutterTimer = null; }
}
function releaseCamera() {
@@ -107,51 +110,54 @@
}
async function startStream() {
const s = await navigator.mediaDevices.getUserMedia({
return navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
});
localStorage.setItem(STORAGE_KEY, '1'); // remember that user has granted before
return s;
}
// ── Camera pre-warm ───────────────────────────────────────────────────
// ── Camera pre-warm (no-prompt-on-page-load guarantee) ────────────────
// On page load, if we've seen a grant before, call getUserMedia now.
// When Chrome has the site at "Allow" this succeeds silently — no prompt.
// If Chrome reverted to "Ask" the user sees the prompt on load (once) rather
// than when they tap Scan Label. If permission was revoked, we clear the flag.
async function preWarmCamera() {
if (!localStorage.getItem(STORAGE_KEY)) return;
// Only attempt if the Permissions API confirms the user has already granted access.
// Skipping when state is 'prompt' ensures we never show a browser dialog on page load.
try {
if (!navigator.permissions) return;
const perm = await navigator.permissions.query({ name: 'camera' });
if (perm.state !== 'granted') return;
stream = await startStream();
idleTimer = setTimeout(releaseCamera, IDLE_RELEASE_MS);
} catch {
localStorage.removeItem(STORAGE_KEY);
}
} catch { /* permission denied or getUserMedia unavailable — ignore */ }
}
// ── QR scanning: BarcodeDetector (canvas) → jsQR fallback ────────────
// ── QR scanning: BarcodeDetector + jsQR in parallel ──────────────────
function startQrLoop() {
if (typeof BarcodeDetector !== 'undefined') {
const hasBD = typeof BarcodeDetector !== 'undefined';
if (hasBD) {
startBarcodeDetectorLoop();
} else {
loadJsQR().then(startJsQrLoop).catch(() => {
if (shutterWrap) shutterWrap.classList.remove('d-none');
});
}
// Always start jsQR after a short delay — runs in parallel with BarcodeDetector
// (or immediately if BarcodeDetector isn't available). This ensures Prismatic-style
// QR codes that BarcodeDetector silently misses still get decoded by jsQR.
jsqrTimer = setTimeout(() => {
if (!qrFound) {
loadJsQR().then(() => { if (!qrFound) startJsQrLoop(); }).catch(() => {
if (!hasBD && shutterWrap) shutterWrap.classList.remove('d-none');
});
}
}, hasBD ? JSQR_DELAY_MS : 0);
}
// BarcodeDetector loop — canvas snapshot for reliability
async function startBarcodeDetectorLoop() {
let detector;
try {
// Use every format the browser supports — we don't hardcode qr_code only
// in case the label uses data_matrix or another variant.
const supported = await BarcodeDetector.getSupportedFormats();
detector = new BarcodeDetector({ formats: supported.length ? supported : ['qr_code'] });
} catch {
loadJsQR().then(startJsQrLoop);
return;
return; // BarcodeDetector unavailable — jsQR timer will handle it
}
const ctx = canvasEl.getContext('2d');
@@ -160,7 +166,6 @@
if (!stream || qrFound) return;
if (videoEl.readyState >= videoEl.HAVE_ENOUGH_DATA && videoEl.videoWidth > 0) {
try {
// Snapshot to canvas — more reliable than detecting from the live video element
canvasEl.width = videoEl.videoWidth;
canvasEl.height = videoEl.videoHeight;
ctx.drawImage(videoEl, 0, 0);
@@ -170,7 +175,7 @@
handleQrResult(codes[0].rawValue);
return;
}
} catch { /* frame not ready or detect failed — try next frame */ }
} catch { /* frame not ready — try next */ }
}
rafId = requestAnimationFrame(tick);
}
@@ -178,29 +183,31 @@
rafId = requestAnimationFrame(tick);
}
// jsQR loop — separate canvas context to avoid interfering with BarcodeDetector
function startJsQrLoop() {
const ctx = canvasEl.getContext('2d');
const canvas2 = document.createElement('canvas');
const ctx2 = canvas2.getContext('2d');
function tick() {
if (!stream || qrFound) return;
if (videoEl.readyState >= videoEl.HAVE_ENOUGH_DATA) {
canvasEl.width = videoEl.videoWidth;
canvasEl.height = videoEl.videoHeight;
ctx.drawImage(videoEl, 0, 0);
const imageData = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
canvas2.width = videoEl.videoWidth;
canvas2.height = videoEl.videoHeight;
ctx2.drawImage(videoEl, 0, 0);
const imageData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
const code = window.jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'attemptBoth'
});
if (code && code.data) {
if (code && code.data && !qrFound) {
qrFound = true;
handleQrResult(code.data);
return;
}
}
rafId = requestAnimationFrame(tick);
rafId2 = requestAnimationFrame(tick);
}
rafId = requestAnimationFrame(tick);
rafId2 = requestAnimationFrame(tick);
}
function loadJsQR() {