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
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.
This demo requires getUserMedia and WebGL. It should work (as for 03.2014) on Chrome, Firefox and
Opera. Both desktop and mobile.
This demo is open source, and is hosted on GitHub.
Feel free to fork it, report issues and share your ideas for improvements.