Fix: unable to scan the long barcodes on mobile devices (#82)

* fix: unable to scan the long barcodes on mobile devices * fix: reduce too many requests in the scanning app
uncefact · Jul 15, 2024 · 93d1859 · 93d1859
1 parent 205e04a
commit 93d1859
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/packages/mock-app/src/components/Scanner/Scanner.tsx b/packages/mock-app/src/components/Scanner/Scanner.tsx
@@ -19,6 +19,8 @@ const Scanner = forwardRef((props: IHtml5QrcodePluginProps, ref: ForwardedRef<IS
     fps: props.fps || 10,
     qrbox: props.qrbox || { width: 250, height: 150 },
     disableFlip: props.disableFlip || false,
+    useBarCodeDetectorIfSupported: props.useBarCodeDetectorIfSupported || true,
+    focusMode: props.focusMode || 'continuous'
   }), [props.fps, props.qrbox, props.disableFlip]);
 
   /**

diff --git a/packages/mock-app/src/pages/Scanning.tsx b/packages/mock-app/src/pages/Scanning.tsx
@@ -50,7 +50,7 @@ const Scanning = () => {
   };
 
   React.useEffect(() => {
-    if (!scannedCode || !identityProvider) {
+    if (!scannedCode || !identityProvider || isLoading) {
       return;
     }
 
@@ -92,8 +92,10 @@ const Scanning = () => {
       <Scanner
         ref={scannerRef}
         fps={30}
-        qrbox={{ width: 250, height: 150 }}
+        qrbox={{ width: 500, height: 300 }}
         disableFlip={false}
+        useBarCodeDetectorIfSupported={true}
+        focusMode= 'continuous'
         qrCodeSuccessCallback={onScanResult}
         qrCodeErrorCallback={onScanError}
       />

diff --git a/packages/mock-app/src/types/scanner.types.ts b/packages/mock-app/src/types/scanner.types.ts
@@ -9,6 +9,8 @@ export interface IHtml5QrcodePluginProps {
   qrbox?: { width: number; height: number };
   aspectRatio?: number;
   disableFlip?: boolean;
+  useBarCodeDetectorIfSupported?: boolean;
+  focusMode?: string;
   qrCodeSuccessCallback: (decodedText: string, result: Html5QrcodeResult) => void;
   qrCodeErrorCallback?: (error: unknown) => void;
 };