[PYTHON] Gesichtserkennung in Echtzeit mit von getUserMedia [HTML5, openCV] aufgenommenem Video

Politik

Zunächst können Sie die HTML5-API `` `getUserMedia``` verwenden, um das Filmmaterial von Ihrer lokalen Kamera abzurufen. Da das Video durch Vorwärtsbewegen des Standbilds Frame für Frame realisiert wird, ist es ausreichend, das Bild zu einem bestimmten Zeitpunkt auszuschneiden und eine Gesichtserkennung auf das Bild anzuwenden. Die Gesichtserkennung erfolgt auf der Serverseite. Das auf der lokalen Seite ausgeschnittene Bild wird base64-codiert und von Ajax an den Server gesendet. Auf der Serverseite wird das base64 decodiert und in die Gesichtserkennung eingegeben. Anschließend wird das Ergebnis an die Client-Seite zurückgegeben.

Umgebung

Die Umgebung kann alles sein. Folgendes ist in meiner Umgebung bewiesen.

• Vorderes Ende
• jquery --Server
• node v.6.2 --Gesichtserkennung
  • python 2.7 --openCV 2 Serie

Gesichtserkennung

Derjenige, der base64 empfängt und das Gesicht erkennt http://qiita.com/komakomako/items/91eb5bba927b23587ed4

Vorderes Ende

<header class="hero-unit" id="banner">
  <div class="container">
 <h1> Gesichtserkennung </ h1>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <br>
      <button class="btn btn-lg btn-success" onclick="startVideo()">Start</button>
      <br>
      <canvas style="display:true;" width="640" height="480"></canvas>
      <video id="local_video" width="640" height="480" autoplay style="display: true;"></video>

    </div>
  </form>
</div>

<script type="text/javascript">
  var localVideo  = document.getElementById('local_video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localStream = null;

 // Koordinaten zum Zeichnen der Gesichtserkennung ergeben einen quadratischen Rahmen
  var x = []

  var base64 = ''

 // Lokales Video starten
  function startVideo() {
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function (stream) { // success
      localStream = stream;
      localVideo.src  = window.URL.createObjectURL(localStream);
    }).catch(function (error) { // error
      console.error('mediaDevice.getUserMedia() error:', error);
      return;
    });
  }

 // Kamerabildaufnahme
  var capture = function() {
    if (localStream) {
      ctx.drawImage(localVideo, 0, 0);
      ctx.beginPath();
      ctx.rect(x[0], x[1], x[2], x[3]);
      ctx.stroke();
      base64 = canvas.toDataURL('image/webp');
    }
  }

 //認識
  var detect = function() {
    var request = {
      url: 'http://localhost:9000/api/detect',
      method: 'POST',
      data: {
        image: base64.replace(/^.*,/, '')
      }
    };
    $.ajax(request).done(function(data){
       console.log(data)
       if(data.face) {
         for(var i=0; i<data.face.split(' ').length; i++){
           x[i] = data.face.split(' ')[i] - 0 ;
         }
         console.log(data.face.split(' '));
       }
    });
  }

  setInterval("capture()",100);
  setInterval("detect()",500);

</script>

Server

Wenn Sie mit dem POST den Endpunkt `` `http: // localhost: 9000 / api / detect``` erreichen, wird er an die folgende Funktion weitergeleitet.

export function detect(req, res) {

  const exec = require('child_process').exec;
  exec('python /path/to/detect_base64.py "' + req.body.image + '"',
    function(err, stdout, stderr) {
      if (err) { console.log(err); }
      console.log(stdout);
      return res.status(201).json({"face": stdout});
    }
  );

}