video is blank when granted camera permissions for the first time

[kaushalyap]

I notice that in dev mode (my case Nextjs) newly granting camera permission result in empty <video> (white box),
but in production mode things work fine.

[adamalfredsson]

Is there just a delay or does the stream not start at all? Have you got any clues?

[kaushalyap]

@nomadoda streaming not starting at all (square with the green border is the video element)

[kaushalyap]

@nomadoda I noticed if you change something in the DOM, which causes a HMR, after that video feed is visible.

[kaushalyap]

Also getting following in the console.

[DonKoko]

Just giving my 2 cents. I had this same issue and i believe its because of the timing of how things happen. The way I solved it is I made a separate component with the video and useZxing and I only render this component if there are permissions already given. This completely resolved the issue.

[lenard-a]

Just giving my 2 cents. I had this same issue and i believe its because of the timing of how things happen. The way I solved it is I made a separate component with the video and useZxing and I only render this component if there are permissions already given. This completely resolved the issue.

Could you please share your code? I tried getting the permissions in advance with navigator.mediaDevices.getUserMedia({ video: true }), and then conditionally show the scanner component, but it still gave me the error above, and then a bunch of "No MultiFormat Readers were able to detect the code." errors.
If the scanner is rendered on app start, it works correctly.

[DonKoko]

@lenard-a there it is: https://github.com/Shelf-nu/shelf.nu/blob/main/app/routes/_layout%2B/scanner.tsx#L51-L91
Hope that helps.

[lenard-a]

Thank you! I realized that disabling StrictMode makes it happen much less frequent, but I will check your code to fully fix the issue.