HTML5 OCR Technology

Watch the video below to see how it works!

What is OCR?

Optical Character Recognition is used to allow computers to read like humans do. For example, if you took a photo of a car number plate you (as a human) can read each letter and number. However all a computer sees is a load of pixels. OCR is used to educate a computer to recognize a bunch of pixels is in fact a letter.

Client Side Only, No Server Needed

This was part of my university Final Year Project back in June 2014. Before that date there was nothing like this out there on the web! Other scripts and application had to use a more native approach or send the photo off to be diagnosed by the server. My script allows for automatic detection of these letter, no need for manual input to tell the computer where a bunch of letters are and is purely performed on the client's device. By using just pure JavaScript and the new HTML5 Canvas features it is now possible to manipulate images like never before and this has proven the sheer power of the modern web.

If you haven't already, I strongly recommend you watch the video to understand more about how the project works.

Further Improvements

As this technology is still new I will continue to keep improving the framework made to ensure that the image detection is accurate and can provide great performance. A quick list of improvements include:

  • Allow the ability to support more fonts and letters
  • Remove the need for a "grid" on the camera
  • Ability to work in dimmer lighting conditions