Находим лицо на видео

Здесь вы можете видеть демонстрацию поиска лица человека на видео. Для того, чтобы увидеть, как будет найдено лицо, нажмите кнопку "найти". Для повторного запуска видео, еще раз нажмите эту же кнопку. Обратите внимание - лицо очень энергичного молодого человека на видео весьма неравномерно освещено: слева тень. Попробуйте нажимать кнопку в разные моменты времени циклического видео. Ранее, была опубликована статья и демонстрация поиска лица на статической картинке. Посмотреть можно здесь. Для нахождения лица на видео используется тот же самый скрипт. Автор разработки: jaysalvat. Такой скрипт имеет множество различных направлений применения. Начиная от тривиального определения присутствия человека на изображении и заканчивая идентификацией людей, попавших в поле зрения видео-камеры. Так, можно включать камеру наблюдения за улицей на запись, если распознано движение человека на улице. Или, можно камеру наблюдения поворачивать, отслеживая маршрут движения человека. Можно устанавливать фокус, ориентируясь на положения лица в кадре. Или можно автоматически затирать лицо, после того, как удалось его обнаружить на видео. Еще, к примеру, поиск лиц на видео может понадобиться для того, чтобы посчитать число людей, проходящих по улице мимо магазина или зашедших внутрь магазина. Можно, например, использовать для подсчета числа людей в большой толпе, например, на стадионе или на митинге. Спектр применения очень разнообразен. Часто такие алгоритмы распознавания используются в СКУД - системах контроля доступа.

Скрипт нельзя назвать совершенным - он ошибается на видео со сложным освещением и на видео с помехами. Но, ведь и человек тоже может ошибаться. А теперь про установку на вашем сайте. Для начала понадобится файл стиля (выделение лица на видео):

 .video-container {
 position: relative;
 width: 260px;
 height: auto;
 margin: 10px auto;
 border: 10px solid #fff;
 box-shadow: 0px 0px 5px 5px #5D586A;
 }
 .video {
 display: block;
 width: 100%;
 height: auto;
 }

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

Дальше на странице следует разместить контейнер в котором будет отображаться видео:
<div class="video-container"> <video id="video" class="video" loop="" autoplay=""> <source src="/filevideo/video.mp4" type="video/mp4"> <source src="/filevideo/video.ogv" type="video/ogg"> <source src="/filevideo/video.webm" type="video/webm"> </video> </div> Также надо разместить кнопку вызова детектирования:

< a id="try-it" href="#">найти <⁄a>

Следующий шаг - подключение скриптов:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="/demo/face/jquery.facedetection.js"></script> Затем скрипт управления:

 $(function () {
 "use strict";
 
 $('#try-it').click(function (e) {
 e.preventDefault();

 $('.face').remove();

 if ($('#video')[0].paused) {
 $('#video')[0].play();
 return;
 } else {
 $('#video')[0].pause();
 }

 $('#video').faceDetection({
 interval: 1,
 complete: function (faces) {
 console.log(faces);
 
 for (var i = 0; i < faces.length; i++) {
 $('
', {
 'class':'face',
 'css': {
 'position': 'absolute',
 'left': faces[i].x + 'px',
 'top': faces[i].y + 'px',
 'width': faces[i].width + 'px',
 'height': faces[i].height + 'px'
 }
 })
 .insertAfter(this);
 }
 },
 error:function (code, message) {
 alert('Error: ' + message);
 }
 });
 });
 });

Ну и конечно же придется скачать и загрузить на ваш сайт файлы: facedetection.js и файлы видео: video.mp4, video.ogv и video.webm.