单击视频以捕获跟踪js中的屏幕截图

Question

我将代码基于此SO post和documentation。我的意图是在检测到面部时提示用户单击，然后下载图像

window.onload = function () {
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var tracker = new tracking.ObjectTracker('face');
  tracker.setInitialScale(4);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);
  tracking.track('#video', tracker, {
    camera: true
  });
  tracker.on('track', function (event) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    event.data.forEach(function (rect) {
      context.strokeStyle = '#a64ceb';
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      context.font = '11px Helvetica';
      context.fillStyle = "#fff";
      context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);

    });
  });

  $("#video").on('click', function () {
    var snapshotContext = snapshotCanvas.getContext('2d');
    //draw image to canvas. scale to target dimensions
    snapshotContext.drawImage(video, 0, 0, video.width, video.height);

    //convert to desired file format
    var dataURI = snapshotCanvas.toDataURL('image/jpeg'); // can also use 'image/png'
    //This dataURI is what you would use to get the actual image
    console.log(dataURI);
  })
};

但是，这不起作用。我想念什么？