Chromakey in an HTML page using SVG filter feMatrixColor

Question

I'm implementing a real-time chromakey in order to transform green pixels displayed from the webcam in the webpage, into transparent pixels.

The SVG filter that I found seems pretty powerful but it's still quite unclear for me about how to use it.

The feMatrixColor filter from SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

I found this example https://codepen.io/iamschulz/pen/MmxdMQ that is close to what I'm trying to do.

I have to calibrate the color when my application loads, and to do so I need to generate the matching color matrix.

 <feColorMatrix type="matrix" 
   values="1   0   0   0   0 
           0   1   0   0   0  
           0   0   1   0   0 
           1.5 -2  1.5 0   1" />

Above is an example where the alpha is set to zero for a defined green color. I don't use it as the perfect reference, but it works. Furthermore, I noticed that the last column do a lot in the rendering and I didn't get what's it's role. The quality of the final result varies a lot depending on this value.

I'd like to create a function which returns me a matrix with a picked color in the input but I don't understand the logic behind that matrix.

Answer 1

This is an example where I'm using an svg filter to remove the green. I've used this tool (where you can drag and drop an image) to get the right filter: https://codepen.io/enxaneta/full/ENRZGO

 <svg viewBox="0 0 90 50"> <defs> <filter id="f"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 1 -1 1 "></feColorMatrix> </filter> </defs> <g filter="url(#f)"> <rect fill="red" width="30" height="50" /> <rect fill="green" x="30" width="30" height="50" /> <rect fill="blue" x="60" width="30" height="50" /> </g> </svg>