Scanner not effectively scanning compared to Blinkcard in-browser demo

[joelhoelting]

Hello,

The issue I am having is that my implementation of the in-browser scanner is not scanning efficiently compared to the demo here: https://demo.microblink.com/in-browser-sdk/blinkcard. The videoRecognizer instance is awaiting a scan, however the scan sometimes does not trigger. Other times the scanner requires 20-30 seconds before the scan is triggered.

I have the scanner working on a test URL: https://blinkcard.joelhoelting.com/
Github Code: https://github.com/joelhoelting/blinkcard-test-next

I followed all the directions directly from the documentation here (https://github.com/blinkcard/blinkcard-in-browser#installation)

Any assistance would be appreciated. Thank you for your library.

[vjekoart]

Hi @joelhoelting,

Thank you for the report with source code :)

What do you mean by "scan sometimes does not trigger". Do you mean that results are sometimes not returned, i.e. line handleScanResults(recognitionResult); in your source code is not executed? (taken from file components/CardScanner.tsx)

Also, I've noticed that you do not register any callbacks in function startScan in file components/CardScanner.tsx. It's worth noting that BlinkCardRecognizer needs to scan both sides of a credit card to extract all the required information. Therefore, it's necessary to register the onFirstSideResult callback, so the user knows when to flip the document.

You can see an example usage of that callback in this file.

Sincerely,
Vjekoslav

[joelhoelting]

Thanks so much for the response @vjekoart.

In my source, the code was not progressing past this line:

const processResult = await videoRecognizer.current.recognize();

Now that I have more of an understanding of how the API works, the reason for the long delay is probably because the videoRecognizer is waiting for both sides to be scanned. Can you confirm that this might be the case?

After adding the callbacks the scanning is happening as expected, with performance similar to the demo. So that's great news. It would probably be beneficial to add some language to the documentation about how both sides of the card need to be scanned and the callbacks that can be passed into recognizerRunner (if that language is in there then I apologize for missing it).

My use case only requires one side of the card to be scanned (just the side with the CC numbers, not the CVC code). You mentioned that BlinkCardRecognizer needs to scan both sides of the card, does the SDK have any "out of the box" options to scan a single side?

Thanks again for this great SDK,
Joel

[vjekoart]

@joelhoelting I'm glad the SDK is now working (almost) as expected.

Thank you for the suggestion regarding the documentation and scanning of both sides. We'll definitely improve that part in the documentation to make it more clear.

The BlinkCardRecognizer always has to scan both sides of a card. We've designed the recognizer that way since different cards have different layouts and different information on each side.

If you only need CC numbers, I suggest that you modify recognizer settings for your use case. For example, it's possible to disable the extraction of the CVV number.

The full list of available recognizer options can be found in this file. The example of how to change recognizer settings can be seen in the Recognizer settings section of the documentation.

Sincerely,
Vjekoslav

[yashikaraheja]

@joelhoelting the code you shared is not working for me, scanner just opened no video opened and then scanner closed automatically