API-интерфейс для распознавания лиц на JavaScript

Разработчик Крис Бонгерс поделился в блоге на dev.to методом создания детектора лиц на JavaScript. 

В отличие от предыдущей разработки автора, сканера штрих-кода, интерфейс по распознаванию лиц еще не находится в общем доступе, но его можно включить в Chrome, установив соответствующий флаг. Для этого: 

• Введите в адресной строке браузера: chrome://flags;
• В открывшемся окне включите Experimental Web Platform features — #enable-experimental-web-platform-features.

Конечным результатом будет API-интерфейс для обнаружения лиц на картинке. 

Создание интерфейса распознавания лиц

• Чтобы создать API-интерфейс распознавания лиц выполните следующие команды:

const faceDetector = new FaceDetector();

// Pass options:
const faceDetector = new FaceDetector({
  maxDetectedFaces: 5,
  fastMode: false
});

#С помощью команды maxDetectedFaces можно устанавливать количество лиц для обнаружения. 

#Команда fasteMode определяет скорость распознавания. Если режим включен, лица обнаруживаются быстрее, но с меньшей точностью. 

• Далее вызываем функцию распознавания и передаем ей информацию об источнике, в нашем случае это будет картинка (image).

try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => doSomething(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

• Загружаем изображение.

<img
  src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80"
  crossorigin
  alt="Group of people"
/>

• С помощью кода ниже можно заставить функцию загрузки окна ждать, пока все компоненты загрузятся.

window.onload = () => {
  detect();
};

• Вызываем функцию обнаружения. Она будет асинхронной.

async function detect() {
  const image = document.querySelector('img');
  const faceDetector = new FaceDetector({fastMode: true});

  try {
    const faces = await faceDetector.detect(image);
    faces.forEach(face => {
      console.log(face);
    });
  } catch (e) {
    console.error('Face detection failed:', e);
  }
}

#Функция вызывает выбранное изображение и запускает детектор в быстром режиме. 

• Добавляем рамки поверх лиц, чтобы было видно, на что смотреть и оборачиваем изображение в относительный держатель (relative holder).

<div id="holder">
  <img
    src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80"
    crossorigin
    alt="Group of people"
  />
</div>

• Держатель будет относительным элементом, а изображение — абсолютно позиционированным.

img {
  position: absolute;
}
#holder {
  position: relative;
}

• При захвате лиц можно получить значения ширины, высоты, вершины и левого края каждой рамки.

const faces = await faceDetector.detect(image);
faces.forEach(face => {
  const {top, left, width, height} = face.boundingBox;
  const faceDiv = document.createElement('div');
  faceDiv.className = 'face';
  Object.assign(faceDiv.style, {
    width: `${width}px`,
    height: `${height}px`,
    left: `${left}px`,
    top: `${top}px`
  });
  holder.appendChild(faceDiv);
});

• Создаем div-элемент со свойством className face, устанавливаем для него стили и добавляем его в держатель div.

.face {
  position: absolute;
  border: 2px solid yellow;
}

Вот и все. Конечный результат автор разместил в онлайн-редакторе кода CodePen здесь.