✨ Implement CodeScanner.regionOfInterest for Android

only1chi commented 1 year ago

What feature or enhancement are you suggesting?

It would be cool to have a way of creating a mask on android devices for the QR code area that you're scanning. The regionOfInterest property is supposed to this, but it only works in IOS and not Android.

The alternative is to try to create the mask ourselves. However, some android devices return the image in landscape-left, some in landscape-right, and tablets in portrait orientation. This leaves the task up to the developer trying to translate the native device coordinate frame, to the react-native analysis frame. With the current Code type returned from the CodeScanner there isn't enough information to do this accurately in a consistent manner. The Code type response, returns an object with bounds, and it does not contain the corner points of the QR code scanned. Therefore, it is rather difficult to verify that the image is within a custom scan region (if you try to create one).

Implementing regionOfInterest in android can solve this problem. Alternatively, you can also implement a masking feature react-native-vision-camera.

What Platforms whould this feature/enhancement affect?

iOS, Android

Alternatives/Workarounds

I am trying to use bounds property returned in the Code scanner object. However, I can't accurately trace the corner points of the QR code because I can't consistently transform from the native coordinate frame to the analysis frame.

Additional information

[X] I agree to follow this project's Code of Conduct
[X] I searched for similar feature requests in this repository and found none.

only1chi commented 1 year ago

@mrousavy Please let me know what it will take to get this done. I'm happy to discuss further or privately.

tusharmutreja-fareye commented 12 months ago

did you get any solution or any Workable code @mrousavy

mrousavy commented 12 months ago

Hi yes this is implemented in the latest version!

fahmifan commented 11 months ago

Hi @mrousavy do you have any example for Android & iOS ? Also, what values to set in regionOfIntereset a pixel, dp or something else? Thanks

ZachTechPro commented 9 months ago

@mrousavy As per the latest API documentation, regionOfInterest has not been implemented for Android. v. 3.8.2 https://react-native-vision-camera.com/docs/api/interfaces/CodeScanner

Any updates on this?

mrousavy commented 9 months ago

You're right, regionOfInterest is not implemented on Android. idk what was going on in my head when I said it is now implemented, I must've been tripping.

I'll re-open this feature request, but I won't implement it on Android since it is really hard to do so - the MLKit library from Google doesn't provide an API for it, and doing it manually will be very complex.

So there's two solutions:

Use a custom code scanner Frame Processor Plugin that supports such feature (or use a custom TFLite model and use vision-camera-resize-plugin first)
Create a feature request in Google's MLKit Barcode Scanner API to add the regionOfInterest feature. Then I can also add it in VisionCamera.

ZachTechPro commented 9 months ago

@mrousavy Thank you for the update! I'll take those two solutions into consideration.

mrousavy / react-native-vision-camera