Question

我正在HTML5画布上显示实时视频流，效果很好。

现在，我需要做的是检查HTML5画布中正在显示的相机中是否有"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);

但是，当我在控制台中查看时，变量data输出的 Number 总是相同，即16000！即使相机前方有Movemnet，它也不会改变。

我不确定自己是否步入正轨。

请问有人可以在这个问题上提出建议，并指出正确的方向吗？

先谢谢了。

以下是一个简短的示例：

https://jsfiddle.net/2648xwgz/

基本上，代码在画布上绘制了视频帧。

现在，我需要检查画布中的前一帧/图像是否与当前帧/图像相同。

第二编辑：

好吧，所以我采纳了船上评论中的所有建议，并试图提出一种实际上无法检查图像中所有随机像素的内容，因为这很繁琐，也不是很好的实践。

所以，我尝试了这样的事情：

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

上面的代码可以在Firefox和本地视频文件中正常运行。但是在JSFIDDLE上，您会遇到跨域错误。

无论如何，我猜上面的代码中的关键是使用ctx.globalCompositeOperation = 'difference';。

然后对here进行“ scrore”计算以发现一些变化。

但是，当我运行代码时，总是在控制台中得到console.log('we have motion');！即使视频暂停了，也没有新的帧了。

所以我做了console.log(imageScore);，即使视频暂停或结束，它也总是由10000加起来！我不确定为什么会这样，以及此计算是否正确。但这就是我现在的位置。

任何指针和帮助表示赞赏。

Answer 1

正如丹尼尔（Daniel）所说，您需要检查像素，所有迭代的宽度都相同。您应该研究图像哈希算法。在每个时间间隔，您都可以计算哈希值，并将其存储在全局变量中，以便在下一个时间间隔进行比较。这也可以让您选择设置阈值，因此较小的更改不会触发运动检测。

此页面更详细地说明了图像哈希：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);
}

剩下的就是简单地计算平均亮度，并将每个像素亮度与平均亮度进行比较以计算哈希值。

检测HTML5画布中显示的两个视频帧之间的差异

1 个答案: