Strange behavior

[ScreamZ]

Hello,

I'm trying like hell to include a document scanner, I've tried the one from Michael Villeneuve and your.
I know it's damn complicated to play with such use case and it requires a lot of development and time to get something nice, which is not possible on a free open-source project.

Here is a capture on iOS, it looks like it's finding the document but there is a shift from some pixels

Do you have an idea what could cause that ?

Even on a white paper document on a black table, I'm having an issue properly detecting, I might be missing something?
Thanks,
Andréas

[ScreamZ]

We even see it better there, looks well detected but the overlay is not at the good position

[humphreyja]

Wow yeah that is pretty bad. I definitely feel your pain! I built this project because because every other open source solution out there didn't work or was super buggy. Also the code was illegible! I definitely tried to keep the code clean on this so that hopefully some smarter people could work through some of the minor issues that I couldn't figure out (I'm not a native programmer usually). And unfortunately this really is one of those minor issues.

Basically, there is a disconnect between the sizing of the camera frame and the rectangle scanner frame. From my experience, it is easier to display the camera to take up 100% of the view and overlay any controls/headers/footers/sections.

What you are seeing here is most likely because the camera view and the rectangle coordinates get calculated from a 100% screen size but then you are displaying the rectangle on a view that is smaller than 100%.

So I'll reiterate, the absolute best way to use this package is at 100% screen size (no headers or footers unless they are overlaid). And I also would recommend either putting it in a modal or unmount the camera component before navigating away. (This is because of how react native navigation works because it will keep the component in the background and cause issues restarting the camera afterwards).

I'm pretty disappointed that this is an issue with the package because I built it to be super minimal so that you could style it any way you wanted.

[ScreamZ]

@humphreyja Already a wonderful answer, thanks for your job and I totally get to your point, I'm like you, not a native dev too😅.
I'll be pleased to help, this is nice to see that the owner answer, I was ready to give up as this gets complicated, but I'll give it another try with a full-screen attempt.

Maybe you could suggest to me some library to help with manual cropping? I tried https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper as it gives the ability to correct what the detector did wrong, but it's kind of buggy too…

[humphreyja]

@ScreamZ Let me know how the full screen attempt goes!

Manual cropping has been something I've wanted to add to this package for so long haha. That's also why I wanted to handle the rectangle overlay in javascript, its just a natural next step to add javascript side cropping. I made an attempt at exposing the cropping/transforming functions as a callable function in javascript but ran into some weird rotation and orientation issues (this is the most confusing part of the package). I've heard no one having great success with using the image cropper package above as it is just the crop/transform functions from that same person's scanner package which has flaws (and why I built this).

So long story short, I don't think there is a great solution out there for this which is super unfortunate because this is a major use case. If I had some free time to put towards this package that would probably be the first this I would work on.

[ScreamZ]

@humphreyja Alright, i can confirm that full screen fixes the issues!

I'm stacking some changes that I will make into a PR for the documentation at least. I'll also try some cropping capabilities, I'll keep u in touch, if you have some hints for me where I can look to, could be nice :-)