Детекция в реальном времени

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

Подключение библиотеки и создание среды

Для работы с детекцией в реальном времени необходимо подключить ml5.js и обеспечить доступ к видеопотоку. Наиболее распространенный способ — использование HTML-элемента <video> и API navigator.mediaDevices.getUserMedia.

let video;
let detector;

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

    detector = ml5.objectDetector('cocossd', modelReady);
}

function modelReady() {
    console.log('Модель загружена и готова к детекции');
    detectObjects();
}

Ключевой момент: ml5.objectDetector создаёт экземпляр детектора объектов, который работает с предобученными моделями, такими как COCO-SSD, обеспечивая баланс между скоростью и точностью.

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

Функция детекции вызывается рекурсивно, чтобы обеспечить постоянное обновление данных с видеопотока:

function detectObjects() {
    detector.detect(video, (err, results) => {
        if (err) {
            console.error(err);
            return;
        }
        drawDetections(results);
        detectObjects();
    });
}

function drawDetections(objects) {
    image(video, 0, 0);

    for (let i = 0; i < objects.length; i++) {
        let object = objects[i];
        stroke(0, 255, 0);
        strokeWeight(2);
        noFill();
        rect(object.x, object.y, object.width, object.height);
        noStroke();
        fill(0, 255, 0);
        textSize(16);
        text(`${object.label} ${nf(object.confidence * 100, 2, 1)}%`, object.x + 5, object.y + 20);
    }
}

Особенности работы:

  • detector.detect(video, callback) принимает HTML-элемент <video> или p5.Image и возвращает массив объектов с координатами (x, y, width, height), меткой (label) и уверенностью модели (confidence).
  • Постоянный вызов detectObjects() создаёт бесконечный цикл, обеспечивающий обновление результатов при каждом кадре видеопотока.

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

Для плавной работы детекции важно учитывать следующие аспекты:

  1. Размер видеопотока: уменьшение ширины и высоты видео ускоряет обработку. Например, вместо 640x480 можно использовать 320x240.

  2. Частота вызова детекции: можно добавлять задержку между вызовами detect, чтобы снизить нагрузку на процессор:

    setTimeout(() => detectObjects(), 100); // каждые 100 мс

  3. Отображение только нужной информации: визуализация только крупных объектов или объектов с уверенностью выше порога 0.5 уменьшает количество лишних операций.

Работа с различными моделями

Помимо COCO-SSD, ml5.js поддерживает:

  • YOLO для детекции в реальном времени с большей точностью, но более высокой нагрузкой.
  • FaceApi для распознавания лиц и выражений.
  • PoseNet для анализа поз человека и отслеживания суставов.

Пример использования PoseNet для захвата координат ключевых точек:

let poseNet;
let poses = [];

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

function modelLoaded() {
    console.log('PoseNet готов');
}

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.5) {
                fill(255, 0, 0);
                noStroke();
                ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
            }
        }
    }
}

Особенность: каждая ключевая точка (keypoint) имеет координаты и вероятность точности. Можно использовать их для построения скелетной модели человека или детекции движения.

Обработка результатов и интеграция

  • Фильтрация объектов: можно выводить только объекты определённого класса, например, person или cat.
  • Событийная логика: детекция объектов может запускать события, например, воспроизведение звука при появлении конкретного объекта.
  • Интеграция с другими библиотеками: результаты ml5.js легко передавать в библиотеки визуализации, такие как p5.js или Three.js, для наложения графики в реальном времени.

Советы по стабильности

  • Проверка наличия камеры и корректная обработка ошибок getUserMedia предотвращает зависания.
  • Использование video.hide() позволяет управлять отображением через p5.js без лишнего DOM-рендеринга.
  • Очистка canvas перед каждой отрисовкой предотвращает наложение старых кадров.

Расширенные возможности

  • Комбинация моделей: детекция объектов и распознавание поз могут работать параллельно для сложных интерактивных приложений.
  • Обучение пользовательских моделей: ml5.js поддерживает transfer learning на основе изображений пользователя, что позволяет создавать кастомные детекторы с минимальным количеством данных.
  • Сохранение и экспорт результатов: координаты детектируемых объектов можно сохранять для последующего анализа или записи видеопотока с наложением.
Оглавление