0

現在、クロマ キー HTML5 カメラ テスト アプリの作成に取り組んでいます。

http://jsfiddle.net/XuScp/

現在、それは機能しています（背景で緑を選択し、他のクロマキーと同様に削除します。現在、緑を取り出して、現在の背景のような灰色に置き換えました）。

私が抱えている問題は、カメラが入っているのと同じキャンバスに背景を描画することです。現在、キャンバスに描画されますが、カメラが読み込まれると画像が消え、カメラに置き換えられていると推測されます。

var bckg;
    bckg = new Image();
    bckg.src = 'https://raw.github.com/haywars/greenscreen/master/cambackgrounds/background1.jpg';
    function getImage(url){
        bckg= new Image();
        bckg.src = url;
    };

var processes = {
    timerCallback: function() {
        if (this.myVideo.paused || this.myVideo.ended) {
            return;
        }
        this.ctxInput.drawImage(this.myVideo, 0, 0, this.width, this.height);
        this.pixelScan();
        var self = this;
        setTimeout(function () {
            self.timerCallback();
        }, 0);
    },


    doLoad: function() {
        var video = document.querySelector('video');
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        this.myVideo = document.getElementById("myVideo");
        this.cInput = document.getElementById("cInput");
        this.ctxInput = this.cInput.getContext("2d");
        this.cOutput = document.getElementById("cOutput");
        this.ctxOutput = this.cOutput.getContext("2d");
        var self = this;
        this.ctxOutput.drawImage(bckg,0,0);
        this.myVideo.addEventListener("playing", function() {
            self.width = self.myVideo.videoWidth;
            self.height = self.myVideo.videoHeight;
            self.timerCallback();
        }, false);
    },
    pixelScan: function() {
        var frame = this.ctxInput.getImageData(0, 0, this.width, this.height);
        for (var i = 0; i < frame.data.length; i++) {
            var r = frame.data[i];
            var g = frame.data[i+1];
            var b = frame.data[i+2];
            if (g > 0 && r > 50   && r < 165 && b < 60)
            frame.data[i + 3] = 0;
        }
        this.ctxOutput.putImageData(frame, 0, 0);

        //var img= new Image();
        //img.src = "images/cambackgrounds/background1.jpg";
        //this.ctxOutput.putImageData(img, 0, 0);
        return;
    }

}
4

2 に答える 2

0

@shayward - @TheCrzyMan に同意します。隠しタグと表示キャンバス タグを使用してクロマキーを作成します

このmozilla tut on chroma keyを見たことがあると思います。

Jeffrey Burtoft もこれについて段階的に説明しています。

お役に立てれば。

于 2013-05-09T05:47:59.240 に答える
0

私が知る限り、あなたは背景 ( this.ctxOutput.drawImage(bckg,0,0);) を 1 回だけ描画します。それはdoLoad機能中です。あなたのループは、変更されたビデオをctxOutput一見正しく描画しますが、次のループで背景を再描画しません。それが理由かもしれません。

また、

各ループの背景を描画する代わりに、Image または Canvas 要素のいずれかを使用して、メイン キャンバスの背後に画像を配置します。すでに緑色のピクセルを透明にしているので、メイン キャンバスを通してすべてを見ることができるはずです。それぞれの z-index を設定することから始めて、style.positions をに設定し'absolute'て、一方が他方の背後にあることを確認します。

これにより、ループごとに背景画像を同じキャンバスに描画することで発生する遅延が解消されます。

キャンバスとのレイヤー化を提案する複数のチュートリアルとベンチマーク テストに出くわしました。バックグラウンドは通常静的であるため、常に更新する必要はありません。それを独自のキャンバスにするだけです。それぞれが特定のタイプの要素 (静的、均一なモーション、独立したモーションなど) を含むレイヤーを重ねて、最大のパフォーマンスを確保します。

これがお役に立てば幸いです！

心から、

しんのすけ

于 2013-04-10T03:22:41.873 に答える