对没有 CSS 的 HTML5 视频应用过滤器答案

【问题标题】：Apply filter to HTML5 video without CSS对没有 CSS 的 HTML5 视频应用过滤器
【发布时间】：2014-01-31 17:21:05
【问题描述】：

我正在寻找一种方法来对视频应用一些过滤器（从网络摄像头实时获取），但不使用任何类型的 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）。

有什么办法吗？

谢谢

编辑：

我有我之前发布的代码，其中我有一个 CSS 类，我将它分配给我的画布，以便在需要时应用过滤器

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

我的想法是将其实时应用到网络摄像头流媒体中。我可以使用 HTML5 视频流来做到这一点吗？
@Fran 不太可能。如果要应用客户端在任何情况下都无法删除的效果，则需要在服务器端进行。不知道哪种流媒体软件支持实时效果，但我敢肯定它们在那里（尽管可能不是免费的）
@Pekka웃 这是一个使用 HTML5 视频流的增强现实包，所以我无法使用任何流媒体软件:(（爱免费，所有身体部位都可以看到 :D）

【解决方案2】：

查看Seriously.js 获取大量可针对画布、视频、img 或其他 html 元素的过滤器！

【讨论】：

【解决方案3】：

如果您想对来自 getUserMedia 的视频流应用过滤器，您可以在 <Canvas> 而不是 <Video> 中显示视频。

我知道这不是一个很好的解决方案，因为它会消耗大量 CPU。但是您可以应用的过滤器几乎没有限制。

【讨论】：