[英]Create video from UI controls in UWP using Composition
I'm creating an application that takes a video and overlays sensor data from a drone.我正在创建一个应用程序,该应用程序从无人机获取视频并覆盖传感器数据。
Please, watch it in action here:请在这里观看它的实际操作:
https://youtu.be/eAOjImJci3M https://youtu.be/eAOjImJci3M
But that doesn't edit the video, it's just on the application.但这不会编辑视频,它只是在应用程序上。
My goal is to produce a new video with the overlaid data on it.我的目标是制作一个带有叠加数据的新视频。 How can I capture an element of the UI over time and make a MediaClip
out of it?如何随着时间的推移捕获 UI 的元素并从中制作MediaClip
?
Short answer : Take a screenshot of the UI with a certain interval, and then accumulate them to produce a video:简短回答:以一定的间隔截取UI的屏幕截图,然后将它们累积以制作视频:
Long answer : Let's name the UI you want to record as myGrid
, to get screenshots in an interval you can use a DispatcerTimer
, and handle the Tick
event like this:长答案:让我们将您想要记录的 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
is the MediaComposition
object I declared earlier . mc
是我之前声明的MediaComposition
对象。
When you are done recording, stop the DispatcherTimer
and save the video on the disk like this:完成录制后,停止DispatcherTimer
并将视频保存在磁盘上,如下所示:
tm.Stop();
await mc.RenderToFileAsync(file, MediaTrimmingPreference.Precise, MediaEncodingProfile.CreateMp4(VideoEncodingQuality.Vga));
tm
is the DispatcherTimer
I declared earlier and file
is a StorageFile
with mp4 extension. tm
是我之前声明的DispatcherTimer
, file
是带有 mp4 扩展名的StorageFile
。
This procedure doesn't require you to save each screenshot to disk .此过程不需要您将每个屏幕截图保存到磁盘。
If you wonder why I used an additional CanvasRenderTarget
, it's because of this problem.如果你想知道为什么我使用了一个额外的CanvasRenderTarget
,那是因为这个问题。
Hope that helps.希望有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.