Классификация в реальном времени с веб-камеры

Для работы с 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/p5.js/1.6.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/0.12.2/ml5.min.js"></script>

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

Получение видеопотока с веб-камеры

Для классификации в реальном времени необходимо захватывать кадры с веб-камеры. В p5.js это реализуется с помощью объекта createCapture():

let video;

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.size(640, 480);
    video.hide(); // скрыть элемент видео, чтобы рисовать его на холсте через p5.js
}

Метод video.hide() позволяет избежать дублирования DOM-элемента и управлять отображением через canvas.

Инициализация модели классификации

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

let classifier;

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

    classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}

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

Передача объекта video при создании классификатора позволяет сразу использовать поток с камеры. Метод modelReady вызывается после полной загрузки модели.

Классификация кадров в реальном времени

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

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

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    console.log(results[0].label, results[0].confidence);
    classifyVideo(); // следующий кадр
}

Каждый результат содержит два ключевых значения:

  • label — название объекта, распознанного моделью.
  • confidence — вероятность распознавания (число от 0 до 1).

Визуализация результатов на холсте

Для удобного отображения данных можно отрисовывать видео и текст с результатами на canvas:

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

    if (classifier) {
        fill(255);
        stroke(0);
        strokeWeight(2);
        textSize(32);
        textAlign(CENTER, BOTTOM);
        text(results ? results[0].label : 'Загрузка...', width / 2, height - 20);
    }
}

В этом примере текст с названием распознанного объекта накладывается на видео. Использование textAlign и stroke делает надпись более читаемой.

Настройка чувствительности и фильтрация результатов

Для повышения стабильности классификации в реальном времени полезно учитывать порог уверенности:

const CONFIDENCE_THRESHOLD = 0.7;

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }

    if (results[0].confidence > CONFIDENCE_THRESHOLD) {
        console.log('Объект распознан:', results[0].label);
    }

    classifyVideo();
}

Этот подход предотвращает «мельтешение» неправильных ярлыков при низкой вероятности и делает вывод более надежным.

Расширение функциональности

ml5.js поддерживает работу с пользовательскими моделями через Teachable Machine. Это позволяет:

  • Загружать собственные модели для классификации нестандартных объектов.
  • Тренировать модели без серверной инфраструктуры.
  • Интегрировать модели с веб-приложениями в режиме реального времени.

Пример загрузки пользовательской модели:

const modelURL = 'https://teachablemachine.withgoogle.com/models/ВАША_МОДЕЛЬ/model.json';
classifier = ml5.imageClassifier(modelURL, video, modelReady);

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

Классификация в реальном времени требует ресурсов CPU/GPU браузера. Для оптимизации:

  • Уменьшать разрешение видео (video.size(320, 240)) при приемлемом качестве.
  • Ограничивать частоту классификации, например, через setInterval вместо непрерывного вызова.
  • Использовать предобученные модели с небольшим размером и малой вычислительной нагрузкой (MobileNet, DoodleNet).

Совместное использование с другими функциями

Сочетание классификации с визуализацией, звуковой обратной связью или взаимодействием с DOM позволяет создавать интерактивные приложения:

  • Объекты, распознанные моделью, могут управлять анимацией на canvas.
  • Звуковой сигнал при распознавании конкретного объекта.
  • Подсчет количества распознанных объектов в реальном времени.

Такой подход превращает простой классификатор в полноценную интерактивную систему машинного зрения на фронтенде.

Оглавление