使用HTML5的Pixelate視頻流

Question

我對一些HTML5內容進行了大量的嘗試，並希望將Close Pixelate庫與getUserMedia API相結合。我想在飛行中像素化流（我得到的幀率將瘋狂低）。這是可能嗎？我想給Close Pixelate視頻對象而不是圖像。

This video by Rob Hawkes給了我這個想法。

解決方案： http://jsfiddle.net/N46QF/（你需要谷歌的Chrome Canary與MediaStream鉻激活：//標誌/來得到它的工作）

Answer 1

是的，我認爲這是可能的。但是，爲了在像素級別處理視頻的幀，您需要先使用間隔將它們繪製到畫布上（請參閱fiddle，在Firefox和Chrome中測試過）。

由於Close Pixelate庫需要圖像作爲輸入（它立即繪製到畫布上），所以您需要稍微修改代碼，以便您可以直接傳入畫布。

圖書館是否會站起來反覆實例化的時間間隔或您的幀速率將是可以接受的我不知道，但認爲它應該很容易測試。我一定會有興趣看到結果！

如果這一切都奏效，可能值得考慮分叉關閉Pixelate庫並修改它以允許圖像或畫布作爲輸入，因爲這看起來是一個有用的擴展。