4

HTML5 / Javascriptのタグの入力ストリームにカスタム視覚効果（グレースケールなど）を適用することは可能ですか？私の目標は、フィルター処理されたWebカメラの出力をユーザーに表示できるようにすることですが、ユーザーはグレースケールだけでなく、さまざまなフィルターから選択できる必要があります。

すべての助けは大歓迎です、そして私はいつも答えを受け入れます！

4

2 に答える 2

1

これは、Get UserMediaAPIとWebGLを使用して可能であるように見えます。

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

次に例を示します（多くの役立つリソースへのリンクがあります）。

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

于 2012-07-31T00:17:08.303 に答える
1

これを行う方法は、要素の各フレームを取得してvideo処理し、それをで表示することcanvasです。 これが私の本のために最近行った例です（警告：現在IE9でこの例にいくつかの問題があることを知っています）、HTML5Rocksのグレースケールフィルターを使用しました。メインループは次のようvideoになります。要素への参照でcontextあり、2Dキャンバスコンテキストであると想定します。これはPaulIrishrequestAnimFrameからのものです。

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);
}

Alex Wが言及している機能は、現在OperaとChromeでのみ利用可能です。このgetUserMedia()機能に関するいくつかのブログ投稿を読んだり、ここでいくつかのデモを見ることができます。メディアストリームを取得したら、それをvideo要素にパイプして、上記とまったく同じことを行うことができます。

于 2012-07-31T00:28:56.443 に答える