一、知識必備

初、中級水平的JavaScript

初、中級水平的HTML5

對jQuery有基本了解

由于使用getUserMdedia和Audio API，Demo需要使用Chrome Canary，并通過本機Web服務器運行。

第三方必備產(chǎn)品

Chrome Canary

本機Web服務器，例：Xampp（Mac，Windows，Linux）Mamp（Mac）

Webm格式文件的視頻解碼器，例：

Online ConVert Video converter to convert to the WebM format (VP8)

Mp4格式文件的視頻解碼器，例：

· Adobe Media Encoder

· Adobe After Effects

· HandBrake

Ogg格式文件的視頻解碼器，例：

Easy HTML5 Video

二、示例文件

javascript_motion_detection_soundstep.zip

我會在本篇文章中，跟大家討論一下如何在JavaScript中使用webcam stream追蹤用戶的操作。Demo中展示了從用戶的網(wǎng)絡(luò)攝像頭中搜集到的一段視頻，用戶可以實時地在使用HTML開發(fā)的木琴上彈奏，就像彈奏真正的樂器一樣。這個Demo是使用HTML5中的兩個“仍需改進”的接口開發(fā)的，它們是：getUserMedia API，用來調(diào)用用戶的網(wǎng)絡(luò)攝像頭，和Audio API，用來彈奏木琴。

同時，我也給大家展示了如何使用混合模式來捕獲用戶的操作。幾乎所有提供了圖片處理接口的語言都提供了混合模式。這里引用Wikipedia評論混合模式的一句話，“數(shù)字圖像編輯中的混合模式通常用來判斷兩個圖層是否能夠融合在一起。”JavaScript本身不支持混合模式，而混合模式不過是對像素進行的數(shù)學運算，因此我創(chuàng)建了一個混合模式“difference”。

我制作了一個Demo，用來展示web技術(shù)的的發(fā)展方向。JavaScript和HTML5將會為新型的交互式Web應用提供接口。這是多么激動人心的一件事?。?/p>

  HTML5 getUserMedia API

一直到我寫這篇文章的時候，getUserMedia API仍在完善中。W3C第5次發(fā)布的HTML，新增了相當多的接口，用于訪問本機硬件。navigator.getUserMediaAPI（）接口提供了一些工具，使網(wǎng)站能夠捕獲音頻和視頻。

一些技術(shù)博客中有很多關(guān)于如何使用這些接口的文章，所以，這里我不再贅述。如果你想學習更多相關(guān)的內(nèi)容，文章的最后我給大家提供了一些有關(guān)getUserMedia的鏈接。下面，我們一起來看一下我是如何使用該接口做出示例中的內(nèi)容的。

目前，getUserMedia API只能在Opera 12和Chrome Canary中使用，并且兩款瀏覽器都沒有公開發(fā)布。針對該示例，你只能使用Chrome Canary，因為該瀏覽器允許使用AudioContext彈奏木琴。Opera暫還不支持AudioContext。

Chrome Canary 完成安裝并啟動，然后啟用API。在地址欄中輸入：about:flags。在啟用Media

圖1. 啟用Media Stream

最后，由于安全限制，攝像機不允許以本地文件：///的形式進行訪問，你必須使用自己的本機web服務器運行示例文件。

現(xiàn)在萬事俱備，只需添加一個視頻標簽用來播放攝像頭流媒體文件。使用JavaScript把接收到的流媒體文件添加到視頻標簽的src屬性中。

<video id=”webcam” autoplay width=”640″ height=”480″></video> 

在JavaSript代碼段中，首先要做兩項準備工作，第一項是確保用戶的瀏覽器能夠使用getUserMedia API。

function hasGetUserMedia() { return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } 

第二項工作就是嘗試從用戶的網(wǎng)絡(luò)攝像頭中獲取流媒體文件。

注：在這篇文章和示例中，我使用的是jQuery框架，但是你可以根據(jù)自己的需要選擇其它框架，例如，本地文件.querySelector

var webcamError = function(e) { 
 
alert(‘Webcam error!’, e); 
 
}; 
 
var video = $(‘#webcam’)[0]; 
 
if (navigator.getUserMedia) { 
 
navigator.getUserMedia({audio: true, video: true}, function(stream) { video.src = stream; 
 
}, webcamError); } 
 
else if (navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia(‘audio, video’, function(stream) { video.src = window.webkitURL.createObjectURL(stream); 
 
}, webcamError); 
 
} else { 
 
//video.src = ’video.webm’; // fallback. 
 
} 

現(xiàn)在你已經(jīng)可以在HTML頁面中展示網(wǎng)絡(luò)攝像頭流媒體文件了。在下一部分中，我將為大家介紹總體結(jié)構(gòu)以及示例中用到的一些資源。

如果你希望在自己的程序中使用getUserMedia，我推薦以下Addy Osmani的作品。Addy使用Flash fallback創(chuàng)建了getUserMedia API的shim。

 Blend mode difference

接下來，我給大家展示的是使用blend mode difference來檢測用戶的操作。

把兩張圖片融合在一起就是對像素值進行加減計算。在Wikipedia的文章中有關(guān)混合模式的部分對difference進行了描述。“兩個圖層相減取其絕對值作為Difference，任何圖片和黑片進行融合，所有顏色的值都為0.”

為了實現(xiàn)這個操作，首先需要兩張圖片。代碼反復計算圖片的每一個像素，第一張圖片的色彩通道值減去第二上的色彩通道值。

比如說，兩張紅色的圖片的每個像素中的色彩通道值為：

-紅色：255（0xFF）

-綠色：0

-藍色：0

下面的操作表示從這些圖片減去這些顏色的值：

-紅色：255-255=0

-綠色：0-0=0

-藍色：0-0=0

換句話說，把blend mode difference應用于兩張相同的圖片會產(chǎn)生一張黑色的圖片。下面我們來討論一下blend mode difference的實用性和圖片的獲取途徑。

我們逐步地完成這個過程，首先設(shè)定一個時間間隔，使用canvas元素畫出webcam stream中的一張圖片，如示例中所示，我設(shè)定為1分鐘畫60張圖片，這個數(shù)量遠遠超過你所需要的。當前顯示在webcam stream中的圖片是你要融合的圖片中的第一張。

第二張圖片是從webcam中捕獲的另外一張圖片?，F(xiàn)在就有了兩張圖片，要做的就是對它們的像素值進行差值計算。這意味著，如果兩張照片是相同的—換句話說，如果用戶沒有任何操作—運算結(jié)果會是一張黑色的圖片。

當用戶開始操作，奇妙的事情發(fā)生了。當前時間間隔獲取到的圖片與在之前的時間間隔中獲取到圖片相比，有細微的變化。如果對不同的像素值進行差值計算，一些顏色出現(xiàn)了。這意味著這兩幀圖畫之間發(fā)生了變化。

[[71207]]

圖2.融合后的兩張圖片

Motion detection這個過程就完成了。最后一步就是反復計算融合后的圖片中的所有像素，是看否存在不為黑色的像素。   

  必備資源

為了運行這個Demo，還需要一般網(wǎng)站的必備元素。首先，你需要一個包含了canvas和video tags 元素的HTML頁面，還需要JavaScript來運行這個應用程序。

然后，還需要一張木琴的圖片，最好是透明背景（png格式）。另外，還需要木琴每個按鍵的圖片，每一張圖片都需要有輕微的變化。這樣使用rollover 效果，這些圖片就可以給用戶視覺上的反饋，彈奏的琴鍵會高亮顯示。

我們還需要一個音頻文件，包含了每一個音符的聲音，mp3文件即可。如果彈奏木琴沒有聲音就會沒有任何樂趣可言了。

最后，這時候，需要新創(chuàng)建一個視頻，把它解碼成MP4格式，下一節(jié)，我將為大家介紹一些用來解碼視頻的工具，你可以在Demo的zip文件中找到所有的資源。

  解碼HTML5視頻文件

把視頻Demo后備文件解碼成用來展示HTML5視頻文件常見的三種格式。

在把文件解碼成Webm格式的過程中，我遇到了點麻煩，我選擇的解碼工具不允許選擇碼率，而碼率恰恰決定了視頻的大小和質(zhì)量，通常被稱作kbps（千比特每秒）。我不再使用Online ConVert Video轉(zhuǎn)換器來轉(zhuǎn)換WebM格式（VP8），這個問題迎刃而解：

MP4格式：你可以使用Adobe Creative Suite中的工具，例如Adobe Media Encoder或者After Effects?；蛘吣憧梢允褂妹赓M的視頻轉(zhuǎn)換軟件，如Handbrake。

Ogg格式：我通常使用一些工具一次性轉(zhuǎn)換所有格式。我對解碼后生產(chǎn)webm和MP4格式視頻的質(zhì)量感覺不是很滿意，雖然我沒辦法更改輸出的質(zhì)量，而Ogg格式的視頻的質(zhì)量比較樂觀。你可以使用Easy HTNL5 Video或者Miro等轉(zhuǎn)換器。

Demo中用到的HTML代碼段

這是開始JavaScript編碼之前的最后一步。添加HTML標簽，下面是需要用到的HTML標簽（我不會列出我用到的所有內(nèi)容，比如說視頻Demo中的fallback代碼，你可以在資源中下載得到。）

這里需要一個簡單的視頻標簽，用來接收用戶的webcam feed。不要忘記設(shè)計自動播放屬性，如果忘記了，stream會暫停在接收到的第一幀畫面上。

<video id=”webcam” autoplay width=”640″ height=”480″></video> 

視頻標簽不會顯示出來，它的CSS顯示樣式被設(shè)置成none，另外，添加一個canvas元素，用來繪制webcam stream。

<canvas id=”canvas-source” width=”640″ height=”480″></canvas> 

這時還需要另外添加一個canvas用來顯示motion detection中實時的變動。

<canvas id=”canvas-blended” width=”640″ height=”480″></canvas> 

下面添加一個DIV標簽，把木琴的圖片放入其中。把木琴放到webcam的上部：用戶可以身入其境地彈奏木琴。把音符放在木琴的上方，將其屬性設(shè)置為隱藏，當音符被觸發(fā)的時候，將會顯示在rollover中。

<div id=”xylo”> 
 
<div id=”back”><img id=”xyloback” src=”images/xylo.png”/></div>   <div id=”front”> <img id=”note0″ src=”images/note1.png”/> <img id=”note1″ src=”images/note2.png”/> <img id=”note2″ src=”images/note3.png”/> <img id=”note3″ src=”images/note4.png”/> <img id=”note4″ src=”images/note5.png”/> <img id=”note5″ src=”images/note6.png”/> <img id=”note6″ src=”images/note7.png”/> <img id=”note7″ src=”images/note8.png”/> </div> </div> 

  JavaScript motion detection

使用以下JavaScript代碼段完成Demo

確認應用是否可以使用getUserMedia API。

確認已接收webcam stream

載入木琴琴譜的音頻

啟動時間間隔，并調(diào)用Update函數(shù)

在每一個時間間隔中，在canvas中繪制一張webcam feed。

在每一個時間間隔中，把當前的webcam中的圖片和之前的一張融合在一起。

在每一個時間間隔中，在canvas中繪制出融合后的圖片。

在每一個時間間隔中，在木琴的琴譜中檢查像素的顏色值。

在每一個時間間隔中，如果發(fā)現(xiàn)用戶進行操作，彈奏出特定的木琴音符。

 第一步：聲明變量

聲明一些用于存儲drawing和motion detection過程中使用到的變量。首先，需要兩個對canvas元素的引用，一個用來存儲每個canvas上下文

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 = []; 

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

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

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

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

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

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

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