Eye Detection using javascript and html5

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.


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


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