Обнаружение и распознавание лиц H5, Web, NodeJS на основе TensorFlowJS

использоватьVueдемонстрация каркасного строительства,H5,Web,NodeJSРеализовать обнаружение и распознавание лиц на основеTensorFlowJSосуществленныйface-api.jsбиблиотека распознавания лиц.

Сначала, в 2018 году, был проект с использованием распознавания лиц, я тогда искал информацию о веб-браузерах на Baidu.JavaScriptЕсть несколько способов реализовать распознавание лиц, многие из них используют百度AIРеализован интерфейс распознавания лиц. тогдаPythonНаиболее популярен искусственный интеллект, многие из которых включают в себя распознавание лиц, анализ и обработку данных.GitHubУстановлено, что распознавание лиц и машинное зрение основаны наOpenCVЧтобы обработать снимок, я обнаружил, чтоNodeJSОбработка распознавания изображений называетсяopencv4nodejsИдентификационная библиотека , также найденная в репозитории автораface-api.jsЭто библиотека распознавания лиц. использоватьTensorFlowJSБиблиотека машинного обучения выполняет обучение модели и повышает точность функции распознавания, она хорошо себя чувствует и имеет сильные функции.

Установите зависимую библиотеку и поместите файл модели вpublic\modelsВ каталоге npm в основном устанавливает следующее:

npm i --save face-api.js
npm i --save webrtc-adapter

Описание демонстрационного проекта

пример ссылкиface-api.jsАвтор предоставляет пример исходного кодаexamples-browser.

Включенные функции:

обнаружение ориентиров лица
распознавание выражения лица
Распознавание возраста и пола
извлечение лица
распознавание лица
Обработка нескольких изображений с распознаванием лиц
Сходство изображений BBT
Поиск сходства изображений BBT
Распознавание лица ББТ
Видео отслеживание лица
Видео распознавание лиц
WebRTC-отслеживание лица
WebRTC-распознавание лиц
Основы потоковой передачи мультимедиа WebRTC

Скомпилируйте и выполните среду:

NodeJS:v12.13.0
Леса Vue:@vue/cli@4.3.1
вид:^2.6.11
лицо-api.js:^0.22.2
webrtc-адаптер:^7.5.1

Структура демонстрационного проекта

face-api-demo-vue
┌─public                  应用引用静态资源的目录
├─src
│ ├─components            复用组件目录
│ ├─router                页面路由配置文件目录
│ ├─utils                 常用函数工具文件目录
│ ├─views                 页面视图文件目录
│ ├─App.vue               配置App全局应用页面
│ └─main.js               Vue初始化入口文件
├─babel.config.js         Babel格式规范化配置
├─package-lock.json       依赖版本校验信息
├─package.json            项目依赖包、编译配置
└─README.md               项目说明

разное

Импортируйте модель перед использованием

console.log(faceapi.nets);
// ageGenderNet
// faceExpressionNet
// faceLandmark68Net
// faceLandmark68TinyNet
// faceRecognitionNet
// ssdMobilenetv1
// tinyFaceDetector
// tinyYolov2
// 放在public/models内
// 通过url地址访问
// await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
// 本地路径
// await faceapi.nets.ssdMobilenetv1.loadFromDisk("../../public/models");

распознавание лиц

detectAllFaces: обнаружить все лица на изображении.
detectSingleFace : Обнаруживает лицо на изображении с наивысшей оценкой достоверности.

по умолчанию,detectAllFacesа такжеdetectSingleFaceиспользоватьSSD Mobilenet V1детектор лица.

Вы можете указать детектор лиц, передав соответствующий объект параметров:

const detections1 = await faceapi.detectAllFaces(输入, 使用的模型参数)
const detections2 = await faceapi.detectSingleFace(输入, 使用的模型参数)

ввод: использоватьHTMLImageElement | HTMLVideoElement | HTMLCanvasElementТипы

Используемые параметры модели: Настройте распознавание и измените поле лица, см.识别库说明или查阅文档.

Определить библиотечные инструменты

// 请求json格式文件数据
const json = await faceapi.fetchJson("http://www.example.com/file/example.json");

// 从Blob/File对象创建HTMLImageElement
const imgEl = await faceapi.bufferToImage(imgFile);

// 从图像或视频元素创建画布元素
const canvas = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement)

Отслеживание кадров лица с помощью OpenCVJS

Машинное зрение OpenCV.js, только обнаружение и рисование рамки лица, точность распознавания модели не высока.

предоставленный код

face-api-demo Сборка браузера

Версия 0.13.8 содержит dist/documentation/models/examples и запускается экспресс-сервис.