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/