Bar codes are not getting scanned

[saurabhunde]

Hi @yudielcurbelo ,

I am implementing a feature where we are scanning bar codes on stickers. Bar codes are very small in size, so we might need auto detect bar code feature / zoom feature.

I tried below versions but no luck with scanning. Even below sample is also not working. onScan function itself is not getting triggered for v2.0.0-beta.15 We decided to go with this library by checking demo.

Demo works fine without any issue, Can you please share the code snippet of demo for reference?

Versions - 2.0.0-beta.15, 2.0.0-beta.3, 1.2.10

Below is my code snippet of v2.0.0-beta.15

import { useState } from 'react'
import {Scanner, useDevices, centerText, boundingBox} from '@yudiel/react-qr-scanner';

export const BarcodeScanner = () => {
  const [result, setResult] = useState(null);
  const [pauseScaner, setPauseScaner] = useState(false);
  const devices = useDevices();
  const onScanComplte = (result) => {
    console.log("result--->", result);
    setResult(result?.rawValue);
    setPauseScaner(true);
  }
  return (
    <div>
      <div>Result-{result}</div>
      <div style={{ width: 500, height: 500 }}>
        <video id='videoElement' autoPlay style={{ width: 0, height: 0 }}/>
        <Scanner
          videoId={'videoElement'}
          scanDelay={500}
          paused={pauseScaner}
          torch={true}
          constraints={{
            facingMode: "environment",
            deviceId: devices?.[0]?.deviceId,
          }}
          allowMultiple={true}
          //formats={["CODE_128"]}
          onScan={onScanComplte}
          components={{
            audio: true,
            onOff: true,
            finder: true,
          }}
          onError={(error) => console.log(error?.message)}
        />
      </div>
    </div>
  );
}

Below is code snippet of v2.0.0-beta.3

import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { Scanner, useDeviceList } from "@yudiel/react-qr-scanner";
import Dropdown from '../Common/Dropdown';

export const BarcodeScanner = ({ asset }) => {
    const [scannerFlag, setScannerFlag] = useState(true);
    const  devices  = useDeviceList();
    const videoDeviceOptions = useMemo(() => (
            devices
            .filter((device) => device.kind === 'videoinput')
            .map((device) => ({ value: device.deviceId, label: device.label }))
        ), [devices]);
    const [selectedVideoDevice, setSelectedVideoDevice] = useState('');

    const handleScan = useCallback(async (text, result) => {
        console.log('Text, Result-->', text, result);
    }, []);

    useEffect(() => {
        if (devices.length > 0 && !selectedVideoDevice) {
            setSelectedVideoDevice(devices[0]?.deviceId)
        }
    }, [devices, selectedVideoDevice]);

    return (
        <div className="flex w-full min-h-screen items-center flex-col bg-black/80">
            <div className="w-3/4 md:w-1/2 sm:w-3/4 flex justify-center items-center">
                <Dropdown
                    className="mt-[2.25rem]"
                    name="videoDevice"
                    placeholder="Select Device"
                    isFormField={false}
                    disabled={false}
                    options={videoDeviceOptions}
                    selectedOption={selectedVideoDevice}
                    onChangeValue={setSelectedVideoDevice}
                />
            </div>
            <div className="w-3/4 lg:w-1/2 md:w-1/2 sm:w-3/4 h-auto">
                <video
                    id="videoElement"
                    className={`${!scannerFlag && 'hidden'} h-0 w-0`}
                ></video>
                <Scanner
                    videoId="videoElement"
                    enabled={selectedVideoDevice && scannerFlag}
                    onResult={handleScan}
                    options={{
                        constraints: {
                            facingMode: 'environment',
                        },
                        ...(selectedVideoDevice ? { deviceId: selectedVideoDevice } : {}),
                    }}
                    styles={{
                        container: {
                            backgroundColor: 'rgb(0 0 0 / 0.8)',
                        },
                    }}
                    components={{
                        tracker: true,
                        audio: true,
                        torch: true,
                        //count: true,
                        onOff: true,
                    }}
                    onError={(error) => console.log(error?.message)}
                />
            </div>
        </div>
    );
};

export default Scanner;

Sample Bar code-

[saurabhunde]

@yudielcurbelo , please assist me with my issue. If possible please share the code snippet of demo example

[yudielcurbelo]

@yudielcurbelo , please assist me with my issue. If possible please share the code snippet of demo example

The code is under the stories folder. Scanner Story

[saurabhunde]

Thanks @yudielcurbelo , Just checked the code, it seems for demo v1.2.10 is used. Is there any example on latest stable version? Or is there anything wrong in my code snippet which I have posted above

[yudielcurbelo]

Thanks @yudielcurbelo , Just checked the code, it seems for demo v1.2.10 is used. Is there any example on latest stable version? Or is there anything wrong in my code snippet which I have posted above

Please switch to the beta branch

[saurabhunde]

Thank you @yudielcurbelo , v2.0.0 is much stable and working fine . Please update the documentation