Is it possible to draw a rectangle over the camera view and only work with data within that rectangle? ❓

[gtzippy]

Question

I'm trying to get a rectangular area in the camera view of fixed relative size. While screen sizes can differ from phone to phone, so long as the length/width ratio is the same I should be able to accomplish my goals. I have not seen anything for drawing shapes or a line between 2 points. Is there a way to do this or will I need to force my camera view to have the exact size ratio that I am looking for? Thanks!

What I tried

No response

VisionCamera Version

example project

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar questions in the issues page as well as in the discussions page and found none.

[onesmartguy]

I would like to see a good way do do this as well.

[xulihang]

I use react-native-barcode-mask to draw the rectangle and then crop the image in the frame processor plugin.

Code about cropping the image:

Android: https://github.com/xulihang/vision-camera-dynamsoft-label-recognizer/blob/2d37e9350c8a8f0d99413efebea88c0d15c3e08a/android/src/main/java/com/visioncameradynamsoftlabelrecognizer/VisionCameraDLRPlugin.java#L61-L82

iOS: https://github.com/xulihang/vision-camera-dynamsoft-label-recognizer/blob/2d37e9350c8a8f0d99413efebea88c0d15c3e08a/ios/VisionCameraDLRPlugin.swift#L69-L95

[gtzippy]

@xulihang I'm trying to implement this in the vision-camera example project but I've had no luck actually getting it to work. Will this really let me define a 200x300 area box and get just the picture information within that area? Since I have to convert YUV to a MAT the resolution of the image always changes and I just want to make sure this will actually do what I hope I it does before I spend a tremendous amount of time working on it.

[xulihang]

I use percentage so the resolution does not matter.

[xulihang]

If we need to define the region in pixels, I will use react-native-svg with its viewBox set and then use pixels to draw the scan region.

[GuihMatos]

Hello guys Any progress doing this? I'm also interested in this implementation. I'm not finding any examples anywhere. @gtzippy?

[SeongwoonHong]

love to see an example

[mrousavy]

Hey!

I worked on this (Skia Integration in V3) but it overcomplicated the codebase here. Usually we offer consulting for clients and build custom solutions like this.