使用合成从 UWP 中的 UI 控件创建视频

Question

我正在创建一个应用程序，它可以拍摄视频并覆盖无人机的传感器数据。

请在此处观看实际操作：

https://youtu.be/eAOjImJci3M

但这不会编辑视频，它只是在应用程序上。

我的目标是制作一个带有叠加数据的新视频。如何随着时间的推移捕获 UI 元素并从中制作MediaClip？

Answer 1

简答：按一定的时间间隔截取UI截图，然后累积生成视频：

长答案：让我们将您要录制的 UI 命名为 myGrid，要在间隔内获取屏幕截图，您可以使用 DispatcerTimer，并像这样处理 Tick 事件：

private async void Tm_Tick(object sender, object e)
{
    RenderTargetBitmap rendertargetBitmap = new RenderTargetBitmap();
    await rendertargetBitmap.RenderAsync(myGrid);
    var bfr = await rendertargetBitmap.GetPixelsAsync();

    CanvasRenderTarget rendertarget = null
    using (CanvasBitmap canvas = CanvasBitmap.CreateFromBytes(CanvasDevice.GetSharedDevice(), bfr, rendertargetBitmap.PixelWidth, rendertargetBitmap.PixelHeight, Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized))
    {
        rendertarget = new CanvasRenderTarget(CanvasDevice.GetSharedDevice(), canvas.SizeInPixels.Width, canvas.SizeInPixels.Height, 96);
        using (CanvasDrawingSession ds = rendertarget.CreateDrawingSession())
        {
            ds.Clear(Colors.Black);
            ds.DrawImage(canvas);
        }
    }
    MediaClip m = MediaClip.CreateFromSurface(rendertarget, TimeSpan.FromMilliseconds(80));
    mc.Clips.Add(m);
}

mc 是我之前声明的MediaComposition 对象。

录制完成后，停止DispatcherTimer 并将视频保存在磁盘上，如下所示：

tm.Stop();
await mc.RenderToFileAsync(file, MediaTrimmingPreference.Precise, MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Vga));

tm 是我之前声明的 DispatcherTimer，file 是带有 mp4 扩展名的 StorageFile。

此过程不需要您将每个屏幕截图保存到磁盘。

如果你想知道我为什么使用额外的CanvasRenderTarget，那是因为this 的问题。

希望对您有所帮助。