✨ Implement CodeScanner.regionOfInterest for Android

[only1chi]

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]

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

[tusharmutreja-fareye]

did you get any solution or any Workable code @mrousavy

[mrousavy]

Hi yes this is implemented in the latest version!

[fahmifan]

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]

@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]

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:

1. 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)
2. 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]

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