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