您可以使用

You could use getUserMedia api and use download attribute on <a> element. It's a bit tricky and it will not be available on all browsers:

首先在画布上绘制视频:

First draw the video on canvas:

tracker.on('track', function(event) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  event.data.forEach(function(rect) {
    context.strokeStyle = '#ff0000';
    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);
    context.drawImage(video, rect.x, rect.y, rect.width, rect.height, rect.x, rect.y, rect.width, rect.height);
  });
});

创建一种触发快照的方法:

Create a method to trigger the snapshot:

var snapshot = function() {
  if (localMediaStream) {
    document.querySelector('a').href = canvas.toDataURL('image/webp');
  }
}

video.addEventListener('click', snapshot, false);

保留对用户媒体的引用:

Keep a reference to user media:

navigator.getUserMedia({video: true}, function(stream) {
  localMediaStream = stream;
}, function(error){console.error(error)});

在此处中查看具有所有代码的粗略演示.单击视频，然后应保存图像(注意:使用最新的Chrome；您可能需要微调坐标；请确保在正确完成检测后单击快照).

See a rough demo with all the code in action here. Click on the video and a image should be saved (Note: Using latest Chrome; You may need to fine tune coordinates; Be sure to click snapshot after detection was done correctly).