HTML5:使用Canvas實時處理Video

請看這個例項.

文件內容

本文使用的XHTML文件如下所示。

以上程式碼關鍵部分如下:

1.建立了兩個canvas元素，ID分別為c1和c2。c1用於顯示當前幀的原始視訊，c2是用來顯示執行chroma-keying特效後的視訊；c2預載入了一張靜態圖片，將用來取代視訊中的背景色部分。
2.JavaScript程式碼從main.js檔案匯入；這段指令碼使用JavaScript 1.8的特性，所以在匯入指令碼時，第22行中指定了版本。
3.當網頁載入時，main.js中的processor.doLoad()方法會執行。

JavaScript程式碼

main.js中的JS程式碼包含三個方法。

初始化chroma-key

doLoad()方法在XHTML文件初始載入時呼叫。這個方法的作用是為chroma-key處理程式碼準備所需的變數，設定一個事件偵聽器，當使用者開始播放視訊時我們能檢測到。

這段程式碼獲取XHTML文件中video元素和兩個canvas元素的引用，還獲取了兩個canvas的圖形上下文的引用。這些將在我們實現chroma-keying特效時使用。

addEventListener()監聽video元素，當使用者按下視訊上的播放按鈕時被呼叫。為了應對使用者回放，這段程式碼獲取視訊的寬度和高度，並且減半（我們將在執行chroma-keying效果時將視訊的大小減半），然後呼叫timerCallback()方法來啟動視訊捕捉和視覺效果計算。

定時器回撥

定時器回撥函式在視訊開始播放時被呼叫（當“播放”事件發生時），然後負責自身週期呼叫，為每一幀視訊實現keying特效。

回撥函式首先檢查視訊是否正在播放；如果沒有，回撥函式不做任何事並立即返回。

然後呼叫computeFrame()方法，該方法對當前視訊幀執行chroma-keying特效。

回撥函式做的最後一件事就是呼叫setTimeout()，來讓它自身儘快地被重新呼叫。在真實環境中，你可能會基於視訊的幀率來設定呼叫頻率。

處理視訊幀資料

computeFrame()方法，如下所示，實際上負責抓取每一幀的資料和執行chroma-keying特效。

當它被呼叫後，video元素將顯示最近的視訊幀資料，如下所示:

在第2行，視訊幀被複制到第一個canvas ctx1的圖形上下文中，高度和寬度值指定為我們之前儲存的幀大小的一半。注意，您可以通過傳遞video元素到繪圖上下文的drawImage()方法來繪製當前視訊幀。其結果是：

第3行程式碼通過呼叫第一個canvas上下文的getImageData()方法，來獲取原始影象資料當前視訊幀的一個副本。它提供了原始的32位畫素影象資料，這樣我們就能夠進行操作。第4行程式碼通過將幀影象資料的總長度除以4，來計算影象的總畫素數。

第6行程式碼迴圈掃描所有畫素，獲取每個畫素的紅、綠、藍值，同時和預定義的背景色進行比較，這些背景色將用foo.png中匯入的背景影象替換。

被檢測成背景的每一個畫素，將它的alpha值替換為零，表明該畫素是完全透明的。結果，最終的影象背景部分是100%透明的，這樣在第13行程式碼，把它被繪製到目標的上下文中時，效果是內容疊加到靜態背景上。

由此產生的影象看起來像這樣：

在視訊播放時反覆這樣做，這樣一幀接一幀處理，呈現出chroma-key的特效。

請看這個例項。