Обнаружение различий между двумя видеокадрами, отображаемыми на холсте HTML5

Question

Я отображаю живой видеопоток на холсте HTML5, который отлично работает.

Теперь мне нужно проверить наличие 1003 * в камере, отображаемой на холсте HTML5.

Во время моего исследования я обнаружил, что это можно сделать, проверив предыдущий кадр с текущим, который отображается на холсте.

Итак, я попробовал этот код в функции setInterval:

  var c = document.querySelector('.mycanv');
  var ctx = c.getContext("2d");

  var imageData = ctx.getImageData(0, 0, 200, 200);
  var data = imageData.data.length;

  console.log(data);

Однако, когда я смотрю в консоль, Число , которое выводит переменная data, всегда одинаково, то есть 16000! и он не изменится, даже если перед камерой находится movemnet.

Я не совсем уверен, нахожусь ли я на правильном пути.

Может кто-нибудь дать совет по этому вопросу и указать мне правильное направление, пожалуйста?

Заранее спасибо.

Вот минимизированный и простой пример:

https://jsfiddle.net/2648xwgz/

По сути, код рисует рамку видео на холсте.

Теперь мне нужно проверить, совпадает ли предыдущий кадр / изображение на холсте с текущим кадром / изображением.

---

Второе редактирование:

---

Хорошо, так что я воспользовался всеми советами в комментариях на доске и попытался придумать что-то, что на самом деле не проверяет все случайные пиксели на изображениях, поскольку это тяжело и не очень хорошая практика .. .

Итак, я попробовал что-то вроде этого:

https://jsfiddle.net/qpxjcv3a/6/

Приведенный выше код будет нормально работать в Firefox и с локальным видеофайлом. но в JSFIDDLE вы получите ошибку перекрестного происхождения.

В любом случае, ключевой момент в приведенном выше коде - это ctx.globalCompositeOperation = 'difference'; я думаю.

А затем выполняем вычисление «scrore», взятое из здесь , чтобы обнаружить некоторые изменения.

Однако, когда я запускаю свой код, я всегда получаю: console.log('we have motion'); в консоли! Даже когда видео приостановлено и больше нет новых кадров.

Итак, я сделал console.log(imageScore);, и он всегда складывается на 10000, даже если видео приостановлено или закончено! Я не уверен, почему это так и является ли этот расчет правильным. Но это то, где я сейчас нахожусь.

Любые указатели и помощь приветствуется.

Answer 1

Как сказал Дэниел, вам нужно проверить пиксели, длина будет одинаковой для всех итераций. Вы должны посмотреть на алгоритмы хеширования изображений. На каждом интервале вы можете вычислить хеш и сохранить его в глобальной переменной для сравнения на следующем интервале. Это также даст вам возможность установить порог, чтобы незначительные изменения не вызывали обнаружение движения.

Эта страница объясняет хэширование изображения более подробно: https://jenssegers.com/61/perceptual-image-hashes

Вы можете начать с реализации среднего хэша. Это довольно просто. Вы бы уменьшили размер холста до 8x8 пикселей.

ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, 8, 8);
var imageData = ctx.getImageData(0, 0, 8, 8);
var data = imageData.data;

Затем вы перебираете данные изображения и вычисляете яркость.

var brightnessdata = []
for(var i = 0; i<data.length; i+=4){
    brightnessdata.push((data[i]+data[i+1]+data[i+2])/3);
}

Остальное - просто вычисление средней яркости и сравнение яркости каждого пикселя со средней яркостью для вычисления хэша.