使用JavaScript实现Motion Detection

的变量，一个用来存储已绘制的webcam stream。也需要存储每个音符x轴线的位置，弹奏的乐谱，和一些与声音相关的变量。

var notesPos = [0, 82, 159, 238, 313, 390, 468, 544]; 
 
var timeOut, lastImageData; 
 
var canvasSource = $(“#canvas-source”)[0]; 
 
var canvasBlended = $(“#canvas-blended”)[0]; 
 
var contextSource = canvasSource.getContext(’2d’); 
 
var contextBlended = canvasBlended.getContext(’2d’); 
 
var soundContext, bufferLoader; 
 
var notes = []; 

同时还需要倒置webcam stream的轴线，让用户感觉自己是在镜子前。这使得他们的弹奏更顺畅。下面是完成该功能需要的代码段： 

contextSource.translate(canvasSource.width, 0);          contextSource.scale(-1, 1);

  第二步：升级和视频绘制

创建一个名为Update的函数，并设定一秒钟执行60次，其中调用其它一些函数。

function update() { 
 
drawVideo(); 
 
blend(); 
 
checkAreas(); 
 
timeOut = setTimeout(update, 1000/60); 
 
} 

把视频绘制到canvas中非常简单，只有一行代码

function drawVideo() { 
 
contextSource.drawImage(video, 0, 0, video.width, video.height); } 

 第三步：创建blend mode difference

创建一个帮助函数，确保像素相减得到的值务必为正值。你可以使用内置函数Math.abs,不过我用二进制运算符写了一个差不多的函数.大部分情况下,使用二进制运算结构能够提升性能,你不一定要了解其中的细节,只要使用以下的代码即可:

function fastAbs(value) { 
 
// equivalent to Math.abs(); return (value ^ (value >> 31)) - (value >> 31); 
 
} 

下面我们写一个blend mode difference函数,这个函数包含三个形参:

一个二维数组用来存储减法得到的结果

一个二维数组存储当前webcam stream中图片的像素

一个二维数组存储之前webcam stream中图片的像素

存储像素的数组是二维的,并且还包含了Red,Green,Blue和Alpha等通道值.

· pixels[0] = red value

· pixels[1] = green value

· pixels[2] = blue value

· pixels[3] = alpha value

· pixels[4] = red value

· pixels[5] = green value

等等……

如示例中所示，webcam stream的宽为640像素，高为480像素。因此，数组的大小为640*480*4=1228000.

循环处理这些像素数组的最好方式是把值扩大4倍（红、绿、蓝、Alpha），这意味着现在只需要处理 307,200 次–情况更加乐观一些。

function difference(target, data1, data2) { 
 
var i = 0; 
 
while (i < (data1.length / 4)) { 
 
var red = data1[i*4]; 
 
var green = data1[i*4+1]; 
 
var blue = data1[i*4+2]; var alpha = data1[i*4+3]; ++i; 
 
} 
 
} 

现在你可以对图片中的像素进行减法运算—从效果上来看，会有大不同—如果颜色通道值已经为0，停止减法运行，并自动设置Alpha的值为255（0xFF）。下面是已经完成的blend mode difference函数（可以进行自主优化）：

function difference(target, data1, data2) { // blend mode difference if (data1.length != data2.length) return null; var i = 0; while (i < (data1.length * 0.25)) { target[4*i] = data1[4*i] == 0 ? 0 : fastAbs(data1[4*i] - data2[4*i]); target[4*i+1] = data1[4*i+1] == 0 ? 0 : fastAbs(data1[4*i+1] - data2[4*i+1]); target[4*i+2] = data1[4*i+2] == 0 ? 0 : fastAbs(data1[4*i+2] - data2[4*i+2]); target[4*i+3] = 0xFF; ++i; } }

我在Demo中使用的是一个稍微不同的版本，以取得更好的准确性。我写了一个threshold函数，应用于颜色值。当颜色值低于临界值的时候，该方法把颜色像素值更改为黑色，而高于临界值时，将颜色像素值更改为白色。你可以使用以下的代码段完成该功能。

function threshold(value) { 
 
return (value > 0×15) ? 0xFF : 0; 
 
} 

同样我也计算了三种颜色通道的平均值，它们在图片中的像素为黑色或白色 。

function differenceAccuracy(target, data1, data2) 
 
{ if (data1.length != data2.length) return null; 
 
var i = 0; 
 
while (i < (data1.length * 0.25)) { 
 
var average1 = (data1[4*i] + data1[4*i+1] + data1[4*i+2]) / 3; 
 
var average2 = (data2[4*i] + data2[4*i+1] + data2[4*i+2]) / 3; 
 
var diff = threshold(fastAbs(average1 - average2)); target[4*i] = diff; 
 
target[4*i+1] = diff; 
 
target[4*i+2] = diff; target[4*i+3] = 0xFF; ++i; } 
 
} 

结果如下面的黑白图片所示：

[[71208]]

图3.blend mode difference的结果以黑白图片显示

  第4步：blend canvas

下面我们创建一个函数，用来融合图片，你只需要把正确的值传给它：像素数组。

JavaScript的绘图API提供了一个方法，。这个对象包含了很多有用的属性，比如宽度和高度，同样还有数据属性，正是你需要用到的像素数组。同样，创建一个空的ImageData示例，用来存储结果，并把当前的webcam图片存储下来，以便重复使用。下面是在canvas中融合并绘制结果所用到的代码段：

function blend() { 
 
var width = canvasSource.width; 
 
var height = canvasSource.height; 
 
// get webcam image data 
 
var sourceData = contextSource.getImageData(0, 0, width, height); 
 
// create an image if the previous image doesn’t exist  
 
if (!lastImageData) lastImageData = contextSource.getImageData(0, 0, width, height); 
 
// create a ImageData instance to receive the blended result 
 
var blendedData = contextSource.createImageData(width, height); 
 
// blend the 2 images 
 
differenceAccuracy(blendedData.data, sourceData.data, lastImageData.data); 
 
// draw the result in a canvas contextBlended.putImageData(blendedData, 0, 0); 
 
// store the current webcam image lastImageData = sourceData; 
 
} 

第5步：search for pixel

这是完成Demo的最后一步，这就是motion detection，这里用到上一节我们创建的融合的图片。

在准备阶段，放入了8张木琴音符的图片。用这些音符的位置和大小作融合后图像的像素。然后，重复找出白色的像素。

在重复的过程中，计算出颜色通道的平均值，使用变量存储计算结果。重复过程完成之后，计算出整张图片的像素的总平均值。

通过设定临界值10来避免噪音和一些细微的操作，如果你发现大于10的数值，则应当考虑到在最后一张图像之后，用户进行了操作。这就是运动追踪。

然后，播放出相对应的音符，并展示出note rollover。此处用到的函数如下所示：

function checkAreas() { 
 
// loop over the note areas 
 
for (var r=0; r<8; ++r) 
 
{ 
 
// get the pixels in a note area from the blended image 
 
var blendedData = contextBlended.getImageData 
 
( notes[r].area.x, 
 
notes[r].area.y, 
 
notes[r].area.width, 
 
notes[r].area.height); 
 
var i = 0; 
 
var average = 0; 
 
// loop over the pixels 
 
while (i < (blendedData.data.length / 4)) { 
 
// make an average between the color channel 
 
average += (blendedData.data[i*4] + blendedData.data[i*4+1] + blendedData.data[i*4+2]) / 3; 
 
++i; } 
 
// calculate an average between of the color values of the note area 
 
average = Math.round(average / (blendedData.data.length / 4)); 
 
if (average > 10) { 
 
// over a small limit, consider that a movement is detected 
 
// play a note and show a visual feedback to the user 
 
playSound(notes[r]); 
 
notes[r].visual.style.display = ”block”; 
 
$(notes[r].visual).fadeOut(); } } 

相关链接

我希望这篇文章可以带给你更多的灵感，开发出基于视频的交互程序，

通过以下的Chrome和Opera浏览器的开发和W3C网站上有关API的草案，你可以学到更多有关getUserMedia接口的知识。

如果你想找到更多关于motion detection或者基于视频的应用的灵感，我推荐你遵照以下一些Flash开发人员和motion设计者使用After Effects得出的意见。现在Java Script和HTML势头正劲，开发出了很多新的功能。要学习的内容有很多，你可以参考以下资源：

· Soundstep blog

· Blend modes

· GetUserMedia API

· GetUserMedia article to get started

· GetUserMedia shim

· 优秀的开发者博客，如何找到灵感以及写出更好的代码：

· Grant Skinner’s blog

· Keith Peter’s blog

· Motion 设计者的博客，Video Copilot

· ProVideo Coalition

· Motionographer