Eyeplayer

Blink Detection

About this demonstration

This is an example of detecting a user blinking with a webcam.

It uses the following approach:

• the user's face position is determined using the headtrackr library
• from this the user's eyes region position is estimated (i.e. somewhere in the middle of the face.)
• we then use a blob motion detection technique based on the approach from the Flash HiSlope library.
• if there are two blobs of motion in the eye region that are placed on opposite sides of the region then we trigger a blink

View the eyePlayer.js source on Github to see how the code works.

Usage example

<div id="videoContainer">
  <video id="inputVideo" autoplay></video>
  <canvas id="overlay"></canvas>
</div>

<script data-main="javascripts/eyePlayer.min.js" src="javascripts/require.js"></script>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasOutput = document.getElementById('overlay');

  require(['eyePlayer'], function(eyePlayer) {
    eyeplayer = new eyePlayer();
    eyeplayer.init(videoInput, canvasOutput);
    eyeplayer.start();
  });

  document.addEventListener('blinkEvent', function() {
    /* DO SOMETHING FUN WHEN THE USER BLINKS */
  });
  document.addEventListener('eyeTrackedEvent', function(event) {
    /* DO SOMETHING FUN WHEN THE USER'S HEAD IS FOUND */
    console.log(event.face);
    console.log(event.eyes);
  });
</script>

View source of this page to see a more complete example.