10

このチュートリアルを読んで、この例を試しました。そこで、自分のテスト用に Web からビデオをダウンロードしました。私がしなければならないのは、if条件でrgb値を微調整することだけです

HERE は例のサンプルコードです

computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
    let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }

チュートリアルの例では、黄色（私が推測する黄色ではない）の色をフィルタリングしています。ダウンロードしたサンプル動画は緑色の背景を使用しています。したがって、if条件でrgb値を微調整して、望ましい結果を取得しました

何度か試した後、私はこれを得ることができました。

ここに画像の説明を入力

ここで知りたいのは、グリーン スクリーン (またはその他のスクリーン) を推測せずに完全に正確に除外する方法です。または値をランダムに微調整します。

推測するだけで、完全に正しくなるまでに何時間もかかります。これは、実際のアプリケーションを使用した単なるサンプルです。もっとかかるかもしれません。

注: この例は、現時点では Firefox で動作しています..

4

2 に答える 2

11

おそらく、より良いアルゴリズムが必要なだけです。これは完璧ではありませんが、はるかに簡単に微調整できます。

やるだけやろ

基本的には、カラーピッカーが必要で、ビデオから最も明るい値と最も暗い値を選択します (RGB 値をそれぞれ l_ 変数と d_ 変数に入れます)。必要に応じて許容範囲を少し調整できますが、カラー ピッカーで異なる領域を選択して l_ と r_ の値を適切に設定すると、より適切なキーが得られます。

let l_r = 131,
    l_g = 190,
    l_b = 137,

    d_r = 74,
    d_g = 148,
    d_b = 100;

let tolerance = 0.05;

let processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },

  doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth;
        self.height = self.video.videoHeight;
        self.timerCallback();
      }, false);
  },

  calculateDistance: function(c, min, max) {
      if(c < min) return min - c;
      if(c > max) return c - max;

      return 0;
  },

  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
        let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let _r = frame.data[i * 4 + 0];
      let _g = frame.data[i * 4 + 1];
      let _b = frame.data[i * 4 + 2];

      let difference = this.calculateDistance(_r, d_r, l_r) + 
                       this.calculateDistance(_g, d_g, l_g) +
                       this.calculateDistance(_b, d_b, l_b);
      difference /= (255 * 3); // convert to percent
      if (difference < tolerance)
        frame.data[i * 4 + 3] = 0;
    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }
};
// :/
于 2016-07-17T12:01:22.237 に答える
3

パフォーマンスが問題にならない場合は、HSV などの別の色空間で作業できます。左上のピクセルを参照として使用できます。

基準点の色相値を他のピクセルの色相値と比較し、特定のしきい値を超えるすべてのピクセルと、彩度と値を使用して暗い領域と明るい領域を除外します。

ただし、色のにじみを完全に取り除くことはできません。色補正/彩度低下を行う必要がある場合があります。

function rgb2hsv () {
    var rr, gg, bb,
        r = arguments[0] / 255,
        g = arguments[1] / 255,
        b = arguments[2] / 255,
        h, s,
        v = Math.max(r, g, b),
        diff = v - Math.min(r, g, b),
        diffc = function(c){
            return (v - c) / 6 / diff + 1 / 2;
        };

    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {
            h = bb - gg;
        }else if (g === v) {
            h = (1 / 3) + rr - bb;
        }else if (b === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: Math.round(s * 100),
        v: Math.round(v * 100)
    };
}


let processor = {
  timerCallback: function() {
    if (this.video.paused || this.video.ended) {
      return;
    }
    this.computeFrame();
    let self = this;
    setTimeout(function () {
        self.timerCallback();
      }, 0);
  },

  doLoad: function() {
    this.video = document.getElementById("video");
    this.c1 = document.getElementById("c1");
    this.ctx1 = this.c1.getContext("2d");
    this.c2 = document.getElementById("c2");
    this.ctx2 = this.c2.getContext("2d");
    let self = this;
    this.video.addEventListener("play", function() {
        self.width = self.video.videoWidth / 2;
        self.height = self.video.videoHeight / 2;
        self.timerCallback();
      }, false);
  },

  computeFrame: function() {
    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
        let l = frame.data.length / 4;


    let reference = rgb2hsv(frame.data[0], frame.data[1], frame.data[2]);

    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      let hsv = rgb2hsv(r, g, b);

      let hueDifference = Math.abs(hsv.h - reference.h);

      if( hueDifference < 20 && hsv.v > 50 && hsv.s > 50 ) {
        frame.data[i * 4 + 3] = 0;
      }


    }
    this.ctx2.putImageData(frame, 0, 0);
    return;
  }
};
于 2016-07-17T12:25:29.333 に答える