How to create video with overlays in UWP?

问题

I'm using MediaComposition to create an edited video.

The composed video will be:

• One video clip
• A set of images (overlay frames) that should be shown on top of it.

The result should be like this: https://www.youtube.com/watch?v=cFEkkQIYGBc

My current code looks like this. Each frame is an abstraction of the overlay image. I called it frames

private async Task ExportFrames(IEnumerable<OverlayFrame> frames, IStorageFile inputFile,
    IStorageFile outputFile)
{
    var folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("Test", CreationCollisionOption.ReplaceExisting);
    var composition = new MediaComposition();

    foreach (var frame in frames)
    {
        var render = new RenderTargetBitmap();
        control.DataContext = convertFunc(frame.Status);

        await render.RenderAsync(control);
        var pixel = await render.GetPixelsAsync();
        var file = await folder.CreateFileAsync("overlay.png", CreationCollisionOption.GenerateUniqueName);
        using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            var logicalDpi = DisplayInformation.GetForCurrentView().LogicalDpi;
            var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);

            encoder.SetPixelData(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Ignore,
                (uint)render.PixelWidth,
                (uint)render.PixelHeight,
                logicalDpi,
                logicalDpi,
                pixel.ToArray());

            await encoder.FlushAsync();
            stream.Dispose();
            var clip = await MediaClip.CreateFromImageFileAsync(file, frame.Duration);
            AddOverlay(composition, clip, 0, 0, control.ActualWidth, control.ActualHeight);
        }                
    }

    var originalVideo = await MediaClip.CreateFromFileAsync(inputFile);
    composition.Clips.Add(originalVideo);

    await composition.RenderToFileAsync(outputFile, MediaTrimmingPreference.Precise);
    await folder.DeleteAsync();
}

private void AddOverlay(MediaComposition composition, MediaClip overlayMediaClip, double left, double top, double width, double height)
{
    var overlayPosition = new Rect(left, top, width, height);

    var mediaOverlay = new MediaOverlay(overlayMediaClip)
    {
        Position = overlayPosition,                 
    };

    var mediaOverlayLayer = new MediaOverlayLayer();
    mediaOverlayLayer.Overlays.Add(mediaOverlay);

    composition.OverlayLayers.Add(mediaOverlayLayer);
}

In the foreach I generate a png file corresponding to the overlay information. It's generated using a RenderTargetBitmap from a control in the UI.

After the foreach loop, I add the original video (inputFile)

The problem is that the generated video only shows the original video. There's no overlay on it.

What am I doing wrong?

来源：https://stackoverflow.com/questions/52815829/how-to-create-video-with-overlays-in-uwp