Add HSP color model scan attempt w/detecting barcodes.

Author: dlongley

CHANGELOG.md

@@ -1,5 +1,12 @@
 # bedrock-vue-barcode-scanner ChangeLog
 
+## 1.5.0 - 2025-04-dd
+
+### Added
+- Add a parallel scan attempt using the HSP (hue, saturation,
+  "perceived brightness") color model when scanning for barcodes in a video
+  frame.
+
 ## 1.4.0 - 2025-04-03
 
 ### Changed

lib/barcodes.js

@@ -12,8 +12,12 @@ export function detectBarcodes({barcodeDetector, video, signal} = {}) {
 
 async function _detect({barcodeDetector, video, signal, resolve, reject}) {
   try {
-    // detect barcodes in the current video frame
-    const barcodes = await barcodeDetector.detect(video);
+    // try both default barcode detection and detection w/an HSP color model
+    const [result1, result2] = await Promise.all([
+      barcodeDetector.detect(video),
+      _detectWithHspLuminance({barcodeDetector, video})
+    ]);
+    const barcodes = result1.concat(result2);
     if(barcodes.length > 0) {
       return resolve(barcodes);
     }
@@ -27,3 +31,32 @@ async function _detect({barcodeDetector, video, signal, resolve, reject}) {
     reject(error);
   }
 }
+
+async function _detectWithHspLuminance({barcodeDetector, video}) {
+  // grab image from video and update it using HSP luminance values
+  const canvas = document.createElement('canvas');
+  const width = video.videoWidth
+  const height = video.videoHeight;
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = visibleCanvas.getContext('2d');
+  ctx.drawImage(video, 0, 0);
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const {data} = imageData;
+  for(let i = 0; i < data.length; i += 4) {
+    const luminance = _hspLuminance(
+      data[i], data[i + 1], data[i + 2]);
+    data[i] = data[i + 1] = data[i + 2] = luminance;
+  }
+  ctx.putImageData(imageData, 0, 0);
+
+  // try to detect barcode in updated image
+  return barcodeDetector.detect(canvas);
+}
+
+// HSP = hue, saturation, and "perceived brightness" -- a potential improvement
+// over HSL (L = "lightness") and HSV (V = "value")
+// see: https://alienryderflex.com/hsp.html
+function _hspLuminance(r, g, b) {
+  return Math.sqrt(0.299 * r * r + 0.587 * g * g + 0.114 * b * b);
+}