2

I am new in reactjs and I have a task in hand. I need to be build and application which is capable to scan a mykad(Malaysian ID card) through camera. Details like name, address, image can be extracted. I googled a bit about open source tesseract but it is not giving me the right information and also some of the informations are misspelled. If anyone can guide me in the right direction.

Eventually I will develop a PWA and deploy in mobiles as well

user1295308
  • 425
  • 7
  • 20
  • I used to do this as my FYP project, used tesseract as OCR feature as well. I actually converted the image into black and white and it seems to help me to extract the info more accurately. – Tommy Leong Apr 22 '20 at 05:41
  • can you help me with some links .. i tried this https://github.com/stacksapien/react-tesseract-ocr https://www.npmjs.com/package/react-tesseract-ocr – user1295308 Apr 22 '20 at 05:55
  • Definitely a bad idea using a library which published 2 years ago for a production website (my assumption you have plan to go live). I developed previously on C# which Im fortunate enough to get the SDK for C#, for your case maybe this library will be better. https://github.com/naptha/tesseract.js#tesseractjs – Tommy Leong Apr 22 '20 at 06:09

1 Answers1

1

If you're looking for a free solution, Tesseract.js is your way to go: https://tesseract.projectnaptha.com

You need to be aware that reading data from MyKads will not only require OCR component, but also specifying semantics for the document. Meaning, you'll need to tell tesseract where the name is, where the address is, etc.

Also, tesseract will not be able to detect the document on the image. For this you'll need to use a different tool.

Disclaimer: I'm working at Microblink where we develop commercial OCR products, including one for reading data from IDs. For PWAs we have an JavaScript / TypeScript component which uses WASM to process the IDs. It supports not only MyKads but more than 500 document types in the world.

Github link: https://github.com/BlinkID/blinkid-in-browser

Cerovec
  • 1,273
  • 10
  • 19
  • thanks for this.. really helpful.. but when you mention we need to tell tesseract where the name is and where the address is... how we do it programatically.. i am using https://github.com/stacksapien/react-tesseract-ocr with minor modification of adding a rectangle size to do the ocr for that portion... – user1295308 Apr 22 '20 at 06:53
  • That's a good approach. Just be sure to take into account all variations of ID documents, people have long names, and addresses on MyKads are especially hard to get with the rectangles. Best of luck! – Cerovec Apr 22 '20 at 07:00
  • can you tell me how we tell tesseract where the name is and where the address is programatically as you mentioned – user1295308 Apr 22 '20 at 08:50
  • can you let me know the pricing for BlinkID... in the website i could not find it properly – user1295308 Apr 22 '20 at 10:58
  • For setting fields programatically. As a first step you need to detect the location of the document on the image. Then, based on relative positions of name, address, nric, etc, you define where these regions on the image are. Then you need to crop and dewarp (put into perspective) these fields. Then you're ready to use tesseract. Other than that, I don't know if tesseract allows you to automate some of this stuff. For pricing, you can contact our team at https://microblink.com/contact-us – Cerovec Apr 23 '20 at 06:46
  • Hi @DarkKnight. Thanks for the questions. I think this fall out of the scope of this specific SO question. Please open a new one, or, even better, contact us directly at support@microblink.com. – Cerovec May 10 '20 at 06:56
  • @Cerovec Pls check this https://stackoverflow.com/questions/61744858/microblink-sdk-take-only-the-photo-which-is-inside-rectangle – Dark Knight May 12 '20 at 06:04
  • Hi @DarkKnight, the team just updated the answer there. – Cerovec May 15 '20 at 09:27