jamenamcinteer/react-qr-barcode-scanner

A simple React Component using the client's webcam to read barcodes.

react-qr-barcode-scanner's Issues

Does not work on iOS Safari

I've made a react application that uses this qr reader. It works fine on my computer with my webcam but nothing happens if I try to run it with localhost on my phone. It seems that the website just crashes as nothing on that view will load

torch prop not work

I am trying to use the torch prop in my implementation, but I can't get this to work,

const [torch, setTorch] = useState(false);

return (
...
<i className={`icon-Icon_torch ${styles.torch}`} onClick={() => setTorch(prev => !prev)} />
<BarcodeScannerComponent
  width="100%"
  height={
    windowSize.height
      ? windowSize.height - SCAN_CONFIG.footerHeight
      : SCAN_CONFIG.cameraDefaultHeight
  }
  torch={torch}
  facingMode="environment"
  onUpdate={(err, result) => {
    if (result) {
      handleResult(result.getText());
    }
  }}
/>

Official support for React 18

Hi all!

I really appreciate this library.
please, could you look for support of React 18?

https://github.com/jamenamcinteer/react-qr-barcode-scanner/blob/main/package.json#L34

npm install bash error:

 ✗ npm i react-qr-barcode-scanner
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-qr-barcode-scanner
npm ERR!   react-qr-barcode-scanner@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Video height is not taking full screen in mobile devices

Video (Webcam) not taking full parent dimension height and has some ratio restriction in mobile screen

I have tried setting
1.) <BarcodeScannerComponent height="100vh" width="100%" ....../>
2.) <BarcodeScannerComponent height="100vh" width="100vw" ...../>

So Need to pass some style property to webcam component but right now we don't have any way to pass style property and overwrite some of CSS styles in webcam

with default height and width

with height 100vh

Issue with node_modules

Hello, when running my react App with npm run start I have an issue the library.

Here is the issue :

WARNING in ./node_modules/react-qr-barcode-scanner/node_modules/@zxing/library/esm5/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\xxxx\my-app\node_modules\react-qr-barcode-scanner\node_modules\@zxing\library\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\xxxxx\my-app\node_modules\react-qr-barcode-scanner\node_modules\@zxing\library\src\index.ts'

And there is more but I think with this it should be enough.

ITS NOT WORKING ON LATEST REACT VERSION

ITS NOT WORKING ON LATEST REACT VERSION

It doesn´t support PDF417 Codes.

Any update?

Issues with MultiFormatReaders

Hello,
i'm just trying this module and i'm having troubles when my component is rendered:
onUpdate function triggers endlessly with the err input params that send this message (result param is undefined):

**NotFoundException: No MultiFormat Readers were able to detect the code.**
    at MultiFormatReader.__webpack_modules__../node_modules/@zxing/library/esm5/core/MultiFormatReader.js.MultiFormatReader.decodeInternal (https://localhost:9970/main.bundle.js:25687:15)
    at MultiFormatReader.__webpack_modules__../node_modules/@zxing/library/esm5/core/MultiFormatReader.js.MultiFormatReader.decodeWithState (https://localhost:9970/main.bundle.js:25569:21)
    at BrowserMultiFormatReader.__webpack_modules__../node_modules/@zxing/library/esm5/browser/BrowserMultiFormatReader.js.BrowserMultiFormatReader.decodeBitmap (https://localhost:9970/main.bundle.js:23953:28)
    at BrowserMultiFormatReader.__webpack_modules__../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decode (https://localhost:9970/main.bundle.js:23687:21)
    at loop (https://localhost:9970/main.bundle.js:23637:36)
    at https://localhost:9970/main.bundle.js:23651:64
    at new Promise (<anonymous>)
    at BrowserMultiFormatReader.__webpack_modules__../node_modules/@zxing/library/esm5/browser/BrowserCodeReader.js.BrowserCodeReader.decodeOnce (https://localhost:9970/main.bundle.js:23651:16)
    at HTMLImageElement._this.imageLoadedListener (https://localhost:9970/main.bundle.js:23528:68)

What could be the probem?
I am forgetting to do something?

Thank you!

Property 'text' is private and only accessible within class 'Result'

I have an issue when I'm using this library with typescript.
When I wanted to use the object of result, I've got this TS error:

Property 'text' is private and only accessible within class 'Result'

I can't access to @zxing/library types because it's private.
So how can I fix this type issue?

It doesn't support barcodes anymore

I've tested many barcodes like this, but it doesn't work

AZTEC qr format is not scanning.

I was developing a web application in React there is functionality to scan the QR and barcodes from the camera and file image/PDF. I need to support all formats of QR and barcodes.

I had to support the AZTEC format for sure. And the issue is with AZTEC only. It is taking a long time to scan for AZTEC format QR codes

MacOS Safari camera doesn't unmount

Tested on: Mac OS Safari (14.1 and 15.1)
iOS Safari and Mac OS Chrome work fine

Issue:
In Mac OS Safari the camera is not unmounted (turned off).
StopStream set to true doesn't unmount the camera, neither does unmounting the component.

To up the @zxing version

Hello

Is it possible to up the @zxing library ?
Since last appril 22 there is the 0.20 version.
It content a fix for the warnings about 'Failed to parse source map'
https://github.com/zxing-js/library/pull/546

not getting camera permission in android phone

err :>> Error: getUserMedia is not implemented in this browser
at Object.navigator.mediaDevices.getUserMedia (react-webcam.tsx:29)
at sourceSelected (react-webcam.tsx:258)
at Webcam.requestUserMedia (react-webcam.tsx:273)
at Webcam. (react-hot-loader.development.js:717)
at Webcam.componentDidMount (react-webcam.tsx:110)
at Webcam. (react-hot-loader.development.js:707)
at commitLifeCycles (react-dom.development.js:19814)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at commitRoot (react-dom.development.js:22381)
at finishSyncRender (react-dom.development.js:21807)
at performSyncWorkOnRoot (react-dom.development.js:21793)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at scheduleUpdateOnFiber (react-dom.development.js:21199)
at dispatchAction (react-dom.development.js:15660)
at fetchUser (App.js:285)

Inconsistent results

I'm struggling with inconsistent results due to this issue: zxing-js/library#351

It seems to have been fixed in @zxing-js/[email protected], so this dependency should be updated!

Safari / iOS error Does not work on iOS Safari ?

Support lost in React 17?

I get the following error when installing it on React 17 with Nextjs:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: my-app@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project     
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-qr-barcode-scanner      
npm ERR!   react-qr-barcode-scanner@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peerken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\LG\AppData\Local\npm-cache\eresolve-report.txt for a full report.       

npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\LG\AppData\Local\npm-cache\_logs\2021-12-22T13_51_30_740Z-debug.log     
█ 12/22 08:51 C:\...\my-app ► npm i react-qr-barcode-scanner
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree 
npm ERR!
npm ERR! While resolving: my-app@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project     
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-qr-barcode-scanner      
npm ERR!   react-qr-barcode-scanner@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peernpm ERR!
npm ERR! See C:\Users\LG\Appotentially bropData\Local\npm-cache\eresolve-report.txt for a full report.
                                     pData\Local\npm
npm ERR! A complete log of this run c report.       an be found in:npm ERR! 

Is support lost with React 17?

horizontal camera.

Is there a way to make the cell phone camera read barcodes from the cell phone horizontally?

Camera is not opening in Localhost

React.App.-.Google.Chrome.2023-02-06.22-36-21.mp4

I am not able to open camera on localhost but when I am trying to open after deployment it is working fine.

On localhost Also getting lots of waning

Zoom is not available ?

This scanner is not picking up the barcodes on smaller products. If we try to scan that by moving camera towards the barcode the focus of camera is not setting properly. It's because the camera can't focus nearby objects. may be zoom option will resolve the issue.

Hi all guys , i got problem " ReferenceError: window is not defined " . How can i fix it . Thank all guys . I used react and nextjs for my project

How to add supported barcode formats, eg: ISBN

navigator is not defined

Hi, i am getting this error when i tryed to use the component:

DeviceID

Hey,

I have stumbled on a problem with a Samsung camera that has couple of lenses. The default being taken to the feed by this library is a long-range one. I would like to change the environment camera, not only the front/back facing. Is there a good way to do this? I have seen that deviceId is being used in the code but not sure how universal it is.

Thanks

No funciona para React 18.2.0

hola,
la libreria esta impecable pero no esta actualizada para react 18.2.0,por favor actualizar...
muchisimas gracias

Issue missing directory from node_modules\@zxing\library\src

I use React version 18.1.0 and this is my code

import React from "react";
import BarcodeScannerComponent from "react-qr-barcode-scanner";

export default function BarcodeScanner() {
  const [data, setData] = React.useState("Not Found");
  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text);
          else setData("Not Found");
        }}
      />
      <p>{data}</p>
    </>
  );
}

When I run npm start I got many errors about no such file or directory on node_modules\@zxing\library\src

How can I fix it ?