javascript - 使用 HTML5 像素化视频流

Question

我正在玩弄一些 HTML5 的东西，并想将Close Pixelate库与getUserMedia API结合起来。我想即时对流进行像素化（我得到的帧速率会非常低）。这是可能吗？我只想给 Close Pixelate 视频对象而不是图像。

Rob Hawkes 的这段视频给了我这个想法。

解决方案：http: //jsfiddle.net/N46QF/（您需要在 chrome://flags/ 中激活 MediaStream 的 Google Chrome Canary 才能使其工作）

Answer 1

是的，我认为这是可能的。但是，为了在像素级别操作视频的帧，您需要先使用间隔将它们绘制到画布上（参见fiddle，在 firefox 和 chrome 中测试）。

由于 Close Pixelate 库需要一个图像作为输入（无论如何它都会立即将其绘制到画布上），因此您需要稍微修改代码以便可以直接传入画布。

我不知道该库是否可以承受间隔内的重复实例化，或者您的帧速率是否可以接受，但我认为它应该很容易测试。我肯定有兴趣看到结果！

如果一切顺利，可能值得考虑分叉 Close Pixelate 库并对其进行修改以允许图像或画布作为输入，因为这似乎是一个有用的扩展。