On a computer without cameras, the line
const cameraDevices = useDeviceList();
causes an uncaught runtime error "Requested device not found".
IMO this should just create an empty array [].

Thank you for creating and maintaining this project ✨
It would be helpful if there were a document detailing what kinds of errors are handled by the onError function, so that I can translate the error messages for each individual case.

I found this file, but it doesn't appear to be used in the component.
src/misc/index.ts

I create a dialog component and put QrScanner in dialog content, when I get the result I would like to close the dialog also close the camera as well, but I got error when dialog is closing.

I'm a newbie in React your help is much appreciated

Error message:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

My source code

import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Typography,
} from "@mui/material";
import { QrScanner } from "@yudiel/react-qr-scanner";

function Scanner({ open, setOpen, onDecode }) {
const handleClose = () => {
setTimeout(() => setOpen(false), 0);
};

return (


Scan Package by camera

<DialogContent
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<QrScanner
onDecode={(result) => {
if (result) {
onDecode(result);
setOpen(false);
}
}}
onError={(err) => {
console.error(err?.message);
}}
/>


<Button
variant="outlined"
color="secondary"
sx={{ px: 5 }}
onClick={handleClose}
>
Close



);
}

export default Scanner;

When I build my project, there is an error like this.

I would like to request the addition of a torch/flashlight feature to the ImageCapture component. This feature would allow users to scan QR codes in the dark.

Is it possible to select, which back camera should device use? In nowadays, a lot of mobile devices has more than one back camera, on Android this QR scanner selected my zoom camera, which has worst quality, instead of main back camera. I tested it in 2 devices, with the same result.

When I'm trying to fill in "deviceId" field with proper it, then it doesn't work.

It would be great if the video element with the camera preview shows the image 'flipped' if the camera is facing the user. That way left&right make more sense, e.g. when on a laptop and you're holding up a QR code you can easier put it inside the view.

From my quick research:

• On desktop (laptop) browsers every camera can point somewhere else, but I suppose it's safe to assume it faces the user. I think it does not return a facingMode in stream.getVideoTracks[0].getCapabilities().
• On mobile browser it seems you can get the facingMode from stream.getVideoTracks[0].getCapabilities().

So perhaps the video preview should be flipped always, unless stream.getVideoTracks[0].getCapabilities().facingMode === 'environment' ?

A video can be flipped by applying this style: { transform: scaleX(-1); }.

I can create a PR for this, but maybe you have certain reasons to not implement it?

Description

When using the scanner component inside a modal, if the modal is closed before the camera feed has fully initialized, the camera continues to run in the background. This issue seems to stem from a race condition where the clean-up function executes before the camera has been fully set up, leading to the stream not being properly stopped.

Steps to reproduce

1. Open the modal which initializes the scanner component to start the camera stream.
2. Close the modal quickly before the camera feed fully initializes.
3. Notice that the camera light (if available on the device) remains on, indicating that the stream has not been stopped.

Expected behavior

Closing the modal should also stop the camera stream completely, regardless of whether the camera has fully initialized or not.

Actual behavior

The camera remains on even after the modal has been closed if the modal is closed before the camera feed is completely initialized.

Hey, first of all, thank you for this lib, it's awesome.
Unfornutelly I found one glitch. When I run Storybook demo on the Android 7 and Chrome 109.0.5414 video is not starting. Instead, I see the "Could not start video source" error.
Seems like this is called for some reason.

I have the same issue in my react app using your library. On Android 8 it works well.
This Android device can run camera video (check other websites to test if it's device related issue).

Is there a chance to look at it from your side? Thank you in advance!

If you get warnings when running vite build:

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

You can fix it by splitting vendor chunk inside your vite.config.ts file:

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react(), splitVendorChunkPlugin()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id: string) {
          // creating a chunk to react-qr-scanner deps. Reducing the vendor chunk size.
          if (id.includes('@yudiel/react-qr-scanner'))
            return '@qr-scanner'
        },
      },
    },
  },
})

Thanks for building and maintaining this library.
I'm getting source map warnings when running react-scripts start (CRA).

react version: 18.2.0
react-qr-scanner version: 1.1.4

Failed to parse source map from '/usr/src/app/node_modules/@yudiel/src/components/Counter.tsx' file: Error: ENOENT: no such file or directory, open '/usr/src/app/node_modules/@yudiel/src/components/Counter.tsx'

Failed to parse source map from '/usr/src/app/node_modules/@yudiel/src/components/Finder.tsx' file: Error: ENOENT: no such file or directory, open '/usr/src/app/node_modules/@yudiel/src/components/Finder.tsx'

Failed to parse source map from '/usr/src/app/node_modules/@yudiel/src/components/QrScanner.tsx' file: Error: ENOENT: no such file or directory, open '/usr/src/app/node_modules/@yudiel/src/components/QrScanner.tsx'

...

https://github.com/yudielcurbelo/react-qr-scanner/blame/6231aa2034b64fe864eab5182f5ce698ca97385f/src/hooks/useQrScanner.ts#L8

Hi
I recently did a yarn upgrade-interactive and for some unknown reason I got the 2.0 version proposed. Anyway, when running it via the following (what I consider to be the default component integration):

  <Scanner
            onResult={onQrCodeReceived}
            onError={error => console.log('scan error', error?.message)}
          />

I do get continuous scanning even though I no longer show a QR code to the camera (so I hear a loud beep every 1s or so).

It would be great to be able to adjust the zoom level. Is that possible? I am building an app that needs to scan small QR code that can be at a distance as well. Ability to zoom is a necessity it seems.

Thanks for your library, I'm trying to implement application to verify vouchers and it fits perfectly. But I'm missing one feature - pause reading.

Imagine scenario:

1. Person at the entrance reads QR code and I send request to server. - Here I would perform pause reading
2. Waiting for server response about validity and details. - show details.
3. Show popup for lets say 5 seconds with details.
4. Unpause reading

I can do videoElement.pause() but which freeze the video. But then your app is constantly performing reading on that element. I know I can increase the scanDelay. But I would like to freeze it until timeout is gone or some click happen etc. And have possibility to pause reading instead of playing with scanDelay would be easier.

I want to perform pause to not send more request to server.

Thanks

Hello guys,

Is it possible to set the default camera zoom to 1.0 and not 0.5?
Does it depend on system settings or do I need to adjust the library settings?

android system version: 14

Setup:

• @yudiel/react-qr-scanner v1.2.4
• React v18.2.0
• React Router DOM v6.21.2

I have a simple React app which needs to read a QR code and pass the contents to the backend API for a scoring system.

<QrScanner
  onDecode={code => {
    console.log('Navigate to captured code:', code)
    navigate('/display-code', { state: { code } })        
  }}
  onError={error => {
    console.error(error?.message)
    throw error
  }}
/>

This QR Scanner works fine, except for if I call React Router's navigate (from the useNavigate() hook) it throws the following error:

ERROR
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
    at e.makeBufferFromCanvasImageData (http://localhost:3000/static/js/bundle.js:16610:34)
    at new e (http://localhost:3000/static/js/bundle.js:16607:69)
    at t.createBinaryBitmap (http://localhost:3000/static/js/bundle.js:17183:13)
    at t.decode (http://localhost:3000/static/js/bundle.js:17178:20)
    at n (http://localhost:3000/static/js/bundle.js:17170:21)

Googling around, it appear to be a dirty dismount issue.

My workaround is to throw the error away, and it all works fine:

<QrScanner
 onDecode={code => {
   console.log('Navigate to captured code:', code)
   navigate('/display-code', { state: { code } })        
 }}
 onError={error => {
   // We get this error message after capturing a code
   if (error?.message.startsWith("Failed to execute 'getImageData' on 'CanvasRenderingContext2D':")) return 
   // We should report all other errors
   console.error(error?.message)
   throw error
 }}
/>

Is there something missing I should be doing before calling navigate?

Thanks for the awesome library! I am using it atm and saw that there is a onDecode and onResult. I was wondering what the difference between the two is. Thanks!

I have set this up in a little app and while most QR codes seem to work no problems, this one in the image and a few others don't seem to work.
I get no errors, it's like it just doesn't recognise it as a QR code.

However, using an iPhone camera I get a URL to google drive from it for a restaurant menu, so it seems to be a valid QR code.
Do you have any ideas why it wouldn't work?

So, i am trying to run the package on a next JS app, and i get this error, some on know how to fix?

hi, I update to lastest version and found the custom viewfinder is gone. Is there any way to custom it in new version or can i disable it?

In browser , camera keeps on scanning even if I unmount the component from react application. How to stop camera from scanning once it scans the qr code?

How can i switch off the camera , when i read the qrcode successfully? @idindrakusuma @yudielcurbelo

What?

Type declarations not working in Next.js

Dev Environment

• Next.js 12.2.4 with TypeScript
• node js v14.19.3
• MacOS

Screenshot

Add customisation prop to add in custom components for various elements. Most notably "Loading..." text to add matching loading icons/spinners/text as rest of site.

Can be extended to make it easier for other customisations not easy/possible with the CSS markers.

When I npm run build

ReferenceError: Audio is not defined

version: ^2.0.0-beta.3

How can I solve it?

Getting following warnings while starting/building react project.
I am using this version of package : "@yudiel/react-qr-scanner": "^2.0.0-beta.3"

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/assets/CameraOff.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/assets/CameraOff.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/assets/CameraOn.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/assets/CameraOn.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/assets/TorchOff.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/assets/TorchOff.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/assets/TorchOn.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/assets/TorchOn.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/assets/base64Beep.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/assets/base64Beep.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/components/OnOff.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/components/OnOff.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/components/Scanner.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/components/Scanner.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/components/Torch.tsx' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/components/Torch.tsx'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/hooks/useContinuousScanner.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/hooks/useContinuousScanner.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/hooks/useDeviceList.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/hooks/useDeviceList.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultComponents.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultComponents.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultOptions.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultOptions.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultStyles.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/misc/defaultStyles.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/BrowserMultiFormatScanner.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/BrowserMultiFormatScanner.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/BrowserScanner.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/BrowserScanner.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/HTMLCanvasElementLuminanceSource.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/scanners/HTMLCanvasElementLuminanceSource.ts'

WARNING in ./node_modules/@yudiel/react-qr-scanner/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/node_modules/@yudiel/react-qr-scanner/src/utilities/browser.ts' file: Error: ENOENT: no such file or directory, open '/home/node_modules/@yudiel/react-qr-scanner/src/utilities/browser.ts'

I have custom QR codes that are different colors, the scanner is not able to pick up any colors (apart from background::white foreground::black)

Any workaround for this issue?

I'm not sure what's happening, but it seems like tracker= doesn't work for me:

const [stopDecoding, setStopDecoding] = useState(false);
... code ....
<QrScanner
            stopDecoding={stopDecoding}
            tracker={false} // tracker={stopDecoding} <-- I tried using false in purpose to see how would this act. Camera remains on.
            onScan={(value) => {
            console.log({ value });
         }}
     onError={handleError}
     aspectRatio="1:1"
/>

Please update the README doc to reflect the import changes.

import {QrScanner} from '@yudiel/react-qr-scanner

to

import { Scanner } from '@yudiel/react-qr-scanner';

I encountered an issue with certain Samsung devices (e.g. S22) where the camera fails to focus properly, resulting in blurry QR codes that cannot be scanned. Upon researching potential solutions on the internet, it appears that setting the auto-focus constraint focusMode: continuous may resolve the issue. Here's an example of how I try to use the constraints:

constraints={{
  facingMode: 'environment',
  focusMode: 'continuous',
}}

However, when attempting to set the focusMode property, I encountered the following error:

Type '{ facingMode: string; focusMode: string; }' is not assignable to type 'MediaTrackConstraints'.
  Object literal may only specify known properties, and 'focusMode' does not exist in type 'MediaTrackConstraints'.

Upon inspecting the library source code, I observed that the constraints prop is passed to the Finder component and utilized in the useMediaDevices hook, as seen here: useMediaDevices.ts.

Additionally, I noticed that there is an open issue (#22) on the repository regarding similar zoom constraint problem.

It seems logical to me that it should be possible to pass constraints such as focusMode or zoom to window.navigator.mediaDevices, especially when browser console output from navigator.mediaDevices.getSupportedConstraints() clearly states that those constraints do exist in the browser API.

Sources:
https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#focusmode

https://forum.developer.samsung.com/t/camera-auto-focus-and-zoom-camera-not-working-in-the-web-application/27908/1

mebjas/html5-qrcode#308

Besides that, it is a great library and works flawlessly on apple devices without any problems.

Kindly requesting @yudielcurbelo for any assistance or suggestions on how to address these issues.