From 4a9f3f13a7f1314b6dca97ebd66dc8e9ec531561 Mon Sep 17 00:00:00 2001
From: Dave Longley <dlongley@digitalbazaar.com>
Date: Thu, 3 Apr 2025 17:59:24 -0400
Subject: [PATCH 1/4] Add HSP color model scan attempt w/detecting barcodes.

---
 CHANGELOG.md    |  7 +++++++
 lib/barcodes.js | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 596563e..9b2b097 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/barcodes.js b/lib/barcodes.js
index 96d9f13..6828943 100644
--- a/lib/barcodes.js
+++ b/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);
+}

From c7ad9288794e291b82e9e438b4cc22f49d54b2ed Mon Sep 17 00:00:00 2001
From: Dave Longley <dlongley@digitalbazaar.com>
Date: Thu, 3 Apr 2025 18:07:13 -0400
Subject: [PATCH 2/4] Fix linting errors.

---
 lib/barcodes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/barcodes.js b/lib/barcodes.js
index 6828943..f5ada12 100644
--- a/lib/barcodes.js
+++ b/lib/barcodes.js
@@ -35,11 +35,11 @@ async function _detect({barcodeDetector, video, signal, resolve, reject}) {
 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 width = video.videoWidth;
   const height = video.videoHeight;
   canvas.width = width;
   canvas.height = height;
-  const ctx = visibleCanvas.getContext('2d');
+  const ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0);
   const imageData = ctx.getImageData(0, 0, width, height);
   const {data} = imageData;

From daf8071a6916157fdb4fc3542e23d855ab491b71 Mon Sep 17 00:00:00 2001
From: Dave Longley <dlongley@digitalbazaar.com>
Date: Thu, 3 Apr 2025 20:50:18 -0400
Subject: [PATCH 3/4] Ensure canvas style is set.

---
 lib/barcodes.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/barcodes.js b/lib/barcodes.js
index f5ada12..c837538 100644
--- a/lib/barcodes.js
+++ b/lib/barcodes.js
@@ -39,6 +39,7 @@ async function _detectWithHspLuminance({barcodeDetector, video}) {
   const height = video.videoHeight;
   canvas.width = width;
   canvas.height = height;
+  canvas.style = `width: ${width}px; height: ${height}px`;
   const ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0);
   const imageData = ctx.getImageData(0, 0, width, height);

From 5ec70190f03e15f922757de18348c323629ab1aa Mon Sep 17 00:00:00 2001
From: Dave Longley <dlongley@digitalbazaar.com>
Date: Thu, 3 Apr 2025 20:52:56 -0400
Subject: [PATCH 4/4] Pass image data directly to barcode detector.

---
 lib/barcodes.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/barcodes.js b/lib/barcodes.js
index c837538..1fc1fb4 100644
--- a/lib/barcodes.js
+++ b/lib/barcodes.js
@@ -49,10 +49,9 @@ async function _detectWithHspLuminance({barcodeDetector, video}) {
       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);
+  // try to detect barcode in image data
+  return barcodeDetector.detect(imageData);
 }
 
 // HSP = hue, saturation, and "perceived brightness" -- a potential improvement