grocy / grocy

ERP beyond your fridge - Grocy is a web-based self-hosted groceries & household management solution for your home
https://grocy.info
MIT License
6.78k stars 562 forks source link

Feature Request: Camera barcode scanning: Support Samsung S20+ camera selection #1642

Closed StevenJonSmith closed 3 years ago

StevenJonSmith commented 3 years ago

When trying to scan a product barcode using a Samsung S20+ the app loads the main wide angle camera, I assume due to distrotion, this camera is unable to read any barcodes.

When I try to change the active camera, the dropdown menu shows 4 avaliable, but they all return the same error when selected. See the screenshots below. Avaliable cameras Initial error notifications Error from "More details"

I am using the Chrome browser on the device, but I tried the Tor browser (a secured Firefox) however this doesn't show any avaliable cameras (I think due to the extra security). I have given access to cameras in Chrome, and Grocy is served via Nginx with SSL.

I tried the Quagga test page on the same device and it has the sameissue with the wide camera, but does allow me to change camera which then reads barcodes without issue.

berrnd commented 3 years ago

Reporting the same thing twice (#1634) brings out exactly what? 🙄

I tried the Quagga test page

QuaggaJS is not quagga2.

 

However, if it makes you happy, let's leave this open. grocy does nothing specific for a Samsung S20+, neither for any other device. In fact, it doesn't even handle the barcode scanning part itself, it's the component used.

So still not really the right place and most probably only solvable/debuggable by someone having that device, so that won't be me.

berrnd commented 3 years ago

I've searched a little bit for you and found ericblade/quagga2#351 with exactly that specific problem and suggesting to remove the facingMode constraint.

So to try this out, simply remove or comment out line 71 of public/viewjs/components/barcodescanner.js (that one, and double check that your browser isn't caching it after modifying it).

StevenJonSmith commented 3 years ago

Reporting the same thing twice (#1634) brings out exactly what? 🙄

Sorry didn't realise I could still reply to the first bug, I assumed as it was closed I couldn't update it.

QuaggaJS is not quagga2.

I will look at this, as I didn't realise.

I've searched a little bit for you and found ericblade/quagga2#351 with exactly that specific problem and suggesting to remove the facingMode constraint.

Thanks you beat me to it, I will give that a go and report back.

StevenJonSmith commented 3 years ago

So to try this out, simply remove or comment out line 71 of public/viewjs/components/barcodescanner.js (that one, and double check that your browser isn't caching it after modifying it).

Unfortunately this didn't work. I'll have a look and see if I can work anything out.

StevenJonSmith commented 3 years ago

So I had a look and I managed to hack something up to give me access to the correct camera, however it still doesn't seem to work for all accessible cameras, and I don't know what impact it would have on other devices (though it didn't break on my laptop). So I won't be opening a new branch and subsequent pull request for the changes I made.

However, I will share them here so that anyone experiencing the same issue can make the changes locally.

  1. Open /app/grocy/public/viewjs/components/barcodescanning.js
  2. Remove line 71 (https://github.com/grocy/grocy/blob/master/public/viewjs/components/barcodescanner.js#L71)
  3. Modify line 72 to be "deviceId: window.localStorage.getItem('cameraId')" (https://github.com/grocy/grocy/blob/master/public/viewjs/components/barcodescanner.js#L72)
  4. At line 268 add "window.localStorage.setItem('cameraId', camera[0].deviceId);" (https://github.com/grocy/grocy/blob/master/public/viewjs/components/barcodescanner.js#L268)
  5. Save file and clear cache in browsers

This will load the front camera and you can switch to the back camera which works for scanning.

berrnd commented 3 years ago

window.localStorage.getItem('cameraId') holds the last used camera (id) and uses that again the next time.

So the only real change about that all is the first point about line 71 (like already mentioned before and in the referenced upstream issue), which clearly does that - allowing/showing any camera. In contrast, facingMode: "environment" requests (or should request) the default back camera (Web API ref, caniuse ref).

However, that's pretty clear still either an upstream issue, or (rather) a specific issue with that device. So closing that here, feel free to share your workaround also on the subreddit for better discoverability.