在C＃.Net WinForms / WPF中合成/混合视频的方法或框架 [英] Methods or frameworks for compositing/blending videos in C# .Net WinForms/WPF

问题描述

我想在WinForm（C＃.Net）应用程序中从网络摄像头添加一些图形/图表。在WinForms / WPF应用程序中为视频动态添加一些图像的最佳方法是什么？请查看下面的图片，以便更好地了解我正在努力实现的目标。我希望通过网络摄像头实时流媒体视频实现此功能，例如Google环聊效果。



基本上我想要做的是混合两个视频，或混合图像和视频。



http://www.nzembassy.com/sites/default/files/bigstock-businessmen-hand-touch-screen-55533974_0.jpg [ ^ ]



如果问题太宽泛，正确的技术术语进行一些研究将是一个很大的帮助，因为我是视频处理的新手。我已经找到了像数字合成，alpha混合，水印等术语。还有一些框架/ API，如AForge.NET和Splicer。我在这里找到了一些有用的参考：从字形识别到增强现实 [ ^ ]，我现在正在提及它。在此之后是否有最新的技术？ （这篇文章有点老了）



我已经做了几天的研究。我找到了很多像OpenCV，EMGU，ImageMagic等等的库，但我找不到我想要的东西。否则我在寻找起点时遇到困难。我想要添加的不是简单的图像，我想添加带有动画和3D旋转的工作图形和图表。任何指导将不胜感激。谢谢。

I want to add some graphs/charts within a video from webcam, in a WinForm(C# .Net) application. What is the best way to add some images dynamically to a video in WinForms/WPF application? Please check the following image to get a better idea about what I'm trying to achieve. I want to achieve this on live streaming video from webcam, like Google hangout effects.

Basically what I want to do is blending two videos, or blending image and video.

http://www.nzembassy.com/sites/default/files/bigstock-businessmen-hand-touch-screen-55533974_0.jpg[^]

If the question feels too broad, correct technical terms to do some research will be a great help, as I' a newbie in video processing. I have already found terms like Digital compositing, alpha blending, watermarking etc. Also some frameworks/APIs like AForge.NET and Splicer. I found some useful reference here: From glyph recognition to augmented reality[^], and I'm referring it now. Is there any latest technology which came after this? (This article is bit old)

I have done days of research on this. I have found many libraries like OpenCV, EMGU, ImageMagic and many more, but I couldn't find something which I'm looking for. Or else I'm finding difficulties in getting a starting point. What I want to add is not simple images, I want to add working graphs and charts with animation and 3D rotations. Any guidance will be appreciated. Thank you.

推荐答案

Paulson George写道：

Paulson George wrote:

我还在项目的设计阶段，所以我会去WPF。如果您熟悉在WPF应用程序中为视频添加叠加层，请提供一些参考资料吗？

I'm still in the design phase of the project, so I'll go for WPF then. Could you please provide some reference if you are familiar with adding overlays to video in WPF apps?

当然。首先，一些介绍：



过去，我看到我的同事制作了一些原始框架，以便在系统的视频中显示一些元数据。 Windows.Forms ，用于显示一些元数据，名称坐标等。如果使用常用图形执行此操作，则擦除图形下面的视频。这个人挖到了DirectX，设法利用DirectX Overlay Manager，在那个管理器中呈现了带有文本的愚蠢框架，成功了。表单使用GDI +，它本身与DirectX不兼容。 DirectX和GDI试图互相忽视。



WPF本身是基于DirectX的，因此，几年前，当它可用时，我试图先尝试一下，期待我可以在视频前放置一些UI元素，而不需要任何努力，并且看到视频和那些元素。当然，这就是发生的事情。



我需要一些时间来思考如何在最简单的例子中展示它。所以，看看这个WPF窗口：

Sure. First, some introduction:

In the past, I saw my colleague making some primitive frame to show some metadata in from of video in System.Windows.Forms, to show some metadata, name coordinates, etc. If you do it with usual graphics, the video underneath "wipes" graphics. This person dug into DirectX, managed to utilize "DirectX Overlay Manager", rendered that stupid frame with text in that manager, succeeded. Forms use GDI+ which itself does no work well with DirectX. DirectX and GDI try to ignore each other.

WPF is itself based on DirectX, so, when it became available, years ago, I tried to experiment with that first, expecting that I can just put some UI elements in front of video, without any efforts, and see both video and those element. Naturally, this is what happened.

I needed some time to think how to show it on a simplest possible example. So, look at this WPF window:

<Window x:Class="OverVideo.Ui.MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <MediaElement Source="test.avi"/>
        <Canvas Opacity="0.6">
            <Rectangle Canvas.Left="20" Canvas.Top="15"

                Width="80" Height="140" Fill="Red" Stroke="Black"/>
        </Canvas>
    </Grid>
</Window>

仅供演示，我放两个UI元素一个在另一个上面，以一种最简单的方式：我在窗口的逻辑树顶部放了一个 Grid 的实例，有两个子节点： MediaElement 和网格。这只是叠加两个或多个元素的一种可能方法：默认情况下， Grid 实例的这两个子元素具有相同的依赖属性值 Canvas。行和 Canvas.Column ，因此采取相同的立场。另一种方法是将一些元素放在 Canvas 的实例上。



那么，为什么帆布？因为这是元素允许元素自由定位在它上面。换句话说，这是通常用于矢量图形的东西。这对于WPF来说并不常见，其中所有元素都根据其在逻辑树中的位置以及所有这些边距和填充设置自动对齐。出于演示目的，我在画布上只放了一个元素：半透明的 Rectangle （参见 Opacity 属性）。将此矩形视为图表元素的原型。 :-)



请注意 Canvas的不透明度 实例本身是默认的（1，完全不透明），但你仍然可以看到没有孩子的地方。如果为 Canvas 设置不透明度，它将应用于其所有元素，因此您将有一些组合不透明度。



是的，我只是将一些视频文件test.avi复制到输出目录，只是为了简单起见。因此，当我启动应用程序时，视频立即开始播放，您可以在半透明矩形后面看到视频部分。 Viola！



现在，因为 Canvas 实例的所有孩子现在都是在逻辑树的顶部，您可以立即向它们添加任何鼠标和键盘事件处理程序，以便您可以移动它们，转换等等。我认为这就是实现目标所需要的全部。



您可以使用不同的方法将UI元素置于视频之上。您可以使用 Grid ，我刚刚演示过，您可以将视频放在 Canvas 上，其他一些元素也可以顶部，您可以考虑使用 adorners 这样的东西： http://msdn.microsoft.com/en-us/library/ms743737%28v=vs.110%29.aspx [ ^ ]。



请参阅：

http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement%28VS.95%29.aspx [ ^ ]，

http://msdn.microsoft。 COM / EN-U s / library / system.windows.controls.canvas％28v = vs.110％29.aspx [ ^ ]。



我的小问题是通过视频和至少一些WPF的介绍给你一个想法，但这并不是那么容易，部分原因是因为这不是WPF最典型的用法。所以不要认真对待我的介绍，自己学习。



参见：

http://msdn.microsoft.com/en-us/library/ms754130%28v=vs.110%29。 aspx [ ^ ]，

http://msdn.microsoft.com/en-us/library/ms750441%28v=vs.110%29.aspx [ ^ ]，

http://msdn.microsoft.com/en-us/library/ms752914%28v=vs.110% 29.aspx [ ^ ]，

http://msdn.microsoft.com/en-us/library/ms753391%28v=vs.110%29.aspx [ ^ ]，

http://msdn.microsoft.com/en -us / library / ms745058％28v = vs.110％29.aspx [ ^ ]，

http ：//wpftutorial.net/LayoutProperties.html [ ^ ] 。



对于图表，你可以使用，例如，你的.NET版本的Microsoft图表控件。

图表上的一些链接：

http://www.c-sharpcorner.com/uploadfile/马赫什/茶rting-in-wpf [ ^ ]，

https：// code。 msdn.microsoft.com/windowsapps/Chart-Control-in-WPF-c9727c28 [ ^ ]，

http://wpf.codeplex.com/releases/view/40535 [ ^ ]。



此CodeProject文章也很有用： WPF工具包图表控件（线条，条形，面积，饼图，柱系列）演示 [ ^ ]。

-SA

Just for demonstration, I put two UI elements one on top of another, in one of the simplest possible way: I put an instance of Grid on the window's logical tree top, with two children: MediaElement and Grid. This is just one possible ways to superimpose two or more elements: by default, these two children of Grid instance has the same values of dependency property Canvas.Row and Canvas.Column and, hence, take the same position. Another way would be putting some elements on the instance of Canvas.

So, why Canvas? Because this is element allows free positioning of elements on it. In other words, this is something which is usually used for vector graphics. This is not typical for WPF, where all elements are automatically aligned according its position in logical tree and all those margin and padding settings. For demonstration purpose, I put just one element on the canvas: a semi-transparent Rectangle (see Opacity attribute). Consider this rectangle as a prototype for your chart element. :-)

Note that the Opacity of the Canvas instance itself is default (1, full opacity), but you can still see through it, where there is not children. Should you set Opacity for Canvas, it would be applied to all its elements, so you would have some combined opacity.

And yes, I just copied some video file "test.avi" to the output directory, just for simplicity. So, when I start the application, video starts to play immediately, and you can see the portion of video behind the semi-transparent rectangle. Viola!

Now, as all the children of the Canvas instance are now on top of the logical tree, you can add any mouse and keyboard event handlers immediately to them, so you can move them around, transform, and so on. I think this is all you need to achieve your goals.

You can use different approaches for putting UI elements on top of video. You can use Grid as I just demonstrated, you can put video on the Canvas, too, with some other elements on top, and you can consider using such thing as adorners: http://msdn.microsoft.com/en-us/library/ms743737%28v=vs.110%29.aspx[^].

Please see:
http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement%28VS.95%29.aspx[^],
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas%28v=vs.110%29.aspx[^].

My little problem was to give you the idea with video and at least some introduction to WPF, but this was not so easy, in part, because this is not the most typical use of WPF. So don't take my introduction serious, learn it yourself.

See also:
http://msdn.microsoft.com/en-us/library/ms754130%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms750441%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms752914%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms753391%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms745058%28v=vs.110%29.aspx[^],
http://wpftutorial.net/LayoutProperties.html[^].

For charting, you can use, for example, Microsoft Charts controls for your version of .NET.
Some links on charting:
http://www.c-sharpcorner.com/uploadfile/mahesh/charting-in-wpf[^],
https://code.msdn.microsoft.com/windowsapps/Chart-Control-in-WPF-c9727c28[^],
http://wpf.codeplex.com/releases/view/40535[^].

This CodeProject article can also be useful: WPF Toolkit Charting Controls (Line, Bar, Area, Pie, Column Series) Demo[^].

—SA

这篇关于在C＃.Net WinForms / WPF中合成/混合视频的方法或框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！