Green screen in WPF

Question

We have a video that we need to show with the button, but we want the background of the button to show, and we can’t put the background in the video, because the button can resize and the background needs to stretch to the size of the button, but not the video. The video should support aspect ratio, so I wonder if there is a way to do something like a green screen in WPF, so we can put a green background on the video and a button to ignore it to show its own background.

I know this is a long shot, but any suggestion is very welcome.

Thanks!

Answer 1

Ok, I found a solution. 4 easy steps.

1) Download and install Shader Effects BuildTask and templates

2) Download the WPF Pixel Shader library . Open the solution in the MainSolution folder and right-click on the WPFShaderEffectLibrary file to compile it, and then add the link to the compiled DLL in your project. NOTE. Just compile WPFShaderEffectLibrary, if you try to compile the whole solution, it probably won't work.

3) Use pixel shaders as follows (I used it in the MainWindow constructor, but that doesn't really matter):

public MainWindow() { InitializeComponent(); ColorKeyAlphaEffect effect = new ColorKeyAlphaEffect(); Brush brush = Effect.ImplicitInput; effect.Input = brush; // This is the Image control in your xaml. It should contain // the image in which you want the green screen effect imageControl.Effect = effect; } 

You will need the following libraries:

 using System.Windows; using System.Windows.Media; using System.Windows.Media.Effects; using ShaderEffectLibrary; 

4) The shader only works with black, so you need to change something to make it work with green (or any other color you like), in my case I was looking for work with green (e.g. greenscreen), so I changed effect value. In the solution that you downloaded from Codeplex, you need to go to the WPFShaderEffectLibrary project -> File ShaderSource ColorKeyAlpha.fx. There you should change the following code:

  float4 main(float2 uv : TEXCOORD) : COLOR { float4 color = tex2D( implicitInputSampler, uv ); // FROM THIS if( color.r + color.g + color.b < 0.3 ) { color.rgba = 0; } return color; } 

For this

 float4 main(float2 uv : TEXCOORD) : COLOR { float4 color = tex2D( implicitInputSampler, uv ); // TO THIS if( color.r == 0 && color.g == 1.0 && color.b == 0 ) { color.rgba = 0; } return color; } 

Once this is done, recompile the WPFShaderEffectLibrary project and update the link in your project (the one that is in step 2). After the link is updated, PixelShader will begin to make the green values ​​(R = 0, G = 255, B = 0) completely transparent. And it will work with both images and video.

It was really hard for me to achieve this, I hope that it is useful for everyone who reads this :).

Thanks!

Answer 2

Do a search for the "chromakey wpf" effect for various examples