Eye Detection using javascript and html5

Question

Does anyone have any ideas or steps or algorithms for performing Eye Detection on 2d images using javascript and HTML5?

I have already done converting RGB to YCbCr color space

Now I need some help on eye extraction

function hellow(e)
{
    var r,g,b,a,gray;
    var imageData = ctxBg.createImageData(gameWidth,gameHeight);
    var das =imageData.data;

    for(var i=0;i<=800;i++)
    {
        for(var j=0;j<=640;j++)
        {
            var d = (j*imageData.width+i)*4;
            var helow = ctxBg.getImageData(i,j,1,1);
            r=helow.data[0];
            g=helow.data[1];
            b=helow.data[2];
            a=helow.data[3];
            das[d]=Math.round((0.299 *r) - (0.168935*g) + (0.499813*b));
            das[d+1]=Math.round((0.587 *r) - (0.331665*g) + (0.418531*b));
            das[d+2]=Math.round((0.114 *r) - (0.50059*g) + (0.081282*b));
            das[d+3]=a;
            console.log(das[d]+":"+das[d+1]+":"+das[d+2]);
        }
    }
    ctxBg.putImageData(imageData,0,0);
    //console.log('c');
    e.preventDefault(); 
}

That's my code for converting the rgb to YCbCr color space.

Please help me also improve the code for faster execution.

Answer 1

What i did recently trying to solve same problem 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 tracking.js to detect eyes using various techniques from a real scene captured by the camera.

Once you import the script with the library and add the canvas to the HTML you can do something like:

var videoCamera = new tracking.VideoCamera().hide().render().renderVideoCanvas(),
    ctx = videoCamera.canvas.context;

videoCamera.track({
    type: 'human',
    data: 'eye',
    onFound: function(track) {
        for (var i = 0, len = track.length; i < len; i++) {
            var rect = track[i];
            ctx.strokeStyle = "rgb(0,255,0)";
            ctx.strokeRect(rect.x, rect.y, rect.size, rect.size);
        }
    }
});

The code above comes from one of the examples in the library. Hope that help you

Answer 3

I don't really know if something specifical is implemented only for eye detection, but for face detection you should look after a library named as Core Computer Vision Library, which is hosted on github: https://github.com/liuliu/ccv.

Another possibility would be https://github.com/inspirit/jsfeat, where face, and pixel edge detection is implemented using different algorithms, like Lucas-Kanade optical flow and HAAR object detector.

Please read this post for further techniques: Face detection javascript/html5/flash

Answer 4

I daresay that luminance only could be enough to detect eye / face position - so you can make your code faster by just dripping computation of CbCr. One usually looks for yeas / faces using Haar cascade:

http://en.wikipedia.org/wiki/Haar_wavelet

Answer 5

There is an example of eye detection (with custom eye haar openCV cascades) in pure javascript/html5 using the HAAR.js library (ps i am the author).

The project is stopped, no new features added, but it does what it states.

Answer 6

For eye detection use OpenCV.js , check this Human Eye Detection using Javascript and OpenCV

let faceCascadeFile = 'haarcascade_frontalface_default.xml';

let eyeCascadeFile = 'haarcascade_eye.xml';

utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {

    utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {

    console.log('eye cascade ready');

    })
})

Example