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

[Ganesh1991]

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]

I have the same problem.

[KoRaghav]

same

[avichovatiya67]

I also have the same problem.

@JodusNodus
Is there any fix for this ?

[josephinekeung-accesso]

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