Question

我正在使用tracking js进行面部检测。我成功检测到了脸部，但我不知道如何捕获图像帧并将其保存到数据库中。我想使用 Mysql 作为数据库。 至少，我想知道如何捕获面部检测到的帧并将其发送到服务器，以便我可以将其保存到db 。这是我的HTML页面：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - face with camera</title>

  <script src="../tracking.js-master/build/tracking-min.js" type="text/javascript"></script>
  <script src="../tracking.js-master/build/data/face-min.js"></script>

  <link rel="stylesheet" type="text/css" href="face.css">

</head>
<body>

  <div class="demo-frame">
        <video id="video" class="face-video" width="740" height="560" preload autoplay loop muted></video>
        <canvas id="canvas" class="face-canvas" width="740" height="560"></canvas>
  </div>
  <script src="faceDetection.js" type="text/javascript"></script>

</body>
</html>

这是我的javascript faceDetection.js ：

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(6);
  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 = '#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);
    });
  });
};

在跟踪js中进行面部检测后，在按键上捕获图像并将图像保存到数据库

0 个答案: