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.