Reconnaissance faciale en temps réel avec vidéo acquise par getUserMedia [HTML5, openCV]

politique

Tout d'abord, vous pouvez utiliser l'API HTML5 `` getUserMedia '' pour obtenir les images de votre caméra locale. Puisque la vidéo est réalisée en faisant avancer l'image fixe image par image, l'image peut être coupée à un moment spécifique et une reconnaissance faciale peut être appliquée à l'image. La reconnaissance faciale se fait côté serveur. L'image découpée côté local est encodée en base64 et envoyée au serveur par Ajax, et côté serveur, la base64 est décodée et entrée dans le reconnaissance de visage. Ensuite, le résultat est renvoyé côté client.

environnement

L'environnement peut être n'importe quoi. Ce qui suit est prouvé dans mon environnement.

• l'extrémité avant
• jquery --Serveur
• node v.6.2 --Reconnaissance de visage
  • python 2.7 --Série openCV 2

Reconnaissance de visage

Celui qui reçoit base64 et reconnaît le visage http://qiita.com/komakomako/items/91eb5bba927b23587ed4

l'extrémité avant

<header class="hero-unit" id="banner">
  <div class="container">
 <h1> Reconnaissance faciale </ 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;

 // Les coordonnées pour dessiner le résultat de la reconnaissance faciale dans un cadre carré
  var x = []

  var base64 = ''

 // Lancer la vidéo locale
  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;
    });
  }

 // Capture d'image de la caméra
  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>

serveur

Si vous atteignez le point de terminaison `` http: // localhost: 9000 / api / detect '' avec POST, il sera acheminé vers la fonction suivante.

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});
    }
  );

}