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 bellow.

### 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

Tweet