Обнаружение близости лица с помощью JavaScript

Предположим, вы хотите, чтобы посетители вашего сайта сделали видеозапись или сфотографировали их лицо. Как вы можете объяснить им, как близко они должны сидеть перед камерой? Вы могли бы написать длинные инструкции, но вы знаете, что сегодня почти никто не читает инструкции. Вероятно, лучшим подходом к решению этой проблемы было бы использование алгоритма обнаружения лица, который может оценить, где лицо пропорционально кадру, и выяснить, находится ли лицо слишком далеко или слишком близко.

Моей команде разработчиков в Mozilla требовалась функция «видеостенд», где люди могли записывать свои разговоры в веб-камеру и загружать эти видео и делиться ими в веб-приложении. В подобных случаях проблемы с качеством обычно связаны с аудио. В идеале люди должны использовать микрофон приличного качества и сидеть в комнате с минимальным эхом, но часто это невозможно. Лучший способ решить эту проблему — убедиться, что пользователь сидит рядом со встроенным микрофоном своего ноутбука. Чтобы сделать это, мы реализовали распознавание лица в видоискателе, чтобы сказать им, достаточно ли они сидят рядом или нет.

В этой статье я покажу вам, как создать эту функциональность, и узнайте кое-что о задействованных компонентах.

Давайте заставим камеру работать

Потоковый API getUserMedia активно использовался во всех современных браузерах. API navigator.getUserMedia действительно работал только с хаки префиксами различных поставщиков. Новый потоковый API getUserMedia

Минимальный код, который нужно запустить, показан ниже:

 navigator.mediaDevices
   .getUserMedia({audio: false, video: true})
   .then(function(stream) {
       // OK
   })
   .catch(function(error) {
       // Error
   });

Тем не менее, MDN имеет отличный 8-слойный полифилл, который помогает вам поддерживать старые браузеры . После копирования наш код должен выглядеть следующим образом:

 navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
   getUserMedia: function(c) {
     return new Promise(function(y, n) {
       (navigator.mozGetUserMedia ||
        navigator.webkitGetUserMedia).call(navigator, c, y, n);
     });
   }
} : null);

// this is not part of the polyfill
if (!navigator.mediaDevices) {
  throw new Error('getUserMedia() not supported.');
}

navigator.mediaDevices
   .getUserMedia({audio: false, video: true})
   .then(function(stream) {
       // OK
   })
   .catch(function(error) {
       // Error
   });

Теперь, когда у вас есть объект MediaStreamstream Вы проецируете его на элемент videoURL.createObjectURL(blob) Мы добавим один из них и продолжим пример кода, где доступен объект stream

 function startCamera() {}
  return navigator.mediaDevices
    .getUserMedia({audio: false, video: true})
    .then(function(stream) {
      // assume you have a `` tag somewhere in the DOM
      var video = document.querySelector('video');
      video.src = URL.createObjectURL(stream);
      video.play();

      // return the stream so that chained promises can use it
      return stream;
    })
}  `тег где-то в DOM
       var video = document.querySelector ('video');
       video.src = URL.createObjectURL (stream);
       video.play ();

       // возвращаем поток, чтобы цепочечные обещания могли его использовать
       обратный поток;
     })
 } 

Прежде чем мы поиграем с нашим первым демо, давайте украсим его кнопкой, которая может запускать и останавливать камеру. Код не особенно важен. Однако стоит заметить, что мы можем использовать обещания, чтобы иметь возможность ссылаться, когда поток начался. Вот одна простая реализация:

 document.querySelector('button').onclick = function() {
  var button = this;
  button.textContent = 'Starting camera';

  // the function that wraps the getUserMedia call
  startCamera()
  .then(function() {
    button.textContent = 'Stop camera';
  });
}

Вы можете найти чуть более полный и функциональный пример здесь .

Один решающий трюк для видоискателя

Если вы играли с вышеприведенной демонстрацией, вы должны были видеть свое лицо анимированным в видоискателе. Но вы заметили, как тяжело было расположиться в середине? Это потому, что изображение в видоискателе не является вашим зеркальным отображением. Это фактическое видение твоего лица, так же, как тебя видят твои друзья. Если вы наклоните голову к левому уху, лицо в видоискателе будет отклоняться вправо. Это неловко, хотя и не должно быть. В конце концов, вы намереваетесь записать свое лицо, говорящее так, чтобы люди, которые не могут быть там лично, могли извлечь выгоду из возможности позже просмотреть его как видеоклип или изображение. Мы так редко видим свои собственные лица, записанные на видео, но мы часто видим свои собственные лица в зеркале.

Решение этой проблемы на удивление легко. Мы можем использовать CSS, чтобы отразить изображение видоискателя. На самом деле мы поворачиваем его на 180 градусов вокруг своей оси Y. Волшебство сделано с простым правилом transform

 video {
  transform: rotateY(180deg);
}

На CodePen вы можете найти первое улучшенное демо, которое также доступно ниже:

 // assuming you have a  tag somewhere in the DOM
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

function startCamera() {}
  return navigator.mediaDevices.getUserMedia({audio: false, video: true})
  .then(function(stream) {
    // same as before
    var video = document.querySelector('video');
    video.src = URL.createObjectURL(stream);
    video.play();

    // The critical point where we transfer some frames to
    // a canvas element.
    setInterval(function() {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
    }, 100);
  })
}   тег где-то в DOM
 var canvas = document.querySelector ('canvas');
 var context = canvas.getContext ('2d');

 function startCamera () {}
   возвращать navigator.mediaDevices.getUserMedia ({audio: false, video: true})
   .then (функция (поток) {
     // так же, как и раньше
     var video = document.querySelector ('video');
     video.src = URL.createObjectURL (stream);
     video.play ();

     // Критическая точка, в которую мы передаем некоторые кадры
     // элемент canvas.
     setInterval (function () {
       context.drawImage (video, 0, 0, canvas.width, canvas.height);
     }, 100);
   })
 } 

 canvas {
  display: none;
}

 // using global `ccv` from ccv.js and `cascade` from face.js
var faces = ccv.detect_objects({
  canvas: ccv.pre(canvas),
  cascade: cascade,
  interval: 2,
  min_neighbors: 1
});

 {
  confidence: 0.33769726999999994,
  height: 60.97621039495391,
  width: 60.97621039495391,
  neighbors: 1,
  x: 131.5317891890668,
  y: 66.0158945945334
}

 var percentages = [];
function rollingAverage(size) {
  percentages.splice(0, percentages.length - size);
  var sum = percentages.reduce(function(total, num) {
    return total + num
  }, 0);
  return sum / percentages.length;
}