Face recognition with Azure

by Maria Ines Parnisari

HTML

<script src="https://pixlcore.com/demos/webcamjs/webcam.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="my_camera"></div>
<form>
  <input type=button class="btn btn-primary" value="Take Snapshot" onClick="take_snapshot()">
</form>

<canvas id="viewport" width="320" height="240"></canvas>

<div>Your results will appear below:
  <pre id="results">
</pre>
</div>

CSS

#results {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

JavaScript

Webcam.set({
  width: 320,
  height: 240,
  image_format: 'jpeg',
  jpeg_quality: 90
});
Webcam.attach('#my_camera');

var canvas = document.getElementById('viewport'),
  context = canvas.getContext('2d');

function take_snapshot() {
  // take snapshot and get image data
  Webcam.snap(function(data_uri) {
    base_image = new Image();
    base_image.src = data_uri;
    base_image.onload = function() {
      context.drawImage(base_image, 0, 0, 320, 240);

      let data = canvas.toDataURL('image/jpeg');

      fetch(data)
        .then(res => res.blob())
        .then(blobData => {
          $.post({
              url: "https://westus.api.cognitive.microsoft.com/face/v1.0/detect",
              contentType: "application/octet-stream",
              headers: {
                'Ocp-Apim-Subscription-Key': '<YOUR-KEY-HERE>'
              },
              processData: false,
              data: blobData
            })
            .done(function(data) {
              $("#results").text(JSON.stringify(data));

            })
            .fail(function(err) {
              $("#results").text(JSON.stringify(err));
            })
        });
    }
  });
};