eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.44k stars 1.45k forks source link

How can you reduce the FPS for `<video>`? #219

Open notalentgeek opened 7 years ago

notalentgeek commented 7 years ago

I tried this code to set FPS to 10. However, I initially thought that these codes reduce the FPS of the video stream, in fact it sets the FPS of the face detection. The video is still running at full speed. I want to make the video slower in same manner like Motion JPEG. Is this possible?

var fps, fpsInterval, startTime, now, then, elapsed;
tracking.trackVideo_ = function(element, tracker) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width;
  var height;

  var resizeCanvas_ = function() {
    width = element.offsetWidth;
    height = element.offsetHeight;
    canvas.width = width;
    canvas.height = height;
  };
  resizeCanvas_();
  element.addEventListener('resize', resizeCanvas_);

  var requestId;
  var requestAnimationFrame_ = function() {
    requestId = window.requestAnimationFrame(function() {
      now = Date.now();
      elapsed = now - then;
      if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        if (element.readyState === element.HAVE_ENOUGH_DATA) {
          try {
            // Firefox v~30.0 gets confused with the video readyState firing an
            // erroneous HAVE_ENOUGH_DATA just before HAVE_CURRENT_DATA state,
            // hence keep trying to read it until resolved.
            context.drawImage(element, 0, 0, width, height);
          } catch (err) {}
          tracking.trackCanvasInternal_(canvas, tracker);
        }
      }
      requestAnimationFrame_();
    });
  };