JodusNodus / react-qr-reader

React component for reading QR codes from webcam.
https://jodusnodus.github.io/react-qr-reader
MIT License
1.14k stars 407 forks source link

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

Open Ganesh1991 opened 11 months ago

Ganesh1991 commented 11 months ago

Source Code Link: https://codesandbox.io/p/sandbox/qr-code-scanner-jt9fzg

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. at e.makeBufferFromCanvasImageData (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:9815:15) at new e (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:9810:40) at t.createBinaryBitmapFromCanvas (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:10068:13) at t.decodeFromCanvas (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:10225:15) at h (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:10536:19) at t.scan (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:10543:13) at e.eval (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:10307:25) at eval (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:9952:17) at Object.eval [as next] (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:9963:9) at a (https://jt9fzg.csb.app/node_modules/react-qr-reader/dist/esm/index.js:9873:13) console.js:213 It was not possible to play the video. DOMException: The play() request was interrupted by a new load request. https://goo.gl/LdLk22 overrideMethod @ console.js:213 eval @ index.js:10101 eval @ index.js:9952 eval @ index.js:9963 u @ index.js:9880 Promise.then (async) s @ index.js:9889 eval @ index.js:9891 Ro @ index.js:9870 t.tryPlayVideo @ index.js:10088 eval @ index.js:10177 eval @ index.js:9952 eval @ index.js:9963 eval @ index.js:9891 Ro @ index.js:9870 t.playVideoOnLoadAsync @ index.js:10173 eval @ index.js:10198 eval @ index.js:9952 eval @ index.js:9963 eval @ index.js:9891 Ro @ index.js:9870 t.attachStreamToVideo @ index.js:10193 eval @ index.js:10285 eval @ index.js:9952 eval @ index.js:9963 eval @ index.js:9891 Ro @ index.js:9870 t.decodeFromStream @ index.js:10280 eval @ index.js:10269 eval @ index.js:9952 eval @ index.js:9963 a @ index.js:9873 Promise.then (async) s @ index.js:9889 eval @ index.js:9891 Ro @ index.js:9870 t.decodeFromConstraints @ index.js:10260 eval @ index.js:10720 commitHookEffectListMount @ react-dom.development.js:23150 invokePassiveEffectMountInDEV @ react-dom.development.js:25154 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 commitRootImpl @ react-dom.development.js:26935 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 eval @ react-dom.development.js:25651 Show 47 more frames Show less QRCodeScanner.js:47 TypeError: Cannot read properties of undefined (reading 'getVideoTracks') at e.eval (index.js:10307:46) at eval (index.js:9952:17) at Object.eval [as next] (index.js:9963:9) at a (index.js:9873:13)

MarceloEmmerich commented 10 months ago

I have the same problem.

KoRaghav commented 10 months ago

same

avichovatiya67 commented 9 months ago

I also have the same problem.

@JodusNodus Is there any fix for this ?

josephinekeung-accesso commented 9 months ago

I was having the same issue when I just use the example code

benstize commented 4 months ago

Well how to solve it?