WebOCR — Camera Text Extraction

Image for post
Image for post

WebOCR is a minimalistic app for devices with a camera. Recognize and copy text from photos made on your mobile device or any other device with camera access.

Demo: https://nevolin.be/webocr/

Image for post
Image for post
Image for post
Image for post
  1. visit the app (on pc or phone)
  2. allow camera access
  3. aim at some text and click the button
  4. wait a few seconds for the image to be processed
  5. the detected text will be shown below

note: none of the video/photo content is stored, everything is processed in-memory and removed immediately after processing for privacy reasons.

The OCR system does a pretty good job, especially with numbers and special characters. However it’s definitely not perfect and can produce inaccuracies. This solution uses TesseractJS as underlying OCR system.

https://github.com/healzer/WebOCR

Optical Character Recognition (OCR) is a pretty important technology but not many junior developers know about it. It’s an intelligent system and should be used a lot more in daily business. Its learning curve is very low and can easily be integrated into business pipelines.

The idea behind WebOCR is to have some tool to quickly extract text from a picture taken with a phone, in my opinion it should be a default app that comes with Android/iOS devices.

The accuracy of the system is not always 100% but comes very close, and is very convenient for extracting URLs, phones, addresses, serial codes, etc.

It’s pure JavaScript/jQuery/HTML on the front-end, nothing fancy. And NodeJS for the back-end with Express and TesseractJS as additional libraries.

You can deploy it yourself in a matter of seconds. My app runs on a basic $5 digitalocean cloud app.

There are two ways to carry out OCR: client-side and server-side (default).

Client-side OCR runs in the browser, it is much slower but could be tweaked using more workers. For these configurations you should consult TesseractJS’s API docs. To enable client-side OCR use the function localProcessImg() instead of serverProcessImg() inside /public/main.js.

Written by

Become a rockstar programmer and try to reach genius status on codr https://nevolin.be/codr/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store