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 - MediaDevices.getUserMedia()
MediaDevices.getUserMedia is a browser API that allows web apps to access user's camera and microphone. Read more on MDN.
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 - Tesseract.js
Tesseract.js was used for OCR (Optical Character Recognition). It is a javascript version of the Tesseract Open Source OCR Engine.
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.