Объект p5.VideoCapture и HTMLVideoElement

Создание видеопотока

Объект p5.VideoCapture представляет потоковое видео с камеры пользователя и является частью библиотеки p5.js. Он обеспечивает доступ к видеопотоку в реальном времени и позволяет интегрировать его с функциями машинного обучения в ml5.js. Создание видеопотока выполняется с помощью функции createCapture().

let video;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(640, 480);
  video.hide(); // скрывает стандартный HTML-элемент видео
}

Ключевые моменты при работе с p5.VideoCapture:

  • VIDEO как параметр функции createCapture() указывает на использование камеры.
  • Метод hide() нужен для того, чтобы работать с видеопотоком как с изображением на канвасе, а не как с HTML-элементом.
  • Размер потока устанавливается методом size(width, height); это важно для точного сопоставления входных данных с моделями ml5.js.

Использование HTMLVideoElement в контексте ml5.js

HTMLVideoElement является стандартным элементом HTML <video> и также может быть источником данных для моделей ml5.js. Использование напрямую позволяет работать с видеофайлами или потоками, не создавая объект p5.js, что полезно в случаях, когда требуется контроль над HTML и DOM.

const videoElement = document.createElement('video');
videoElement.src = 'video.mp4';
videoElement.autoplay = true;
videoElement.loop = true;
videoElement.width = 640;
videoElement.height = 480;
document.body.appendChild(videoElement);

Взаимодействие с ml5.js

Большинство моделей ml5.js (например, ml5.imageClassifier, ml5.poseNet, ml5.handpose) могут принимать как p5.VideoCapture, так и HTMLVideoElement в качестве источника изображений. Пример использования модели классификации:

let classifier;
let video;

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(); // постоянная классификация в цикле
}

Сравнение p5.VideoCapture и HTMLVideoElement

Свойство p5.VideoCapture HTMLVideoElement
Источник Камера Камера, видеофайл, поток
Интеграция с p5.js Полная Требует обертки через createCapture или loadPixels
Скрытие потока video.hide() CSS display:none или canvas
Совместимость с ml5.js Прямая Прямая, через DOM элемент
Управление размером video.size(w, h) video.width, video.height или CSS

Оптимизация потокового видео

При использовании видеопотока важно учитывать нагрузку на браузер:

  • Уменьшение разрешения потока снижает нагрузку на CPU/GPU и ускоряет обработку моделей.
  • frameRate(fps) позволяет управлять количеством кадров, обрабатываемых в секунду.
  • Использование метода video.loadPixels() позволяет работать с отдельными пикселями для кастомной обработки до подачи данных в ml5.js.
function draw() {
  video.loadPixels();
  image(video, 0, 0); // отображение на канвасе
}

Синхронизация с моделями ml5.js

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

  • Дождаться готовности видео (video.loadedmetadata или modelReady для моделей).
  • Обеспечить одинаковый размер входных данных и модели.
  • В цикле draw() или через рекурсивные функции поддерживать поток классификации или детекции.

Пример работы с HTMLVideoElement и ml5.js

const videoElement = document.createElement('video');
videoElement.src = 'video.mp4';
videoElement.autoplay = true;
videoElement.loop = true;
videoElement.width = 640;
videoElement.height = 480;
document.body.appendChild(videoElement);

const classifier = ml5.imageClassifier('MobileNet', videoElement, () => {
  console.log('Модель готова к работе с HTMLVideoElement');
});

function classifyVideo() {
  classifier.classify((err, results) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(results[0].label, results[0].confidence);
    requestAnimationFrame(classifyVideo); // рекурсивный вызов для непрерывной классификации
  });
}

videoElement.onp lay = classifyVideo;

Особенности обработки потокового видео

  • Поток из камеры (p5.VideoCapture) всегда актуален в реальном времени, поэтому задержка минимальна.
  • Поток из HTML <video> может иметь буферизацию, задержку или пропущенные кадры, что следует учитывать при детекции движения или поз.
  • Использование canvas для промежуточной визуализации позволяет комбинировать данные из разных источников видео.

Интеграция с другими функциями ml5.js

Объекты видео часто комбинируются с:

  • ml5.poseNet(video, modelReady) для отслеживания позы человека.
  • ml5.handpose(video, modelReady) для детекции кистей.
  • ml5.objectDetector('cocossd', video, modelReady) для распознавания объектов в кадре.

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

Оглавление