Question

我有来自this网站的代码，使用html，javascript和tracking.js.It捕获网络摄像头视频，检测面部并在html页面中显示。我需要捕获检测到面部的整个视频帧。我的HTML代码是

<div class="demo-frame">
 <div class="demo-container">
   <video id="video" width="320" height="240" preload autoplay loop muted></video>
   <canvas id="canvas" width="320" height="240"></canvas>
 </div>
</div>

我的脚本是

<script>

  var count = 0;
  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);
    });
    if (event.data.toString().length > 0) {
          //face detected.Now how to save the current video frame inside canvas tag as jpeg image and stop video capturing process?
        }
  });

</script>

我已经尝试了this问题，但它没有保存整个图像（有时没有保存）。如何将canvas标签内的视频帧保存为jpeg图像并停止视频捕获过程？

如何将canvas标签中的视频保存为jpeg图像？

0 个答案: