WebApp capture photo or scan for OCR

Targets Web
1

I only found older (3+ years) posts regarding this topic, and I’m assessing the current state-of-the-art Web 2.0 approach.

I’m upgrading a WebApp that has a requirement to:

  • Scan (or photograph) an I.D. Card.
  • Perform OCR to scrape the text-based information into useable (String) data.
  • Store the Scan (or photograph) of the I.D. Card.

Storing the Scan isn’t difficult. However, finding an ‘easy’ way to initially capture the image seems like a challenge. It’s way too cumbersome to have a user jump from a WebApp to a “local OS” app, perform a scan, and then bounce back to the WebApp to click thru a series of steps to find, and upload the file from the OS.

Some thoughts came to mind to make this more user-friendly…

  1. The WebApp displays a QR-code, the user reads it with a Mobile Phone (Xojo App), which proceeds to capture image and upload to the backend system, then pick back up in WebApp where the info is magically united.
  2. Use webcam to capture the scan directly into WebApp (does that exist? and if so, cross-platform and across all modern browsers?)

Thanks to anyone who took the time to read this, and for any thoughts - no matter how creative.

2

GraffitiCamera for web?

I was able to open my camera in my Safari browser and take a photo:

Screenshot 2025-02-06 at 9.57.56 am
Screenshot 2025-02-06 at 9.57.56 am1490×2270 365 KB

1 Like
3

I would try to make a websdk control to use some free javascript library who can use the computer webcam.
but if you have graffiti licence it will be the fastest !
may be @Anthony_G_Cyphers will tell us which approved secret library he uses for graffiticamera ? :wink:

4

I don’t use a JavaScript library from another developer for GraffitiCamera. It’s 100% in-house using the built-in browser APIs.

2 Likes
5

How difficult or feasible is it to ‘capture’ a photo and OCR the content?