溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關HTML5中如何使用Canvas實時處理Video的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
本文使用的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”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
