的變量，一個用來存儲已繪制的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