How to Create your own Video Editor for Windows 10

Did you know that Windows 10 SDK provides a simple and yet powerful library for basic video editing? If you are up to the great idea or just want to improve your existing application with such a feature, Windows.Media.Editing namespace is a great tool to do that easily!

I spent the last few months developing the Universal Windows application called Flashback Beta, which allows you to create videos from your clips, photos, and music. The application uses namespace Windows.Media.Editing and provides basic video editing features like trimming, creating photo slideshows and organizing a composition in a really simple manner. Moreover, you can select background music, apply photo filters or add titles.

Thanks to the great developers at Microsoft, these operations are easy and can be done with a few lines of code. In addition, it’s universal and works on every Windows 10 device 🙂 In the end, you can make the app as following, without any audio/video processing knowledge.

Trimming

The editing namespace works with objects of MediaClip class, which can represent a single clip created from a video file, photo or a solid color. Trimming is done by the simple set of two parameters: TrimTimeFromStart and TrimTimeFromEnd.

var mediaClip = await MediaClip.CreateFromFileAsync(file);
mediaClip.TrimTimeFromStart = TimeSpan.FromSeconds(3);
mediaClip.TrimTimeFromEnd = TimeSpan.FromSeconds(1.5);

Building composition

An object of MediaComposition class is used as a timeline. All clips, overlays and background audio tracks are appended here, while composition provides functions for preview and rendering a final movie.

var mediaComposition = new MediaComposition();
var mediaClip = await MediaClip.CreateFromFileAsync(file);
mediaComposition.Clips.Add(mediaClip);

Previewing video

Preview of the final video can be shown in MediaElement.

<MediaElement x:Name="mediaElement" AutoPlay="True" AreTransportControlsEnabled="True"/>

var mediaStreamSource = composition.GeneratePreviewMediaStreamSource((int)mediaElement.ActualWidth, (int)mediaElement.ActualHeight);
mediaElement.SetMediaStreamSource(mediaStreamSource);

Adding background music

Adding a song to the composition and its trimming is also very simple.

var backgroundAudioTrack = await BackgroundAudioTrack.CreateFromFileAsync(file);
backgroundAudioTrack.TrimTimeFromStart = TimeSpan.FromSeconds(5);
backgroundAudioTrack.Volume = 0.5;
mediaComposition.BackgroundAudioTracks.Add(backgroundAudioTrack);

Saving video file

MediaComposition provides an asynchronous task to save the final video into the .mp4 file.

await mediaComposition.RenderToFileAsync(file);

Effects

But, all of these has been available since Windows Phone 8.1, so what has been improved? The UWP version of Windows.Media.Editing namespace provides new interfaces like IBasicVideoEffect, IBasicAudioEffect, and IVideoCompositor that allows you to create custom video and audio effects and overlays.

Those effects process every video frame as an image, while you can use SDKs like Win2D or Lumia.Imaging to do whatever you want! Let’s take a look at the example of the saturation video effect.

public void ProcessFrame(ProcessVideoFrameContext context)
{
    using (CanvasBitmap inputBitmap = CanvasBitmap.CreateFromDirect3D11Surface(_canvasDevice, context.InputFrame.Direct3DSurface))
    using (CanvasRenderTarget renderTarget = CanvasRenderTarget.CreateFromDirect3D11Surface(_canvasDevice, context.OutputFrame.Direct3DSurface))
    using (CanvasDrawingSession ds = renderTarget.CreateDrawingSession())
    {
        var saturation = new SaturationEffect()
        {
            Source = inputBitmap,
            Saturation = 0.4f
        };
        ds.DrawImage(saturation);
    }
}

Result

https://github.com/martinbojnansky/Flashback-Beta

Recommended sources

1. https://msdn.microsoft.com/en-us/windows/uwp/audio-video-camera/media-compositions-and-editing
2. https://channel9.msdn.com/events/Build/2015/3-634
3. http://codingcoda.com/posts/2015/04/30/creative-video-experiences-with-the-universal-windows-platform/
4. https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples