如何快速處理HTML5中的視頻幀？

Question

我正在測試HTML5的視頻API。該計劃是有一個影響，如使它成爲黑色和白色的視頻播放。我有和使用緩衝區一起工作。我將當前視頻幀複製到可以處理它的暫存緩衝區。問題在於它運行的速度。

HTML5的視頻API有'timeupdate'事件。我試圖使用這個處理程序處理幀，每幀一次，但運行速度比視頻慢。

任何想法加快幀處理？

Answer 1

通過使用requestAnimationFrame來確定何時更新畫布，而不是依靠僅更新每200-250毫秒的timeupdate，您可以獲得更頻繁的重畫。對於幀準確的動畫來說絕對不夠。​​會每16ms更新一次（大約60fps），但瀏覽器會根據需要進行調節，並與視頻緩衝區繪製調用同步。這幾乎就是你想要的這類事情。

即使幀速率更高，使用2D畫布處理視頻幀也會非常緩慢。首先，你正在處理CPU中的每個像素，運行Javascript。另一個問題是你正在複製大量的內存。無法直接訪問視頻元素中的像素。相反，您必須先將整個框架複製到畫布中。然後，您必須撥打getImageData，它不僅會再次複製整個幀，而且還需要重新分配整個內存塊，因爲它每次都會創建一個新的ImageData。如果你可以複製到一個現有的緩衝區，但是你不能。

事實證明，您可以使用WebGL進行極其快速的圖像處理。我已經爲此寫了一個名爲Seriously.js的庫。查看wiki獲取常見問題和教程。您可以使用色調/飽和度插件 - 只需將飽和度降至-1即可將視頻變爲灰度。

該代碼將是這個樣子：

var composition = new Seriously(); 
var effect = composition.effect('hue-saturation'); 
var target = composition.target('#mycanvas'); 
effect.source = '#myvideo'; 
effect.saturation = -1; 
target.source = effect; 
composition.go(); 

使用的WebGL的一大缺點是，不是每個瀏覽器或計算機將支持它 - Internet Explorer中出，因爲是舊的或怪異的任何機器視頻驅動。大多數移動瀏覽器不支持它。你可以得到很好的數據here和here。但是你可以在非常大的視頻上獲得非常高的幀率，即使有更多的complex effects。

（還有一個小問題，奇怪的是，在Chrome和Firefox中都出現了一個瀏覽器bug，你的畫布通常會在視頻後面一幀，如果視頻暫停，這只是一個問題，而且如果你在跳過，這是最令人震驚的，唯一的解決方法似乎是繼續強制更新，即使你的視頻暫停了，效率也不高，請隨意投票給他們，這樣他們會得到一些關注。）