HeadTrackr дизайн сайта с использованием веб-камеры

Всем привет, сегодня я хотел-бы написать о достаточно интересном применении веб камеры при просмотре сайта.  Если  пользователь не сможет прочитать текст на вашем сайте издалека, то можно использовать данную библиотеку для распознавания лиц и создать дизайн, который будет подстраиваться под пользователя в зависимости от его отдаленности от монитора. В этом и помогает HeadTrackr, это уже готовая библиотека которая в режиме реального времени отслеживает положение головы и удаленности её от экрана компьютера.  Пример всего этого можно посмотреть вот тут. Безусловно, данная библиотека нуждается в большой доработке, но с появлением более совершенных веб-камер и естественно улучшением самой функии надеюсь она будет иметь полное право на жизнь 🙂

Ниже я напишу краткий мануал по установке данного скрипта.

Для начала скачиваем саму библиотеку и кладём её в какую-нибудь папку на сайте, пусть это будет www.site.ru/js/файлы скрипта 

а вставляем в head вашего сайта следующий код:

<script src="js/headtrackr.js"></script>
<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasInput = document.getElementById('inputCanvas');
  
  var htracker = new headtrackr.Tracker();
  htracker.init(videoInput, canvasInput);
  htracker.start();
</script>

После входа на сайт вас должно предупредить о включении веб-ки и библиотека примется за работу.

Всем удачи и не забываем подписаться на  на страницу Вконтакте и rss ленту моего блога!

Оставить комментарий