Разное
★ Рубрика: Разное
★ Тема: Видео, Javascript

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

Здесь вы можете видеть демонстрацию поиска лица человека на видео. Для того, чтобы увидеть, как будет найдено лицо, нажмите кнопку "найти". Для повторного запуска видео, еще раз нажмите эту же кнопку. Обратите внимание - лицо очень энергичного молодого человека на видео весьма неравномерно освещено: слева тень. Попробуйте нажимать кнопку в разные моменты времени циклического видео. Ранее, была опубликована статья и демонстрация поиска лица на статической картинке. Посмотреть можно здесь. Для нахождения лица на видео используется тот же самый скрипт. Автор разработки: 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;
 }
Дальше на странице следует разместить контейнер в котором будет отображаться видео:
Также надо разместить кнопку вызова детектирования:
< a id="try-it" href="#">найти <⁄a>
Следующий шаг - подключение скриптов:
Затем скрипт управления:
 $(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.
 Похожие публикации: Видео, Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]