Face recognition with eye, mouth, ears.. in Javascript

Question

I was wondering and searching for information about face recognition using Canvas, and specifically how to detect the parts of a face.

Let's say I take a picture from my webcam, and then I want to detect the eyes, mouth, nose and ears to split them into different images.

What would be the process for doing this ?

Answer 1

What i did recently trying to solve same problem (face and eyes detection) was:

1. Scale down processed image to achieve decent performance (I downscaled everything to 320px width)

2. Detect face in image using Core Computer Vision Library - https://github.com/liuliu/ccv

3. Based on the detected face rectangle information detect eyes using HAAR object detector (it has cascade for eyes only detection - https://github.com/inspirit/jsfeat

For step 2 i also used "grayscale" and "equalize_histogram" from JSFEAT library.

Also if step 3 fails you can try to guess eyes position (depends on how high accuracy you're going for).

This workflow gave me satisfying results and performance. It tested it both on desktop (~500ms on iMac) and mobile devices (~3000ms on iphone 4 using image from webcam). Unfortunately I cannot post a link to working example at this point, but i'll post a link to github once i have something there.

Answer 2

You can use HTML5's getUserMedia and also headtrackr.js to achieve what you are looking for. Also, then you can detect objects, get access to user media and many more things. Hope this is what you are looking for.