使用HTML5对视频流进行像素化处理

时间:2012-05-15 16:05:35

标签: javascript html5 html5-video

我正在讨论一些HTML5内容,并希望将Close Pixelate库与getUserMedia API结合起来。我想在运行中像素化流(我得到的帧速率将是疯狂的低)。这是可能吗?我想给视频对象而不是图像提供关闭像素。

This video by Rob Hawkes给了我这个主意。

解决方案: http://jsfiddle.net/N46QF/(您需要在Chrome:// flags /中激活MediaStream的Google Chrome Canary才能使其正常工作)

1 个答案:

答案 0 :(得分:2)

是的,我认为这是可能的。但是,为了在像素级别操纵视频帧,您需要首先使用间隔将它们绘制到画布上(请参阅fiddle,在firefox和chrome中测试)。

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

图书馆是否能够经受一段时间的重复实例化或你的帧速率是可以接受的我不知道,但认为它应该很容易测试。我当然有兴趣看到结果!

如果一切正常,可能值得考虑分支关闭Pixelate库并修改它以允许图像或画布作为输入,因为这似乎是一个有用的扩展。