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

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

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

  • Ком­пью­тер или ноут­бук с веб-камерой;
  • интер­нет;
  • зна­ние 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-код

    
language: 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="https://thecode.media/wp-content/uploads/2020/02/script.js" defer></script>

 

  </body>

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

Файл style.css

    
language: 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-код как отдель­ные фай­лы, обно­ви­те стра­ни­цу и нажми­те «Вклю­чить веб-камеру». Ско­рее все­го, бра­у­зер спро­сит у вас, мож­но ли полу­чить доступ к каме­ре — ответь­те, что мож­но:


Когда появит­ся такое окно — нажми­те «Раз­ре­шить».

Ино­гда вид­ны арте­фак­ты, но в целом — отлич­ный резуль­тат.

Размышления

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

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

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