chore: add advance config and handle media not ready state

Author: gjulivan

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

@@ -28,6 +28,7 @@ export const BarcodeScanner: FunctionComponent<BarcodeScannerContainerProps> = p
             height={props.height}
             widthUnit={props.widthUnit}
             width={props.width}
+            detectionLogic={props.detectionLogic}
         />
     );
 };

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

@@ -62,7 +62,6 @@
                 <systemProperty key="Visibility" />
             </propertyGroup>
         </propertyGroup>
-
         <propertyGroup caption="Dimensions">
             <propertyGroup caption="Dimensions">
                 <property key="widthUnit" type="enumeration" defaultValue="percentage">
@@ -92,5 +91,15 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
+        <propertyGroup caption="Advanced">
+            <property key="detectionLogic" type="enumeration" defaultValue="native">
+                <caption>Detection logic</caption>
+                <description>Choose the detection logic to use for barcode scanning.</description>
+                <enumerationValues>
+                    <enumerationValue key="zxing">Zxing</enumerationValue>
+                    <enumerationValue key="native">BarcodeDetector API (experimental, fallback to Zxing)</enumerationValue>
+                </enumerationValues>
+            </property>
+        </propertyGroup>
     </properties>
 </widget>

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

@@ -4,7 +4,7 @@ import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Dimensions, getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { useCustomErrorMessage } from "../hooks/useCustomErrorMessage";
 import { useReader } from "../hooks/useReader";
-import { BarcodeFormatsType } from "../../typings/BarcodeScannerProps";
+import { BarcodeFormatsType, BarcodeScannerContainerProps } from "../../typings/BarcodeScannerProps";
 
 import "../ui/BarcodeScanner.scss";
 
@@ -57,6 +57,7 @@ export interface BarcodeScannerProps extends Dimensions {
     class: string;
     useAllFormats: boolean;
     barcodeFormats?: BarcodeFormatsType[];
+    detectionLogic?: BarcodeScannerContainerProps["detectionLogic"];
 }
 
 export function BarcodeScanner({
@@ -65,6 +66,7 @@ export function BarcodeScanner({
     class: className,
     barcodeFormats,
     useAllFormats,
+    detectionLogic,
     ...dimensions
 }: BarcodeScannerProps): ReactElement | null {
     const [errorMessage, setError] = useCustomErrorMessage();
@@ -75,7 +77,8 @@ export function BarcodeScanner({
         useCrop: showMask,
         barcodeFormats,
         useAllFormats,
-        canvasMiddleRef
+        canvasMiddleRef,
+        detectionLogic
     });
 
     const { ref: videoRef, useBrowserAPI } = reader ?? {};

packages/pluggableWidgets/barcode-scanner-web/src/helpers/barcode-detector-utils.tsx

@@ -21,12 +21,7 @@ const mapToNativeFormat = (format: string): string => {
 
 // Check if BarcodeDetector API is available
 export const isBarcodeDetectorSupported = (): boolean => {
-    return (
-        typeof globalThis !== "undefined" &&
-        "BarcodeDetector" in globalThis &&
-        "detect" in (globalThis as any).BarcodeDetector &&
-        typeof (globalThis as any).BarcodeDetector.detect === "function"
-    );
+    return typeof globalThis !== "undefined" && "BarcodeDetector" in globalThis;
 };
 
 // Get supported formats for BarcodeDetector
@@ -76,13 +71,16 @@ export const createBarcodeDetector = (options?: BarcodeDetectorOptions): Barcode
 
 // Detect barcodes from video or canvas element using BarcodeDetector API
 export const detectBarcodesFromElement = async (
-    detector: BarcodeDetector,
-    element: HTMLVideoElement | HTMLCanvasElement
+    detector: BarcodeDetector | null,
+    element: HTMLVideoElement | HTMLCanvasElement | null
 ): Promise<DetectedBarcode[]> => {
     try {
+        if (!detector || !element || (element as HTMLVideoElement).readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+            return [];
+        }
         return await detector.detect(element);
     } catch (error) {
-        console.warn("BarcodeDetector failed to detect:", error);
+        console.warn("BarcodeDetector failed to detect:", (element as HTMLVideoElement).readyState, error);
         return [];
     }
 };

packages/pluggableWidgets/barcode-scanner-web/src/helpers/utils.tsx

@@ -26,6 +26,7 @@ export type ReaderProps = {
     barcodeFormats?: BarcodeFormatsType[];
     useAllFormats: boolean;
     canvasMiddleRef: RefObject<HTMLDivElement>;
+    detectionLogic?: "zxing" | "native";
 };
 
 export type UseReaderHook = (args: ReaderProps) => { ref: RefObject<HTMLVideoElement>; useBrowserAPI: boolean };

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

@@ -1,6 +1,10 @@
 import { RefObject } from "react";
 import { BarcodeDetector, MxBarcodeReader } from "../helpers/barcode-detector";
-import { createBarcodeDetector, createBarcodeDetectorOptions } from "../helpers/barcode-detector-utils";
+import {
+    createBarcodeDetector,
+    createBarcodeDetectorOptions,
+    detectBarcodesFromElement
+} from "../helpers/barcode-detector-utils";
 import { mediaStreamConstraints, ReaderProps } from "../helpers/utils";
 
 export class Reader implements MxBarcodeReader {
@@ -57,20 +61,18 @@ export class Reader implements MxBarcodeReader {
         reject: (reason?: Error) => void
     ): Promise<void> => {
         try {
-            if (this.videoRef.current === null) {
-                return;
-            }
             if (this.decodeInterval) {
                 clearTimeout(this.decodeInterval);
             }
-            const detectionCode = await this.barcodeDetector?.detect(this.videoRef.current);
+            const detectionCode = await detectBarcodesFromElement(this.barcodeDetector, this.videoRef.current);
 
             if (detectionCode && detectionCode.length > 0) {
                 if (resolve) resolve(detectionCode[0].rawValue);
             } else {
                 this.decodeInterval = setTimeout(this.decodeStream, 50, resolve, reject);
             }
         } catch (error) {
+            console.log("decodeStream error", error);
             reject(error);
         }
     };

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

@@ -10,7 +10,10 @@ export const useReader: UseReaderHook = args => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const onSuccess = useEventCallback(args.onSuccess);
     const onError = useEventCallback(args.onError);
-    const enableBrowserAPI = useMemo(() => isBarcodeDetectorSupported(), []);
+    const enableBrowserAPI = useMemo(
+        () => isBarcodeDetectorSupported() && args.detectionLogic === "native",
+        [args.detectionLogic]
+    );
 
     const reader: MxBarcodeReader = useMemo(() => {
         return enableBrowserAPI ? new NativeReader(args, videoRef) : new ZxReader(args, videoRef);

packages/pluggableWidgets/barcode-scanner-web/typings/BarcodeScannerProps.d.ts

@@ -16,6 +16,8 @@ export type WidthUnitEnum = "percentage" | "pixels";
 
 export type HeightUnitEnum = "percentageOfWidth" | "pixels" | "percentageOfParent";
 
+export type DetectionLogicEnum = "zxing" | "native";
+
 export interface BarcodeFormatsPreviewType {
     barcodeFormat: BarcodeFormatEnum;
 }
@@ -34,6 +36,7 @@ export interface BarcodeScannerContainerProps {
     width: number;
     heightUnit: HeightUnitEnum;
     height: number;
+    detectionLogic: DetectionLogicEnum;
 }
 
 export interface BarcodeScannerPreviewProps {
@@ -56,4 +59,5 @@ export interface BarcodeScannerPreviewProps {
     width: number | null;
     heightUnit: HeightUnitEnum;
     height: number | null;
+    detectionLogic: DetectionLogicEnum;
 }