0

ウェブカメラ、HTML5 ビデオ、およびキャンバスを使用してグリーン スクリーンをセットアップしました。クロマ キー (グリーン スクリーン) の作成について、MDN からアイデアを得ました。ただし、事前に録画されたビデオではなく、ライブ Web カメラを使用します。画像を保存しようとすると、クロマキー領域が透明ではなく白になることを除いて、すべてが期待どおりに機能します。海の背景があります。ウェブカメラがオンになっていて、その前に人が立っていると、その人が海にいるように見えます。繰り返しますが、その画像を保存すると、真ん中に自分がいる白いボックスが表示されます。Web カメラのサイズは 640 x 480、キャンバスのサイズは 1600 x 800 です。

編集： クロマキーの許容範囲を暗い灰色がかった以上のものに変更しました。カメラの前に何か白いものを置くと、理論的には背景画像全体が表示されるはずです。しかし、 と同じ色の 640x480 ボックスが残っています<body>。

これがデモです。背景に緑がなければ、実際には機能しません。Webkit のみ。

ウェブカメラのクロマキー:

var processor = {
timerCallback: function() {
    if (this.webcam.paused || this.webcam.ended) {          
        return;
    }
    this.computeFrame();
    var self = this;
    setTimeout(function () {
        self.timerCallback();
    }, 0);
},
doLoad: function() {
    this.webcam = document.getElementById("webcam");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");       
    var self = this;
    this.webcam.addEventListener("play", function() {
        self.width = 640;
        self.height = 480;
        self.timerCallback();
    }, false);
},
computeFrame: function() {
    this.ctx1.drawImage(this.webcam, 0, 0, 640, 480); //draw webcam to canvas
    var frame = this.ctx1.getImageData(0, 0, 640, 480); //capture a frame
    var l = frame.data.length / 4;
    for (var i = 0; i < l; i++) { //loop through pixels
        var r = frame.data[i * 4 + 0];
        var g = frame.data[i * 4 + 1];
        var b = frame.data[i * 4 + 2];
        if (g > 100 && r < 95 && b > 60 && b < 160 ){
            frame.data[i * 4 + 3] = 0;
        }
    }               
    this.ctx2.putImageData(frame, 480, 300); //place chroma video over bg img
    return;
}
};

script.js

processor.doLoad();

//more stuff runs

takePicture();

function takepicture() {    
    var canv = document.getElementById('c2');               
    var photo = document.querySelector('#inptPhoto');
    var data = canv.toDataURL('image/png');
    photo.setAttribute('src', data);
}

私の画像は実際には透明ではなく、背景が白である可能性があることを示唆する別のSO投稿に出くわしました。これは私の結果と一致しています。これを行う別の方法はありますか？

4

0 に答える 0