[WC-1763]: barcode scanner improvements (#467)

Author: HedwigAR

packages/pluggableWidgets/barcode-scanner-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with 1D barcode scanning, now 1D barcodes recognition is improved when using the mask (#180937)
+
 ## [2.2.3] - 2023-01-04
 
 ### Changed

packages/pluggableWidgets/barcode-scanner-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "barcode-scanner-web",
   "widgetName": "BarcodeScanner",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Displays a barcode scanner",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "license": "Apache-2.0",

packages/pluggableWidgets/barcode-scanner-web/src/BarcodeScanner.tsx

@@ -19,7 +19,7 @@ export const BarcodeScanner: FunctionComponent<BarcodeScannerContainerProps> = p
     );
     return (
         <BarcodeScannerComponent
-            onDetect={props.onDetect ? onDetect : undefined}
+            onDetect={onDetect}
             showMask={props.showMask}
             class={props.class}
             heightUnit={props.heightUnit}

packages/pluggableWidgets/barcode-scanner-web/src/components/BarcodeScanner.tsx

@@ -57,7 +57,11 @@ export function BarcodeScanner({
     ...dimensions
 }: BarcodeScannerProps): ReactElement | null {
     const [errorMessage, setError] = useCustomErrorMessage();
-    const videoRef = useReader({ onSuccess: onDetect, onError: setError });
+    const videoRef = useReader({
+        onSuccess: onDetect,
+        onError: setError,
+        useCrop: showMask
+    });
     const supportsCameraAccess = typeof navigator?.mediaDevices?.getUserMedia === "function";
     const onCanPlay = useCallback((event: SyntheticEvent<HTMLVideoElement>) => {
         if (event.currentTarget.paused) {

packages/pluggableWidgets/barcode-scanner-web/src/hooks/useReader.ts

@@ -1,5 +1,14 @@
 import { useEffect, useRef, RefObject } from "react";
-import { BarcodeFormat, BrowserMultiFormatReader, DecodeHintType, NotFoundException } from "@zxing/library/cjs";
+import {
+    BarcodeFormat,
+    BinaryBitmap,
+    BrowserMultiFormatReader,
+    DecodeHintType,
+    HTMLCanvasElementLuminanceSource,
+    HybridBinarizer,
+    NotFoundException,
+    Result
+} from "@zxing/library/cjs";
 import { useEventCallback } from "@mendix/pluggable-widgets-commons";
 
 const hints = new Map();
@@ -23,19 +32,61 @@ const mediaStreamConstraints: MediaStreamConstraints = {
 type UseReaderHook = (args: {
     onSuccess?: (data: string) => void;
     onError?: (e: Error) => void;
+    useCrop: boolean;
 }) => RefObject<HTMLVideoElement>;
 
 export const useReader: UseReaderHook = args => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const onSuccess = useEventCallback(args.onSuccess);
     const onError = useEventCallback(args.onError);
+    const scale = 0.3;
+    const stopped = useRef<Boolean>(false);
+    const checkNotFound = (error: any): boolean => {
+        const ifNotFound = error instanceof NotFoundException;
+        return ifNotFound && !stopped.current;
+    };
+
+    const scanWithCropOnce = (reader: BrowserMultiFormatReader): Promise<Result> => {
+        const cropWidth = videoRef.current!.videoWidth * scale;
+        const captureCanvas = reader.createCaptureCanvas(videoRef.current!);
+        captureCanvas.width = cropWidth;
+        captureCanvas.height = cropWidth;
+        const loop = (resolve: (value: Result) => void, reject: (reason?: Error) => void) => {
+            try {
+                const canvasContext = captureCanvas.getContext("2d");
+                if (canvasContext !== null) {
+                    canvasContext.drawImage(
+                        videoRef.current!,
+                        (videoRef.current!.videoWidth * (1 - scale)) / 2,
+                        (videoRef.current!.videoHeight - cropWidth) / 2,
+                        cropWidth,
+                        cropWidth,
+                        0,
+                        0,
+                        captureCanvas.width,
+                        captureCanvas.width
+                    );
+                    const luminanceSource = new HTMLCanvasElementLuminanceSource(captureCanvas);
+                    const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
+                    const result = reader.decodeBitmap(binaryBitmap);
+                    resolve(result);
+                }
+            } catch (error) {
+                if (checkNotFound(error)) {
+                    setTimeout(() => loop(resolve, reject), reader.timeBetweenDecodingAttempts);
+                } else {
+                    reject(error);
+                }
+            }
+        };
+        return new Promise(loop);
+    };
 
     useEffect(() => {
-        let stopped = false;
-        const reader = new BrowserMultiFormatReader(hints, 2000);
+        const reader = new BrowserMultiFormatReader(hints, 500);
 
         const stop = (): void => {
-            stopped = true;
+            stopped.current = true;
             reader.stopAsyncDecode();
             reader.reset();
         };
@@ -44,16 +95,24 @@ export const useReader: UseReaderHook = args => {
             let stream;
             try {
                 stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
-                if (!stopped && videoRef.current) {
-                    const result = await reader.decodeOnceFromStream(stream, videoRef.current);
-                    if (!stopped) {
+                if (videoRef.current) {
+                    let result: Result;
+                    if (args.useCrop) {
+                        videoRef.current.srcObject = stream;
+                        videoRef.current.autofocus = true;
+                        videoRef.current.playsInline = true; // Fix error in Safari
+                        await videoRef.current.play();
+                        result = await scanWithCropOnce(reader);
+                    } else {
+                        result = await reader.decodeOnceFromStream(stream, videoRef.current);
+                    }
+                    if (!stopped.current) {
                         onSuccess(result.getText());
                     }
                 }
             } catch (error) {
                 // Suppress not found error if widget is closed normally (eg. leaving page);
-                const isNotFound = stopped && error instanceof NotFoundException;
-                if (!isNotFound) {
+                if (!checkNotFound(error)) {
                     if (error instanceof Error) {
                         console.error(error.message);
                     }

packages/pluggableWidgets/barcode-scanner-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Barcode Scanner" version="2.2.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Barcode Scanner" version="2.2.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BarcodeScanner.xml" />
         </widgetFiles>

packages/pluggableWidgets/barcode-scanner-web/src/ui/BarcodeScanner.scss

@@ -33,24 +33,16 @@
             }
 
             .canvas-left {
-                flex: 1;
+                flex: 0;
+                flex-basis: 30%;
             }
 
             $screen-md: 768px;
             $screen-lg: 992px;
             $screen-xl: 1200px;
             .canvas-middle {
                 flex: 0;
-                flex-basis: 60%;
-                @media screen and (min-width: $screen-md) {
-                    flex-basis: 50%;
-                }
-                @media screen and (min-width: $screen-lg) {
-                    flex-basis: 40%;
-                }
-                @media screen and (min-width: $screen-xl) {
-                    flex-basis: 30%;
-                }
+                flex-basis: 40%;
                 display: flex;
                 flex-direction: column;
 
@@ -62,7 +54,6 @@
                     flex: 0;
                     padding-top: 100%;
                     position: relative;
-
                     $corner-offset: 13px;
                     .corner {
                         position: absolute;
@@ -101,7 +92,8 @@
             }
 
             .canvas-right {
-                flex: 1;
+                flex: 0;
+                flex-basis: 30%;
             }
         }
     }