檢測 HTML5 畫布中顯示的兩個視頻幀之間的差異

Question

我在 HTML5 畫布中顯示實時視頻流，效果很好。

現在，我需要做的是檢查在 HTML5 Canvas 中顯示的相機中的任何"motion" 。

在我的研究中，我發現這可以通過檢查前一幀與顯示在畫布中的當前幀來完成。

所以我在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);

然而，當我看在控制台中，Number，可變data輸出始終是相同的16000 ！ 即使在相機前面有一個移動網絡它也不會改變。

我不完全確定我是否在正確的軌道上。

有人可以就這個問題提出建議並指出我正確的方向嗎？

提前致謝。

這是一個縮小的簡單示例：

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);
}

剩下的就是簡單地計算平均亮度並將每個像素的亮度與平均亮度進行比較來計算哈希。