Отрисовка результатов поверх видеопотока

Для работы с видеопотоком в браузере используется стандартный объект p5.Video или встроенные средства getUserMedia. Библиотека ml5.js предоставляет удобный интерфейс для подключения моделей машинного обучения к видео в реальном времени.

Пример создания видеопотока с использованием p5.js:

let video;

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

Метод video.hide() предотвращает автоматическую отрисовку видеопотока на канвасе, чтобы контролировать визуализацию вручную.

Подключение и использование модели для распознавания

Для анализа видеопотока чаще всего используют предобученные модели ml5.js, такие как poseNet, faceApi, objectDetector и imageClassifier. Эти модели позволяют получать ключевые точки человека, идентифицировать объекты и классифицировать изображения в реальном времени.

Пример подключения poseNet:

let poseNet;
let poses = [];

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

    poseNet = ml5.poseNet(video, modelReady);
    poseNet.on('pose', function(results) {
        poses = results;
    });
}

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

Метод poseNet.on('pose', callback) подписывает функцию обратного вызова на события распознавания поз. Объект poses содержит массив всех найденных поз с ключевыми точками.

Отрисовка результатов поверх видеопотока

Отрисовка выполняется с использованием функций p5.js, позволяющих рисовать поверх канваса. Основные подходы включают:

  1. Рисование ключевых точек — точки суставов человека или лица.
  2. Соединение точек линиями — визуализация скелета.
  3. Отображение классификаций — текстовые подписи для распознанных объектов.

Пример отрисовки позы:

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

    drawKeypoints();
    drawSkeleton();
}

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

function drawSkeleton() {
    for (let i = 0; i < poses.length; i++) {
        let skeleton = poses[i].skeleton;
        for (let j = 0; j < skeleton.length; j++) {
            let partA = skeleton[j][0];
            let partB = skeleton[j][1];
            stroke(0, 255, 0);
            line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
        }
    }
}

Ключевые моменты:

  • image(video, 0, 0) рисует текущий кадр видеопотока на канвасе.
  • ellipse() используется для визуализации ключевых точек с проверкой score > 0.5, чтобы исключить маловероятные детекции.
  • line() соединяет пары точек, образуя скелет, который обновляется в реальном времени.

Оптимизация отрисовки

Для плавной работы необходимо учитывать несколько аспектов:

  • Сокращение частоты обновления: если модель слишком тяжёлая, можно вызывать poseNet через setInterval вместо draw() на каждом кадре.
  • Использование noLoop() и loop(): позволяет управлять циклом рендеринга, снижая нагрузку на GPU.
  • Кэширование результатов: хранение последних координат ключевых точек для сглаживания движения.

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

  1. Цветовая дифференциация участников: для нескольких людей можно назначать каждому уникальный цвет.
  2. Динамическая анимация: добавление эффектов при движении ключевых точек (например, изменение размера или прозрачности).
  3. Комбинация с другими моделями: распознавание объектов objectDetector поверх позы человека позволяет создавать интерактивные приложения с элементами дополненной реальности.

Взаимодействие с событиями

ml5.js предоставляет события для обработки детекции:

poseNet.on('pose', function(results) {
    poses = results;
    // можно добавить логику изменения цвета или анимации
});

Можно создавать сложные визуальные эффекты, реагирующие на определённые позы, например, поднятые руки или наклон головы. Используются условия на координаты ключевых точек для запуска анимации или изменения стиля визуализации.

Интеграция с пользовательским интерфейсом

Отрисованные результаты можно совмещать с элементами HTML и CSS. Для этого канвас p5.js может быть прозрачным (background(0, 0)), что позволяет накладывать данные на интерфейс:

function setup() {
    let cnv = createCanvas(640, 480);
    cnv.style('position', 'absolute');
    cnv.style('top', '0px');
    cnv.style('left', '0px');
}

Такой подход позволяет использовать ml5.js для интерактивных установок, AR-эффектов и образовательных проектов, где видеопоток является основой визуализации.

Оглавление