onCapture not firing

[as-85]

On my own app the event onCapture seems not be fired. The app is hosted on vercel. Have tried with different iPhones with Chrome and Safari.

I've tried with next/dynamic and without. Your Demoapp works.

Here is my code. I have tried with different imports.

Imports

[snip...]

// import { BarcodeScanner } from 'react-barcode-scanner';
// import 'react-barcode-scanner/polyfill';
import { toast } from 'react-toastify';
import dynamic from 'next/dynamic';

const BarcodeScanner = dynamic(
    () => {
        import('react-barcode-scanner/polyfill');
        return import('react-barcode-scanner').then((mod) => mod.BarcodeScanner);
    },
    { ssr: false }
);

[snip...]

[snip...]

    if (doScan) {
        const getCapturedValueHandler = (value) => {
            alert(value?.rawValue);
            const barcodeValue = value?.rawValue;
            setBarcodeValue(barcodeValue);
            setDoScan(false);

            if (barcodeValue != orderLine?.target?.barcodetext) {
                toast.error(
                    `...`,
                    {
                        autoClose: 10000,
                    }
                );
                setBarcodeValue('');
            }

            if (barcodeValue == orderLine?.target?.barcodetext) {
                setActiveStep(activeStep + 1);
            }
        };

        return (
            <Box>
                <Button
                    variant="contained"
                    size="small"
                    color="error"
                    startIcon={<Cancel />}
                    onClick={() => setDoScan(false)}
                >
                    Abbrechen
                </Button>
                <BarcodeScanner
                    options={{ formats: ['code_128', 'qr_code', 'data_matrix'] }}
                    onCapture={getCapturedValueHandler}
                />
            </Box>
        );
    }

[snip...]

[as-85]

Have find out, thats this formats whats causing it. Without formats array it works well.

formats: ['code_128', 'qr_code', 'data_matrix']

[preflower]

I tried to add formats and it work fine; Can you provide a mini repo?

Here is my test code:

'use client';

import dynamic from 'next/dynamic';
import { DetectedBarcode } from 'react-barcode-scanner';

const BarcodeScanner = dynamic(
    () => {
        import('react-barcode-scanner/polyfill');
        return import('react-barcode-scanner').then((mod) => mod.BarcodeScanner);
    },
    { ssr: false }
);

export default function Demo () {
  const onCapture = (barcode: DetectedBarcode) => {
    console.log(barcode.format, barcode.rawValue)
  }

  return (
    <div style={{ width: '400px', height: '400px' }}>
      <BarcodeScanner onCapture={onCapture} options={{ formats: ['code_128', 'qr_code', 'data_matrix'] }} />
    </div>
  )
}

Here is print:

[as-85]

My code looks like yours but not worked on my mobile devices. Did you try with mobiles? On desktop Chrome it worked fine.

[preflower]

it's because zbar doesn't support data_matrix format; According doc, zbar not support aztec, data_matrix and pdf417 formats, I will add warning in docs about support formats;

Reference: https://github.com/mchehab/zbar

[preflower]

The document has been updated