基于tracking.js的人脸识别

Question

在客户端(HTML)，使用摄像头检测人脸，并在中间件(Python)中对人脸图像进行处理，一旦处理完毕，人脸的相关名称就必须标记到摄像头检测到的人脸上。

使用tracking.js，我可以检测人脸，但无法在服务器端(Python)进行人脸识别。

如何将每个检测到的帧从tracking.js发送到服务器？

如何将中间件的响应(人名)标记到摄像头中检测到的面部？

我尝试使用webhooks，但无法将检测到的帧发送到服务器。

使用javascript，我尝试使用下面的代码脚本。

window.onload = function() {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var c=document.getElementById("image_canvas");
      var ctx=c.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 = '#FFFAF0';
          console.log(rect);
          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);
          ctx.clearRect(0, 0, 180, 180);
          ctx.drawImage(video, rect.x+50, rect.y-20, rect.width+160, rect.height+180, 0, 0, 180, 180);


         var http = new XMLHttpRequest();
         var url = "/createreg";
         var params = 'imageData:'+ctx;
         http.open("POST", url, true);
         http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

         http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
        }
         }
        http.send(params);

在python端的试图读取图像对象

@app.route('/createreg', methods=['POST'])
#@token_required
def createreg():
        print('-----3.1---',request.form['imageData'])  

无法从服务器(app.py) Pls读取图像对象，提示了前进的方向。

谢谢

Answer 1

我认为你已经做过的最困难的部分，就是在前面检测脸部。

一旦您得到它，这个api/framework tracking.js显然应该有一个类似于onFaceDetected或onImageCaptured的事件，您可以使用它们将捕获的脸发送到服务器。

可能在后面有一个web服务，它将接收图像(face)并对其进行处理并返回响应，并且图像将是一个数据结构，就像包含在base64中的图像的json一样。因此，为了实现您想要的结果，您需要在事件上以所需的格式(bytearray、base64等)获取图像，用它构建一个json，并使用ajax发送到webservice，获取结果并通过javascript更新ui。