html - HTML5/Javascript 视频过滤

Question

是否可以将自定义视觉效果（如灰度）应用于 HTML5/Javascript 中标签的输入流？我的目标是能够向用户显示过滤后的网络摄像头的输出，但用户应该能够从各种过滤器中进行选择，而不仅仅是灰度。

非常感谢所有帮助，我总是接受答案！

Answer 1

使用 Get User Media API 和 WebGL 似乎可以做到这一点：

http://dev.w3.org/2011/webrtc/editor/getusermedia.html

这是一个示例（带有许多有用资源的链接）：

http://neave.com/webcam/html5/

Answer 2

方法是抓取video元素的每一帧并处理，然后用canvas. 这是我最近为我的书做的一个例子（警告：我知道这个例子目前在 IE9 中存在一些问题），它使用了来自HTML5 Rocks的灰度过滤器。主循环看起来像这样，假设video是对元素的引用并且context是 2d 画布上下文，requestAnimFrame来自 Paul Irish：

function draw() {
    if(video.paused || video.ended) return false;
    context.clearRect(0,0,720,480);
    context.drawImage(video,0,0,720,480);
    context.putImageData(grayscale(context.getImageData(0,0,720,480)),0,0);
    requestAnimFrame(draw);
}

getUserMedia()Alex W 提到的功能目前仅在 Opera 和 Chrome 中可用，您可以阅读一些关于它的博客文章并在此处查看一些演示。获得媒体流后，您可以将其通过管道传输到video元素中并执行与上述完全相同的操作。