Oops!

Take a good picture of a huge, printed text.

Crop the picture and adjust it so that text is clearly visible.

Brightness:

Contrast:

You'll find the recognized text below.

JavaScript OCR demo

Step #1 - getUserMedia

getUserMedia is a HTML5 API that allows web apps to access user's camera and microphone. Read more on HTML5 Rocks.

Step #2 - glfx.js, JCrop

glfx.js was used for image effects (sharpening, contrast, etc.). Cropping functionality (with touch support) is provided by jQuery plugin Jcrop.

Step #3 - ocrad.js

ocrad.js was used for OCR (Optical Character Recognition). It is a pure-javascript version of the Ocrad project.

More…

I've made two short videos about this project: one that describes how this was built and the other one that demonstrates how it works. Hopefully, the source code is also quite readable.

Support

This demo requires getUserMedia and WebGL. It should work (as for 03.2014) on Chrome, Firefox and Opera. Both desktop and mobile.

Source code

This demo is open source, and is hosted on GitHub. Feel free to fork it, report issues and share your ideas for improvements.

Social media