使用合成从 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 ，那是因为这个问题。

希望有帮助。