HTML5 javascript image recognition on mobile

Question

I am starting a new project where i need to have image recognition in a browser application that runs on desktop browsers, iOS and Android. The images should be scanned by using either the webcam or the device camere. So i assume using HTML5 with javascript is the way to go. The only problem is that i cannot find a decent library for this. I did find libraries that compare images by pixelarrays, and libs that can do face tracking and stuff, but none that suits my needs at first sight.

Anyone know how i can best approach this problem?

Thank you.

Answer 1

You will first need to find a solution on how to import your local pictures into a canvas element on your website. Either you upload them to the server first, or (if you want to use live pictures from webcams), you could use this jQuery plugin: http://www.xarg.org/project/jquery-webcam-plugin/ It uses some Flash, but as far as I know, there's no other way to get webcam pictures into the browser easily.

From canvas element you can read the pictures into pixel arrays and then use existing libraries (maybe transcode them into javascript) to do whatever you like.

Answer 2

There is another more recent (without JQuery) Library available to stream webcam content into canvas.

http://cbrandolino.github.io/camvas/

In HTML5 you can definitely do it through JavaScript with a bit of browser detection, here are some useful links:

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 3

This little javascript project used google images to recognize the content of the image: https://github.com/xc0d3rz/npm-imagerecognition

Probably could be helpful to solve part of your problem.