Захват кадров и работа с потоком в реальном времени

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

Настройка видеопотока

Для захвата кадров используется объект p5.Video, интегрируемый с ml5.js. Создание видеопотока начинается с инициализации камеры:

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide();
}
  • createCapture(VIDEO) запускает веб-камеру и возвращает поток видео.
  • video.size(width, height) задаёт разрешение кадра.
  • video.hide() скрывает стандартный элемент <video>, оставляя управление выводом на канвас.

Обработка потоковых кадров

Для работы с каждым кадром в реальном времени используется цикл draw() библиотеки p5.js. Внутри цикла можно передавать кадры в модели ml5.js:

function draw() {
  image(video, 0, 0);
  classifier.classify(video, gotResult);
}
  • image(video, x, y) отрисовывает текущий кадр на канвасе.
  • classifier.classify(video, callback) выполняет классификацию текущего кадра и вызывает функцию обратного вызова с результатом.

Использование готовых моделей ml5.js

ml5.js поставляется с рядом предобученных моделей, подходящих для работы с видео в реальном времени:

  • ImageClassifier — классификация объектов на кадрах.
  • PoseNet — отслеживание скелета человека и поз.
  • ObjectDetector — детектирование объектов в кадре.
  • BodyPix — сегментация человека на изображении.

Пример создания классификатора с использованием MobileNet:

let classifier;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}

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

function classifyVideo() {
  classifier.classify(gotResult);
}

function gotResult(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  console.log(results[0].label, results[0].confidence);
  classifyVideo();
}
  • Метод ml5.imageClassifier(modelName, video, callback) связывает модель с видеопотоком.
  • Функция gotResult вызывается после каждой классификации, что позволяет создавать непрерывный анализ кадров.

Обработка данных в реальном времени

Ключевой момент работы с потоком — асинхронность. Каждый кадр передается модели отдельно, и обработка может занимать переменное время. Для стабильной работы следует использовать рекурсивный вызов классификации, как в примере выше, чтобы избежать наложения вызовов и потери кадров.

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

  • Размер видео: меньший размер кадра ускоряет обработку, но снижает точность модели.
  • Частота обновления: можно уменьшить частоту классификации, обрабатывая каждый N-й кадр.
  • Отслеживание изменений: для задач, таких как детекция движения, можно пропускать кадры, если изменений в сцене нет.

Детектирование объектов и поз

Для анализа видео с объектами и людьми используют модели PoseNet и ObjectDetector. Пример работы с PoseNet:

let poseNet;
let poses = [];

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on('pose', function(results) {
    poses = results;
  });
}

function draw() {
  image(video, 0, 0);
  drawKeypoints();
}

function drawKeypoints() {
  for (let i = 0; i < poses.length; i++) {
    let pose = poses[i].pose;
    for (let j = 0; j < pose.keypoints.length; j++) {
      let keypoint = pose.keypoints[j];
      if (keypoint.score > 0.2) {
        fill(255, 0, 0);
        noStroke();
        ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
      }
    }
  }
}
  • Событие 'pose' вызывается при каждом обнаружении позы.
  • keypoints содержит координаты суставов с вероятностью обнаружения, что позволяет визуализировать и использовать их для взаимодействий или управления интерфейсом.

Интеграция с другими библиотеками

ml5.js хорошо сочетается с другими средствами визуализации, такими как p5.js, для отрисовки графики поверх видеопотока, и Tone.js для генерации звука на основе данных с камеры. Такой подход позволяет создавать интерактивные мультимедийные приложения с мгновенной реакцией на движения и объекты.

Практические рекомендации

  • Всегда проверять доступность камеры через navigator.mediaDevices.getUserMedia.
  • Использовать video.hide() для контроля вывода кадра через канвас.
  • Для потоковой обработки больших моделей предусматривать обработку ошибок и оптимизацию частоты классификации.
  • Для мобильных устройств выбирать модели с меньшей нагрузкой для снижения энергопотребления и увеличения FPS.

Работа с потоком в реальном времени в ml5.js позволяет строить сложные интерактивные системы, сочетающие машинное обучение и мультимедийные интерфейсы, без необходимости серверной инфраструктуры. Такой подход делает браузер полноценной платформой для экспериментов с видеоанализом и компьютерным зрением.

Оглавление