Build 2015 and Video Effects

We’re keeping the coding going with this next post in the series of technical articles following the Build 2015 conference. This post is dedicated to the new video functionality provided in Windows 10. Increasingly, we’re hearing from developers the importance of adding improved user experiences for their apps. Those experiences include not only better design, increasingly the need for improved audio and video functionality has become important. In my last post I showed the audio functionality that we demonstrated in the Build keynote. This post is dedicated to one of the demos that we didn’t have time to show. And it’s pretty cool – focused on video and Windows 10.

So what is so special about the video functionality in Windows 10? I think that’s best seen through a comparison of code. Let’s look at the before and after for doing a relatively simple video effect. In this case we’re simply taking a video effect and adding a greyscale effect to it.

Here is the code in C++ that’s required to do this. As you can see it’s nearly 1500 lines of C++ code to perform this effect. The original version of this app is here. Now if we look at the Windows 10 version of that same code, you can see it’s dramatically simplified and it is easily programmed to in C#.

 
public void ProcessFrame(ProcessVideoFrameContext context) {
   using (var inputBitmap = CanvasBitmap.CreateFromDirect3D11Surface
(_canvasDevice, context.InputFrame.Direct3DSurface)) using (var drawingSurface =
CanvasRenderTarget.CreateFromDirect3D11Surface
(_canvasDevice, context.OutputFrame.Direct3DSurface).CreateDrawingSession()) { // TODO 1: create a grayscale effect #region grayscale // grayscale effect var grayscale = new Microsoft.Graphics.Canvas.Effects.SaturationEffect() { Saturation = 0, Source = inputBitmap }; #endregion

As you can see, first we process a frame. Then we create a Direct 3D surface. Next we create a drawing session. Finally, the core code is really as simple as:

 new Microsoft.Graphics.Canvas.Effects.SaturationEffect()	
     {	
      Saturation = 0,	
      Source = inputBitmap	
     };	

It’s the deep engineering work that we did with the Windows team that radically simplifies the creation of video effects like this one. In fact in the sample on Github: https://github.com/nmetulev/Effective we’ve added a few other simple effects to show you how to get started.

I’m looking forward to seeing what you do with it.

Leave a Reply

Your email address will not be published. Required fields are marked *