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.

Dagnydago

You're telling me that code does eye extraction? That's incredible – Walter

No hes telling this code does RGB to YCbCr convertion – Lightweight

I don't recommend to do such a task client-side. Client-side scripts are ideal to make the interface more usable, not for heavy image manipulations. – Tritium

how about the code up.. is there any way to make the scope chain less? – Dagnydago

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.

Topside

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

Ametropia

This library is very nice but quite resource hungry. Do you know any other which is just for the purpose of eye and face tracking it delivers a better performance? – Writhe

See my just updated github.com/mtschirs/js-objectdetect#performance performance comparison for fast eye detection libraries. For pure eye tracking, stay with tracker.js though or adapt the camshift algorithm found in github.com/auduno/headtrackr. – Fitzger

Answer 3

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

Mouldon

Answer 4

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

Stegman

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.

Caudle

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

Deron