HTML5/Javascript视频过滤

Question

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

所有帮助非常感谢，我始终接受一个答案！

Answer 1

做到这一点的方法是抓住video元素的每个帧并处理，然后用canvas进行显示。 Here's an example我最近为我的书（警告：我知道这个例子在IE9中存在一些问题），它使用了HTML5 Rocks的灰度过滤器。主循环看起来像这样，假设video是对元素的引用和context是一个二维的画布背景下，requestAnimFrame comes from 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()功能亚历克斯W¯¯提到当前仅在Opera和Chrome可用，可以阅读一些关于它的博客文章，并看到一些演示here。一旦你有了一个媒体流，你可以将它管入一个video元素，并完成与上面完全相同的事情。

Answer 2

它看起来像这样使用获得用户媒体API和WebGL是可能的：

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

下面是一个例子（链接到许多有用的资源）：

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