不使用CSS将过滤器应用于HTML5视频

Question

我正在寻找一种方法将一些过滤器应用于视频（实时从webcamera中获取），但不使用任何类型的CSS类。

我不希望创建一个CSS类，如：

.blur {
   -webkit-filter: blur(1px);
   -moz-filter: blur(1px);
   -o-filter: blur(1px);
   -ms-filter: blur(1px);
   filter: blur(1px);
}

并像document.getElementById("myvideo").className = "blur"一样应用它。不，我不是在寻找这个。我需要将此过滤器嵌入到视频中，以便用户可以退出。（使用注入的CSS不是一种选择）。

要澄清自己：我不是在寻找像这样的解决方案http://html5-demos.appspot.com/static/css/filters/index.html

有没有办法做到这一点？

由于

编辑：

我有像之前发布的代码，我有一个CSS类，我分配给我的画布，以便随时应用过滤器

问题？用户可以使用Chrome中包含的开发人员工具或使用Firebug（通过单独禁用类或元素）来禁用注入的CSS。

所以我需要一个解决方案来应用这些过滤器，但不会将CSS注入我的canvas元素。

Answer 1

在将视频数据传送到浏览器之前，您必须将其应用于视频数据。有很多方法可以做到这一点，例如：ffmpeg支持various filters（包括模糊）。

您可以在客户端上执行的任何操作都可以由用户撤消（用户控制客户端，您不需要）。

Answer 2

查看http://seriouslyjs.org/一大堆可以定位画布，视频，img或其他html元素的过滤器！

Answer 3

如果您想将过滤器应用于来自getUserMedia的视频流，则可以使用<Canvas>代替<Video>来显示视频。

我知道这不是一个很好的解决方案，因为它会吃掉很多CPU。但是，您可以使用哪些过滤器进行限制。