Замена и размытие фона

Библиотека ml5.js предоставляет удобные высокоуровневые интерфейсы для работы с машинным обучением в браузере, включая обработку видео и изображений. Одной из популярных задач является выделение объекта на видео и изменение фонового изображения либо его размытие. Для этих целей используется модель BodyPix, которая способна выполнять сегментацию человеческого тела в реальном времени.

Подключение ml5.js и BodyPix

Для работы с ml5.js требуется подключение библиотеки через CDN или локальный файл:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.12.2/ml5.min.js"></script>

После этого создается объект камеры через p5.js:

let video;
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
}

Инициализация BodyPix

Модель BodyPix предоставляет метод ml5.bodyPix(), возвращающий объект с функциями сегментации:

let bodypix;
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();

  bodypix = ml5.bodyPix(video, modelReady);
}

function modelReady() {
  console.log('BodyPix модель загружена');
}

После загрузки модели можно выполнять сегментацию видео в реальном времени.

Получение маски человека

BodyPix возвращает маску объекта с прозрачным или бинарным изображением. Простейший способ получить маску человека:

function draw() {
  image(video, 0, 0, width, height);

  bodypix.segmentWithParts(video, gotResults);
}

function gotResults(error, result) {
  if (error) {
    console.error(error);
    return;
  }

  let maskImage = result.backgroundMask; // маска фона
  image(maskImage, 0, 0, width, height);
}

Ключевой момент: backgroundMask — это изображение, где фон становится прозрачным, а человек остаётся видимым.

Замена фона на изображение

Для замены фона на статическое изображение создается объект изображения с помощью p5.js, а затем маска применяется для наложения:

let bgImage;

function preload() {
  bgImage = loadImage('background.jpg'); // любое изображение фона
}

function gotResults(error, result) {
  if (error) return;

  let mask = result.backgroundMask;

  // Сначала отрисовываем фон
  image(bgImage, 0, 0, width, height);

  // Затем накладываем сегментированного человека
  mask.loadPixels();
  video.loadPixels();
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let index = (x + y * width) * 4;
      let alpha = mask.pixels[index + 3];
      if (alpha > 0) {
        video.pixels[index] = video.pixels[index];
        video.pixels[index + 1] = video.pixels[index + 1];
        video.pixels[index + 2] = video.pixels[index + 2];
        video.pixels[index + 3] = 255;
      } else {
        video.pixels[index + 3] = 0;
      }
    }
  }
  video.updatePixels();
  image(video, 0, 0, width, height);
}

Важный момент: для корректного наложения нужно использовать альфа-канал маски.

Размытие фона

Для создания эффекта размытия можно использовать фильтры p5.js вместе с маской:

function gotResults(error, result) {
  if (error) return;

  let mask = result.backgroundMask;

  let bg = createImage(width, height);
  bg.copy(video, 0, 0, width, height, 0, 0, width, height);
  bg.filter(BLUR, 8); // размытие фона

  image(bg, 0, 0); // отображаем размытый фон
  image(mask, 0, 0); // накладываем маску человека
}

Этот подход позволяет размывать фон, сохраняя четкость объекта в центре сцены.

Настройка качества сегментации

BodyPix поддерживает несколько параметров для улучшения точности и производительности:

let options = {
  outputStride: 16,  // 8,16,32 – чем меньше, тем выше точность
  segmentationThreshold: 0.5 // порог для бинарной маски
};

bodypix.segment(video, options, gotResults);
  • outputStride влияет на скорость и детализацию.
  • segmentationThreshold регулирует чувствительность алгоритма к краям объекта.

Примеры применения

  • Видеозвонки с заменой или размытием фона.
  • Интерактивные приложения с фильтрами для фото и видео.
  • Игровые приложения, где персонаж вырезается из фона и помещается в виртуальную среду.

Оптимизация производительности

Для реального времени необходимо:

  1. Использовать меньшее разрешение видео, например 320×240.
  2. Применять outputStride = 16 или выше для ускорения сегментации.
  3. Использовать requestAnimationFrame вместо draw() для динамического обновления кадров.

Такой подход обеспечивает плавное отображение и уменьшает нагрузку на браузер при обработке видео.

Использование ml5.js и BodyPix позволяет создавать высокоэффективные решения для сегментации человека, замены фона и размытия, оставаясь полностью на стороне клиента, без серверной обработки. Это открывает широкие возможности для интерактивных приложений и веб-анимаций.

Оглавление