Real-time face recognition with video acquired by getUserMedia [HTML5, openCV]

policy

First, you can use the HTML5 API `` `getUserMedia``` to get the footage from your local camera. Since the image is realized by advancing the still image frame by frame, the image may be cut out at a specific timing and face recognition may be applied to the image. Face recognition is done on the server side. The image cut out on the local side is base64 encoded and sent to the server with Ajax, and on the server side, base64 is decoded and input to the face recognizer. Then, the result is returned to the client side.

environment

The environment can be anything. The following are proven in my environment.

• front end
• jquery --Server
• node v.6.2 --Face recognition
  • python 2.7 --openCV 2 series

Face recognition

The one who receives base64 and recognizes the face http://qiita.com/komakomako/items/91eb5bba927b23587ed4

front end

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

 // Coordinates for drawing the face recognition result in a square frame
  var x = []

  var base64 = ''

 // Start local video
  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;
    });
  }

 // Camera image capture
  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

If you hit the endpoint http: // localhost: 9000 / api / detect with POST, it will be routed to the following function.

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

}