Подключаем нейросеть к веб-камере

Один про­грам­мист опуб­ли­ко­вал на Гит­ха­бе про­ект — ней­ро­сеть, кото­рая уби­ра­ет людей из видео с веб-камеры в реаль­ном вре­ме­ни. Мы хотим пока­зать, что каж­дый может повто­рить это в домаш­них усло­ви­ях. Вот как это рабо­та­ет в жизни:

Что нам понадобится

  • Ком­пью­тер или ноут­бук с веб-камерой;
  • интер­нет;
  • зна­ние HTML и CSS;
  • 10 минут сво­бод­но­го времени.

Как это работает

Прин­цип такой.

  1. Мы дела­ем HTML-страницу, где раз­ме­ща­ем все нуж­ные элементы.
  2. Ста­вим на стра­ни­цу кноп­ку, кото­рая будет вклю­чать веб-камеру.
  3. Когда мы нажи­ма­ем на неё, появ­ля­ют­ся два бло­ка с видео — исход­ный с каме­ры и обра­бо­тан­ный нейронкой.
  4. Обра­бо­тан­ное видео стро­ит­ся так: ней­ро­сеть смот­рит каж­дый кадр и пыта­ет­ся понять, есть ли там чело­век, его лицо, руки или ноги. Если есть — вме­сто них ста­вит кар­тин­ку с зад­не­го фона, кото­рая нику­да не двигается.
  5. Чем даль­ше от каме­ры и чем мед­лен­нее дви­га­ет­ся чело­век — тем луч­ше ней­рон­ка пони­ма­ет, что нахо­дит­ся в кад­ре, и на выхо­де полу­ча­ет­ся более реа­ли­стич­ная картинка.

Готовим HTML-страницу

Для нача­ла берём стан­дарт­ный шаб­лон из про­шлых про­ек­тов, меня­ем заго­ло­вок и под­клю­ча­ем таб­ли­цу стилей.

👉 Важ­но: в раз­де­ле <head> под­клю­ча­ем TensorFlow — биб­лио­те­ку для машин­но­го обу­че­ния. В нашем слу­чае эта биб­лио­те­ка реа­ли­зо­ва­на на JavaScript.

После это­го дела­ем заго­ло­вок и опи­са­ние про­ек­та, а ниже — раз­де­лы с кноп­кой вклю­че­ния каме­ры и видео. Что­бы у нас полу­чи­лось сра­зу два видео­по­то­ка (исход­ный и обра­бо­тан­ный), сде­ла­ем так: видео с каме­ры выве­дем в бло­ке <video>, а резуль­тат — в бло­ке <overlay>. Для это­го исполь­зу­ем Glitch-кнопку — спе­ци­аль­ный инстру­мент, кото­рый созда­ёт отдель­ный неза­ви­си­мый блок внут­ри стра­ни­цы. Имен­но в него мы отпра­вим резуль­тат рабо­ты нейросети.

Сам скрипт, кото­рый обра­ба­ты­ва­ет каж­дый кадр, встра­и­ва­ет­ся в самый конец HTML-файла вот таким кол­дун­ством: сна­ча­ла загру­жа­ем обу­чен­ную на людях модель рас­по­зна­ва­ния, а потом сам алго­ритм рас­по­зна­ва­ния, кото­рый будет опи­рать­ся на эту модель.

<!-- Загружаем нейросеть, обученную распознавать людей в кадре --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>     <!-- Подключаем скрипт, который будет обрабатывать видео --> <script src="https://thecode.media/wp-content/uploads/2020/02/script.js" defer></script>
Наша стра­ни­ца. То, что кноп­ка уеха­ла вниз, — это нормально. 
Готовый HTML-код

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Убираем движение в веб-камере</title>
  <!-- Подключаем таблицу стилей для оформления -->
  <link rel="stylesheet" href="style.css">
  <!-- Подключаем библиотеку TensorFlow.js -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
</head>

<body>
  <h1>Убираем движение в веб-камере</h1>
  <p>Чтобы всё работало как нужно, после запуска не входите в кадр несколько секунд и отойдите от камеры хотя бы на
    полтора-два метра.</p>
  <p>Иногда будут видны артефакты при движении в кадре, но это нормально — у нас просто демонстрация возможностей, а не
    полноценный инструмент. Но при желании вы вполне можете это исправить.</p>
  <!-- Раздел с веб-камерой -->
  <section id="demos">
    <!-- Делаем отдельный блок -->
    <div id="liveView" class="webcam">
      <!-- Рисуем кнопку -->
      <button id="webcamButton">Включить камеру</button>
      <!-- Показываем сначала исходное видео с камеры -->
      <video id="webcam" autoplay></video>
    </div>
  </section>
  <!-- Подключаем Glitch-кнопку — специальное окошко, куда можно сразу вывести результат работы нейросети -->
  <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
  <!-- Указываем путь к Glitсh-скрипту -->
  <script src="https://button.glitch.me/button.js"></script>
  <!-- Загружаем нейросеть, обученную распознавать людей в кадре -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
  <!-- Как всё будет готово — подключаем скрипт, который будет обрабатывать видео -->
  <script src="http://thecode.local/wp-content/uploads/2020/02/script.js" defer></script>
</body>

</html>

Подключаем стили

Здесь ниче­го слож­но­го нет: берём сти­ли исход­но­го про­ек­та и чистим их до тех пор, пока не оста­нет­ся дей­стви­тель­но нуж­ное — общие настрой­ки стра­ни­цы и пара­мет­ры внеш­не­го вида для видео.

Если вы про­пу­сти­ли, что такое CSS и как с ним рабо­тать — почи­тай­те нашу ста­тью. Если нет — про­сто сохра­ня­е­те код как .css-файл и кла­дё­те в ту же пап­ку, что и HTML-код.

Файл style.css

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  margin: 30px;
}
/* Ниже — служебные настройки для правильного отображения картинки с готовым видео*/
.webcam,
.classifyOnClick {
  position: relative;
  float: left;
  width: 48%;
  margin: 2% 1%;
  cursor: pointer;
}
.webcam p,
.classifyOnClick p {
  position: absolute;
  padding: 5px;
  background-color: rgba(255, 111, 0, 0.85);
  color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
}
.classifyOnClick {
  z-index: 0;
  position: relative;
}
.classifyOnClick canvas,
.webcam canvas.overlay {
  opacity: 1;
  top: 0;
  left: 0;
  z-index: 2;
}
#liveView {
  transform-origin: top left;
  transform: scale(1);
}

Запускаем

Сохра­ни­те HTML и CSS-код как отдель­ные фай­лы, обно­ви­те стра­ни­цу и нажми­те «Вклю­чить веб-камеру». Ско­рее все­го, бра­у­зер спро­сит у вас, мож­но ли полу­чить доступ к каме­ре — ответь­те, что можно:

Когда появит­ся такое окно — нажми­те «Раз­ре­шить».
Ино­гда вид­ны арте­фак­ты, но в целом — отлич­ный результат. 

Размышления

По сути мы взя­ли чужую раз­ра­бот­ку и внед­ри­ли её на свою стра­ни­цу. Так как раз­ра­бот­ка была с откры­той лицен­зи­ей, мы ниче­го не нару­ши­ли и нико­му не навредили.

В ком­мер­че­ском про­ек­те име­ло бы смысл тща­тель­но про­те­сти­ро­вать и дообу­чать ней­ро­ноч­ку, что­бы она дава­ла более пред­ска­зу­е­мый и полез­ный нам резуль­тат. Но всё рав­но мож­но было бы исполь­зо­вать чужие наработки.

Вооб­ще исполь­зо­вать чужое — хоро­шо, осо­бен­но если автор раз­ре­шил. Это осно­ва про­грес­са. Исполь­зуй­те чужое и дели­тесь своим.