API обнаружения формы был выпущен в течение некоторого времени, и его основная функция заключается в предоставлении интерфейса для обнаружения функций (включая обнаружение штрих-кода, лица и текста), который напрямую доступен для внешнего интерфейса. В этой статье мы кратко представим его и дадим общее объяснение фронтального обнаружения лиц. (В этой статье не говорится об алгоритме ~ надеюсь, что постучу)
1 Фон и сцена
Обнаружение лиц является общей темой и широко используется во многих отраслях, таких как финансы, безопасность, электронная коммерция, смартфоны, развлекательные изображения и другие отрасли. Используемые технологии также постоянно развиваются. Вот несколько идей:
А. Распознавание лиц на основе признаков
Например, в opencv есть встроенный классификатор Harr, основанный на фреймворке обнаружения целей Виолы-Джонса (на самом деле, большинство классификаторов основаны на обучении), вам нужно только загрузить соответствующий файл конфигурации (haarcascade_frontalface_alt.xml), чтобы напрямую вызвать метод detectObject. Завершить процесс обнаружения, а также поддерживать обнаружение других признаков (например, носа, рта и т. д.).
Б. Обнаружение лиц на основе обучения на самом деле является более точным и быстродействующим классификатором, полученным путем классификации, подсчета и регрессии локальных признаков на изображениях, извлеченных операторами.
2 Обычный сбор
2.1 Бэкенд-обработка
Front-end передает ресурсы на back-end по сети, а back-end единообразно обрабатывает детектируемый поток изображения или видео, что ставит определенные задачи перед архитектурой back-end. часто не может предоставить пользователям интерактивные эффекты в реальном времени.
2.2 Обработка клиентов
Благодаря кросс-языковым и кросс-платформенным преимуществам OpenCV клиент также может предоставлять возможности обнаружения лиц при меньших затратах на разработку и может предоставлять услуги веб-контейнеру через JsBridge и другие методы, но как только он будет отделен от этого контейнера. , изолированные страницы потеряют эту возможность. до одного дня……
2.3 Открытые услуги
Я не знаю, когда это началось, появились такие понятия, как облачные вычисления, и стоимость вычислений снижается день ото дня. Крупные научно-исследовательские группы (такие как Alibaba Cloud, Face++) стремятся запустить службы распознавания лиц и даже добавить различные специальные функции! особый! Одежда! работай! , распознавание лиц, распознавание живых тел, распознавание документов и сравнение лиц и т. д.
Хотя он не только предоставляет SDK на стороне клиента, а также внешний и внутренний API, я должен рассказать о своем чисто внешнем решении.
3 Что принесла эпоха
Что ж, распознавание лиц все еще находится в древней эпохе подсечно-огневого выращивания на переднем крае, однако строительство нашей инфраструктуры уже началось, и мы надеемся, что некоторые последующие введения могут вдохновить вас.
3.1 Shape Detection API
С постепенным улучшением вычислительной мощности клиентского оборудования все больше и больше разрешений получают на уровне браузера.Поскольку обработка изображений требует много вычислительных ресурсов, фактически браузер также может взять на себя часть работы по обнаружению изображений. Вне API обнаружения формы.
В следующих простых примерах представлены основы использования. Прежде чем пытаться редактировать и запускать эти коды, убедитесь, что эта новая функция активирована в вашей версии Chrome, а API ограничен политикой того же происхождения:
chrome://flags/#enable-experimental-web-platform-features
Обнаружение штрих-кода: Обнаружение штрих-кода (для Chrome 56+)
var barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(image)
.then(barcodes => {
barcodes.forEach(barcode => console.log(barcodes.rawValue))
})
.catch(err => console.error(err));Распознавание лиц: Распознавание лиц (для Chrome 56+)
var faceDetector = new FaceDetector();
faceDetector.detect(image)
.then(faces => faces.forEach(face => console.log(face)))
.catch(err => console.error(err));Обнаружение текста: Обнаружение текста (для Chrome 58+)
var textDetector = new TextDetector();
textDetector.detect(image)
.then(boundingBoxes => {
for(let box of boundingBoxes) {
speechSynthesis.speak(new SpeechSynthesisUtterance(box.rawValue));
}
})
.catch(err => console.error(err));
3.2 Распознавание лиц на изображениях
Обнаружение лица на изображении относительно просто: вам нужно только передать элемент изображения, и вы можете напрямую вызвать API для распознавания лиц. Затем ловите холст, и мы можем отобразить результаты обнаружения.
Основной код:
var image = document.querySelector('#image');
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext("2d");
var scale = 1;
image.onload = function () {
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
scale = canvas.width / image.width;
};
function detect() {
if (window.FaceDetector == undefined) {
console.error('Face Detection not supported');
return;
}
var faceDetector = new FaceDetector();
console.time('detect');
return faceDetector.detect(image)
.then(faces => {
console.log(faces) // Draw the faces on the <canvas>.
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
for (var i = 0; i < faces.length; i++) {
var item = faces[i].boundingBox;
ctx.rect(Math.floor(item.x * scale), Math.floor(item.y * scale), Math.floor(item.width * scale), Math.floor(item.height * scale));
ctx.stroke();
}
console.timeEnd('detect');
})
.catch((e) => console.error("Boo, Face Detection failed: " + e));
}Эффект обработки:
3.3 Распознавание лиц в видео
Распознавание лица на видео мало чем отличается от изображения, черезgetUserMediaВы можете включить камеру, чтобы получить информацию о видео/микрофоне, а также обнаружить и отобразить видеокадр, чтобы обеспечить распознавание лиц в видео.
Основной код выглядит следующим образом:
navigator.mediaDevices.getUserMedia({
video: true, // audio: true
})
.then(function (mediaStream) {
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function (e) {
// Do something with the video here.
};
})
.catch(function (error) {
console.log(error.name);
});
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0);
image.src = canvas.toDataURL('image/png');
image.onload = function() {
detect();
}
}, 60);Эффект обработки:
3.4 Возвращение во времена, когда не было API
На самом деле, довольно много решений существовало давным-давно. Из-за аппаратных условий и отсутствия аппаратного ускорения он не получил широкого распространения.
a. tracking.js
tracking.js — это библиотека для обработки изображений, инкапсулированная в js, которая предоставляет браузеру множество алгоритмов и технологий, связанных с компьютерным зрением. Она может реализовывать такие функции, как отслеживание цвета и обнаружение лиц. Особенности:
b. jquery.facedetection
jquery.facedetection — это плагин для обнаружения лиц jquery/zepto, основанный на классификаторах изображений и детекторах в ccv с мощными кросс-терминальными возможностями.
3.5 Node.js & OpenCV
Модуль node-opencv был выпущен несколько лет назад, и хотя он не полностью совместим с v3.x, а предоставляемый API относительно ограничен, он полностью совместим с opencv v2.4.x. Появление N-API может принести больше сюрпризов.
Представьте, что в контейнере Electron или Node-Webkit мы можем реализовать распознавание лиц в реальном времени, открыв службу веб-сокетов локально? Код идеи реализации выглядит следующим образом:
Логика серверной обработки
import cv from 'opencv';
const detectConfigFile = './node_modules/opencv/data/haarcascade_frontalface_alt2.xml';// camera propertiesconst camWidth = 320;const camHeight = 240;const camFps = 10;const camInterval = 1000 / camFps;// face detection propertiesconst rectColor = [0, 255, 0];const rectThickness = 2;// initialize cameraconst camera = new cv.VideoCapture(0);
camera.setWidth(camWidth);
camera.setHeight(camHeight);
const frameHandler = (err, im) => {
return new Promise((resolve, reject) => {
if (err) {
return reject(err);
}
im.detectObject(detectConfigFile, {}, (error, faces) => {
if (error) {
return reject(error);
}
let face;
for (let i = 0; i < faces.length; i++) {
face = faces[i];
im.rectangle([face.x, face.y], [face.width, face.height], rectColor, rectThickness);
}
return resolve(im);
});
});
};
module.exports = function (socket) {
const frameSocketHanlder = (err, im) => {
return frameHandler(err, im)
.then((img) => {
socket.emit('frame', {
buffer: img.toBuffer(),
});
});
};
const handler = () => {
camera.read(frameSocketHanlder);
};
setInterval(handler, camInterval);
};Внешний интерфейс вызова
socket.on('frame', function (data) {
var unit8Arr = new Uint8Array(data.buffer);
var str = String.fromCharCode.apply(null, unit8Arr);
var base64String = btoa(str);
img.onload = function () {
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
}
img.src = 'data:image/png;base64,' + base64String;
});4.1 Будущее развитие
Нет сомнений, что эти передовые технологии будут более широко использоваться и поддерживаться во внешнем интерфейсе.В будущем изображение также будет следовать традиционному методу обработки изображений -> обучение + метод обработки изображений во внешнем интерфейсе. заслуга неотделима. Постепенные усовершенствования и усовершенствования инфраструктуры (аппаратного обеспечения, браузеров, инструментов, библиотек и т. д.), включая, помимо прочего:
getUserMedia/Canvas => операция с изображением/видео
API обнаружения формы => Обнаружение изображения
Веб-воркеры => Возможности параллельных вычислений
ConvNetJS => Фреймворк глубокого обучения
Tensorflow (ранее DeeplearnJS) => сильно поддерживает JS
4.2 На самом деле не так оптимистично
4.2.1 Точность
Скорость распознавания лиц, находящихся спереди, по-прежнему относительно высока, но при наличии препятствий на боковых сторонах эффект обнаружения неидеален.
4.2.2 Скорость обработки
Например 2.2 детектирования лица на изображении занимает 300мс+ (по факту не может соответствовать обработке в реальном времени видео большого разрешения), что в три раза превышает скорость детектирования вызова Opencv 100мс.
4.2.3 Особенности
Есть еще много областей, которые необходимо улучшить: например, он не поддерживает услуги, предоставляемые основными поставщиками услуг, такие как статус очков, пол, оценка возраста, распознавание выражения лица, этническая принадлежность, улыбка и обнаружение размытия.
4.3 Хочу сказать, но не могу закончить
А. Исходный код всех примеров в этой статье, добро пожаловать в Fork/Star:
https://github.com/x-cold/face-detection-browser
https://github.com/x-cold/face-detection-nodejs
Б. Нет поддержки данных для адаптивности обнаружения лиц в различных сценариях и времени, затрачиваемом на обнаружение.Позже мы рассмотрим возможность введения образцов, предоставленных PASCAL VOC и AT&T для мелкомасштабного тестирования.
5 ссылок
1. Краткое описание технологии распознавания лиц (1): Обнаружение и выравнивание лиц: http://blog.jobbole.com/85783/
2. Технология аутентификации реальных людей в предотвращении и контроле прямых трансляций Alibaba: https://xianzhi.aliyun.com/forum/mobile/read/635.html.
3. Что может фронтенд в эпоху искусственного интеллекта? : https://yq.aliyun.com/articles/153198
4. Глубокое обучение ConvNetJS в вашем браузере: http://cs.stanford.edu/people/karpathy/convnetjs/
5. Обнаружение лица с помощью API обнаружения формы: https://paul.kinlan.me/face-detection/