HTML5:使用Canvas即時處理Video
- 高洛峰原創
- 2018-05-28 17:58:125965瀏覽
文檔內容
本文所使用的XHTML文檔如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
p {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
<script type="text/javascript;version=1.8" src="main.js"></script>
</head>
<body onload="processor.doLoad()">
<p>
<video id="video" src="video.ogv" controls="true"/>
</p>
<p>
<canvas id="c1" width="160" height="96"/>
<canvas id="c2" width="160" height="96"/>
</p>
</body>
</html>以上代碼關鍵部分如下:
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處理程式碼準備所需的變量，設定一個事件偵聽器，當使用者開始播放影片時我們能偵測到。
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},這段程式碼取得XHTML文件中video元素和兩個canvas元素的引用，也取得了兩個canvas的圖形上下文的引用。這些將在我們實現chroma-keying特效時使用。
addEventListener()監聽video元素，當使用者按下影片上的播放按鈕時被呼叫。為了應對用戶回放，這段程式碼獲取影片的寬度和高度，並且減半（我們將在執行chroma-keying效果時將影片的大小減半），然後調用timerCallback()方法來啟動影片捕捉和視覺效果計算。
定時器回調
定時器回調函數在視頻開始播放時被調用（當“播放”事件發生時），然後負責自身週期調用，為每一幀視頻實現keying特效。
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},回呼函數首先檢查影片是否正在播放；如果沒有，回呼函數不做任何事並立即返回。
然後呼叫computeFrame()方法，該方法對目前視訊幀執行chroma-keying特效。
回呼函數做的最後一件事就是呼叫setTimeout()，來讓它自己盡快重新呼叫。在真實環境中，你可能會基於影片的幀率來設定呼叫頻率。
處理視訊幀資料
computeFrame()方法，如下所示，實際上負責抓取每個畫面的資料和執行chroma-keying特效。
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}當它被調用後，video元素將顯示最近的視頻幀數據，如下所示:
在第2行，視頻幀被複製到第一個canvas ctx1的圖形上下文中，高度和寬度值指定為我們之前保存的幀大小的一半。請注意，您可以透過傳遞video元素到繪圖上下文的drawImage()方法來繪製目前視訊幀。結果是：
第3行程式碼透過呼叫第一個canvas上下文的getImageData()方法，來取得原始影像資料目前視訊幀的副本。它提供了原始的32位元像素影像數據，這樣我們就能夠進行操作。第4行程式碼透過將幀影像資料的總長度除以4，來計算影像的總像素數。
第6行程式碼循環掃描所有像素，取得每個像素的紅、綠、藍值，同時和預先定義的背景色進行比較，這些背景色將以foo.png中匯入的背景影像取代。
被偵測成背景的每個像素，將它的alpha值替換為零，表示該像素是完全透明的。結果，最終的圖像背景部分是100%透明的，這樣在第13行程式碼，把它被繪製到目標的上下文中時，效果是內容疊加到靜態背景上。
由此產生的影像看起來像這樣：
在影片播放時反覆這樣做，這樣一幀接一幀處理，呈現出chroma-key的特效。
更多HTML5:使用Canvas即時處理Video相關文章請追蹤PHP中文網！