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

JavaScript

предисловие

Канун Нового года, давайте что-нибудь интересное

Недавно я пытался сделать видео своими руками через Интернет, как зафиксировать поведение видео и добавить в видео некоторые забавные вещи, например, добавить бороду в видео?

Проверьте последние игрушки ниже

live demo

Нажмите здесь, чтобы увидеть свои собственные результаты(Нужно разрешить камеру!! Служба недавно была закрыта, и я не вижу эффекта~)

Эффект

Эффект примерно такой: Просто добавьте бороду на лицо видео (у меня на мобильнике есть пленка против синего света, вы, ребята, посмотрите ее)

идеи

Прежде всего, я сделал видео, которое динамически рисует бороды, поэтому я должен сначала поддержать видео.

Видео поддержки

Код здесь очень простой, создайте новыйhtml, напишите предыдущийvideoЭтикетка

navigator.getUserMedia =
	navigator.getUserMedia ||
	navigator.webkitGetUserMedia ||
	navigator.mozGetUserMedia

if (navigator.getUserMedia) {
	navigator.getUserMedia(
		{ video: { width: 500, height: 500 } },
		function (stream) {
			var video = document.querySelector('video')
			video.srcObject = stream
			video.onloadedmetadata = function (e) {
				video.play()
			}
		},
		function (err) {
			console.log('The following error occurred: ' + err.name)
		}
	)
} else {
	console.log('getUserMedia not supported')
}

Запишите это видео, чтобы воспроизвести

Затем мы помещаем это видео вcanvasвнутри,

В общем, пора собиратьvideoсодержание, тоdrawImageприбытьcanvasДостаточно

    setInterval(() => {
      v.drawImage(video, 0, 0, 500, 375)
	  vData = v.getImageData(0, 0, 500, 375)    
    }, 20)

Здесь содержимое на холсте начинает двигаться.

Ниже приведен необходимый важный контент

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

Что я хочу сделать, так это распознавать лица, как мне распознать все это?

  1. Позвольте мне реализовать один на месте (его не существует, хотя я изучаю машинное обучение, но я выучил всего несколько дней, этого далеко недостаточно)
  2. Найдите открытый исходный код (бинго, это вы)

Отслеживание распознавания лиц с открытым исходным кодом

Потом я нашел этотtrackingjs

Я посмотрел на эффект, очень хороший, хотя он немного медленный, но он удовлетворяет нашей функции.

face(image)-demo face(camera)-demo

Хорошо, тогда запусти демо локально и попробуй

...потом прошло 5 минут

Подождите, кажется, что это признание не может быть признаноcameraСодержание(cameraтолько поддержкаface,не поддерживаетсяmouth,eye,noseуровень)

mdzz

ps: Если просто добавить что-то типа шапки, то достаточно использовать эту библиотеку

В течение следующих нескольких дней я в основном застрял в этой ссылке, и в течение нескольких дней у меня не было хороших идей.

Пока однажды я не увидел эту реализацию, когда небрежно почистилface-detection-node-opencv

Эй, она также добилась распознавания лиц, кажется, этого человека больше нетtrackingjsизcontributorЯ видел его внутри, а потом она его использовала.opencv, помните, что в этом годуd2Несколько гостей на главной площадке конференции также поделилисьarСубъект также реализуется сервером (т.canvasизgetImageDataПосле этого данные отправляются на бэкенд, а бэкенд обрабатывает результат и потом возвращает результат) В то время я думал, что эффективность будет очень плохой (в плане передачи изображения), но на деле, похоже что эффект в порядке

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

Узел распознает opencv

тогда см.opencvизnodeкакое хорошее осознание

тогда,node-opencv, это может распознать уровень лица, кажется маловато

найти снова

faced

йоууу, глаза и нос узнаются, это так хер, это просто ты

тогда иди прямоnodeПусть служба работает

Потом установка заняла 10 минутkoa2оказание услуг

Общая идея такова:

  1. передняя часть открытаvideo
  2. video => canvas => base64 => ArrayBuffer(Эта библиотека может распознавать только объекты изображения или ArrayBuffers)
  3. websocketФронтенд и бэкэнд коммуникация
  4. Бэкенд обрабатывает изображение и возвращаетface、mouthданные о местоположении на картинке
  5. Внешний рендеринг положения рта
  6. плюс усы

done

下面是 后端处理图片的时间，平均大概5ms，当做玩具的话，勉强够

start: 4.568ms
start: 3.881ms
start: 3.564ms
start: 3.690ms
start: 5.971ms
start: 4.069ms
start: 3.364ms
start: 5.054ms
start: 22.219ms
start: 5.586ms
start: 5.000ms

В локальном тесте все работает нормально, а вот при деплое на сервер все же есть некоторые проблемы

  1. Установка сервераopencvесть глубокие ямы
  2. video, только вhttpsследующее использование
  3. httpsвнизwebsocketнужно обновить доwss
  4. Доступ к статическим ресурсам снова столкнулся с проблемами, черт возьми

Поскольку это предварительная статья, я не буду открывать ее, чтобы говорить о проблемах развертывания.

Примерно так же

наконец

Может это последняя статья в году, может она написана более буднично, не знаю связен ли контекст (наблюдатели, простите)

Тогда окончательный результат выглядит так, как показано в начале статьи:

Нажмите здесь, чтобы увидеть свои собственные результаты(Необходимо разрешить камеру!!)

Для подробного кода:

Перед и зад все здесь:face-decorator

Справочные ссылки / рекомендуемое чтение

Категории