xiaozhi2 / webgazertutorial Goto Github PK

webgazer.showVideo(false);
webgazer.showPredictionPoints(true);
webgazer.showFaceOverlay(false);
webgazer.showFaceFeedbackBox(false);
var starttime = performance.now();
var eye_tracking_interval = setInterval(
 function() {
   var pos = webgazer.getCurrentPrediction();
   if (pos) {

     var relativePosX = pos.x/screen.width ;
     var relativePosY = pos.y/screen.height;
     eyeData.history.push({
      // 'x': pos.x,
     //  'y': pos.y,
       'relative-x': relativePosX,
       'relative-y': relativePosY,
       'elapse-time': performance.now() - starttime
     });
   }
 },20);

async function loop() {
  if (!paused) {

    // [20200617 XK] TODO: there is currently lag between the camera input and the face overlay. This behavior
    // is not seen in the facemesh demo. probably need to optimize async implementation. I think the issue lies
    // in the implementation of getPrediction().

    // Paint the latest video frame into the canvas which will be analyzed by WebGazer
    // [20180729 JT] Why do we need to do this? clmTracker does this itself _already_, which is just duplicating the work.
    // Is it because other trackers need a canvas instead of an img/video element?
    paintCurrentFrame(videoElementCanvas, videoElementCanvas.width, videoElementCanvas.height);

    // Get gaze prediction (ask clm to track; pass the data to the regressor; get back a prediction)
    latestGazeData = getPrediction();
    // Count time
    var elapsedTime = performance.now() - clockStart;


    // Draw face overlay
    if( src_webgazer.params.showFaceOverlay )
    {
      // Get tracker object
      var tracker = src_webgazer.getTracker();
      faceOverlay.getContext('2d').clearRect( 0, 0, videoElement.videoWidth, videoElement.videoHeight);
      tracker.drawFaceOverlay(faceOverlay.getContext('2d'), tracker.getPositions());
    }

    // Feedback box
    // Check that the eyes are inside of the validation box
    if( src_webgazer.params.showFaceFeedbackBox )
      checkEyesInValidationBox();

    latestGazeData = await latestGazeData;

    // [20200623 xk] callback to function passed into setGazeListener(fn)
    callback(latestGazeData, elapsedTime);

    if( latestGazeData ) {
      // [20200608 XK] Smoothing across the most recent 4 predictions, do we need this with Kalman filter?
      smoothingVals.push(latestGazeData);
      var x = 0;
      var y = 0;
      var len = smoothingVals.length;
      for (var d in smoothingVals.data) {
        x += smoothingVals.get(d).x;
        y += smoothingVals.get(d).y;
      }

      var pred = src_webgazer.util.bound({'x':x/len, 'y':y/len});

      if (src_webgazer.params.storingPoints) {
        drawCoordinates('blue',pred.x,pred.y); //draws the previous predictions
        //store the position of the past fifty occuring tracker preditions
        src_webgazer.storePoints(pred.x, pred.y, src_k);
        src_k++;
        if (src_k == 50) {
          src_k = 0;
        }
      }
      // GazeDot
      if (src_webgazer.params.showGazeDot) {
        gazeDot.style.display = 'block';
      }
      gazeDot.style.transform = 'translate3d(' + pred.x + 'px,' + pred.y + 'px,0)';
    } else {
      gazeDot.style.display = 'none';
    }

    requestAnimationFrame(loop);
  }
}