Frame in Camera view

[bash88]

Is your feature request related to a problem? Please describe. When there are multiple codes close together on the scanned surface, there's no way to make sure the scanner scans a particular one.

Describe the solution you'd like A frame in the camera view, in which the code would have to be placed to scan it, would fix this.

Describe alternatives you've considered None. I've seen this in other barcode scanning plugins and I think this is the way to go.

Additional context Example of solution

[tafelnl]

Before we are able to accurately identify in which area a barcode should be placed, we must first know in what area the used libraries are looking for barcodes. For AVFoundation on iOS I know there is a rectOfInterest available. But for zxing on Android I am not sure. Does someone have any idea?

[baldoalessandro]

Hello! It seems to me that on Android the area limiting is performed inside the zxing-andoid-embedded library https://github.com/journeyapps/zxing-android-embedded/blob/13440ad8751dcaba4177fa50dfee639dac52a53d/zxing-android-embedded/src/com/journeyapps/barcodescanner/BarcodeView.java#L179 which is called by BarcodeScanner.scan

BarcodeScanner doesn't implement possibleResultPoints at the moment but maybe this can be used to filter the barcodes after the fact, but the JavaDoc says: "Do not depend on this being called at any specific point in the decode cycle." so I'm not so sure about this.

[rpascal]

On Android: Could you possibly use DecoratedBarcodeView I could be wrong but I believe that view includes the frame and text at the bottom.

[parnanzio]

Did you find any solution to limit the scan to a given area? In the example folder of this repo there is a scan-area-layout html page: is it useful for this purpose?

[tafelnl]

Unfortunately no. The scan-area-layout is an example of how to style the BarcodeView only. The actual scan target area won't change. I am still not sure how to change the target area

[denisLoncaric]

On Android: Could you possibly use DecoratedBarcodeView I could be wrong but I believe that view includes the frame and text at the bottom.

I also think using DecoratedBarcodeView could be possible as it already includes the frame (ViewfinderView). Not sure how much work would it be to rewrite the plugin :).

I am not sure if this is even an option (really not so experienced), but would it make sense to extend ViewfinderView in this plugin to add a constructor which is used when the class is built from code? Similar to this and then add the frame like BarcodeView is added in setupCamera method?

[arnotixe]

In my experience, it seems the scanning happens near the center, like in @ionic-native/barcode-scanner/ngx . See screenshot below. I'm not saying it definitely scans there, because I think it also works at least halfway out of the box.

Personally I actually think it is a good thing we can (must :wink: ) write our own UIs for scanning. But it would be awesome to have a boilerplate / standard design to just copy-paste before amending… Other TODOS I could think of that is related to UI and controls:

• torch (almost done https://github.com/capacitor-community/barcode-scanner/issues/34)
• camera switcher
• beep/sound/flash/vibrate on successful scan

[arnotixe]

Did you find any solution to limit the scan to a given area? In the example folder of this repo there is a scan-area-layout html page: is it useful for this purpose?

Thanks for pointing that example folder out! I already wrote my own before I saw this issue :stuck_out_tongue:

It should definitely be mentioned in the Install instructions that you need to write your own UI, with a link there.

My idea for "limiting scan area" would be to just make the transparent area all black opaque :) But it wouldn't actually prevent a successful scan to take place if the code would be behind the black… And I think the transparent is way more useful to the user+looks nicer.

[thegnuu]

I updated this issues to a lower priority since there are a few things open right now which are more important than this one I think, if someone out there is willing to help with this one it would be prefect ;)

Otherwise I will look into your suggestions and maybe find a proper way to add this functionality.

[bipoza]

In case it helps. If you're using React, I've created a little hook that makes it easy to inject components into the scanner view when the scanner is open.

The hook: https://github.com/codesyntax/ionic-react-capacitor-demo/blob/main/src/hooks/useBarcodeScanner.tsx How to use: https://github.com/codesyntax/ionic-react-capacitor-demo/blob/main/src/native-components/NativeBarcodeScanner.tsx#L23

Example:

[thegnuu]

I had a quick look at DecoratedBarcodeView and as far as I see (I might be wrong), there is no code which really restricts the reading area to the rendered area.

The only thing I found right now is that zxing-android-embedded has the option to set a crop rect on their decoder with setCropRect, unfortunately this is currently "hardcoded" to decoderThread.setCropRect(getPreviewFramingRect());.

So I guess if we want to use this feature we need to somehow add the possibility to set this rect similar to the rectOfInterest in AVFoundation. But even if we implement it this way it might be kinda tricky to really match the rect with the custom UI you have to provide....

[thegnuu]

Guys I am thinking about rewriting the plugin to ML Kit.

This would allow us to return the scanned barcode with the position where it was found and provide therefore the possibility to create a custom UI (I really like this idea of the current implementation) but it would allow each implementation to only handle barcodes found in a specific location using cornerPoints.

What do you think about the idea to let users know where the code was found and handle the processing based on this information? I think this might be the easiest way to implement this feature...

[thegnuu]

The ml-kit branch is currently in a cleanup process, since it will be possible there to get all codes in the viewport with their position I will close this issue for now :)