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..1fc1fb4 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; + 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); + 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; + } + + // try to detect barcode in image data + return barcodeDetector.detect(imageData); +} + +// 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); +}