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.
Step #1 - MediaDevices.getUserMedia()
MediaDevices.getUserMedia is a browser API that allows web apps to access user's camera and microphone. Read more onMDN.
Step #2 - glfx.js, JCrop
glfx.js was used for image effects (sharpening, contrast, etc.). Cropping functionality (with touch support) is provided by jQuery pluginJcrop.
Step #3 - Tesseract.js
Tesseract.js was used for OCR (Optical Character Recognition). It is a javascript version of theTesseract Open Source OCR Engine.
More…
I've made two short videos about this project:one that describes how this was built andthe other one that demonstrates how it works. Hopefully, the source code is also quite readable.
Support
This demo requiresgetUserMedia andWebGL. 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 onGitHub. Feel free to fork it, report issues and share your ideas for improvements.