如何解決WPF中在攝像頭視頻上疊加控件的問題

這篇文章給大家分享的是有關(guān)如何解決WPF中在攝像頭視頻上疊加控件的問題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

WPF（Windows Presentation Foundation）是微軟推出的基于Windows 的用戶界面框架，屬于.NET Framework 3.0的一部分。它提供了統(tǒng)一的編程模型、語言和框架，真正做到了分離界面設(shè)計人員與開發(fā)人員的工作；同時它提供了全新的多媒體交互用戶圖形界面。

一、視頻呈現(xiàn)

　　前段時間，在一個wpf的項目中需要實時顯示ip攝像頭，對此的解決方案想必大家都應(yīng)該知道很多。在winform中，我們可以將一個控件（一般用panel或者pictruebox）的句柄丟給攝像頭的sdk以實現(xiàn)該功能，而在wpf中我們同樣可以使用該方案快速實現(xiàn)。

　　我們以?？灯脚_為例，?？档膕dk就需要我們傳遞一個控件的句柄，winform中可以直接使用控件的handle屬性來獲取句柄，而在wpf中我們則有兩種方法：

　　1、將WindowsFormsHost作為容器在內(nèi)部嵌套一個winform控件，比如panel，這樣的話就和winform中一樣了；

　　2、直接使用    ((HwndSource)PresentationSource.FromVisual(你的wpf元素)).Handle;  獲取句柄；

二、疊加控件

　　簡單的視頻展示使用一中的方案就可以解決，但我接手的項目是一個將攝像頭視頻用以AR處理的程序，界面上需要展示很多圖標(biāo)和信息欄，最重要的是整個主程序的大背景就是實時的攝像頭畫面，除此之外還有各種子窗口，子窗口中也要用到視頻，這樣就必然涉及到在視頻畫面上疊加控件的難題。　　

　　1、使用Microsoft.DwayneNeed

　　之所以說是難題，是微軟也在試圖解決卻也沒有給出真正完美的解決方案。這個難題就是著名的空域問題（airspace issues）。這里有一份園友的隨筆鏈接，主要介紹的是微軟目前的解決方案：https://www.jb51.net/article/110896.htm，這套方案在我實際使用中雖然可以正常的在視頻上疊加控件，但在上方拖動控件則非?？D，通常的情況就是鼠標(biāo)已經(jīng)移動到了右側(cè)，被拖控件還在左側(cè)依依不舍，即便是release版本也無濟于事，這套方案最終流產(chǎn)?！?/p>

　　2、將視頻流轉(zhuǎn)碼，使用d3d渲染為ImageSource

　　此方案比較麻煩，需要自己控制轉(zhuǎn)碼過程，這里有一篇關(guān)于此方案的文章鏈接：https://www.jb51.net/article/110898.htm，我這里準(zhǔn)備了一份demo（非本人編寫）：https://pan.baidu.com/s/1i59OZC5，以下是demo運行的截圖：

　　大致的原理就是利用sdk的回調(diào)機制逐幀獲取碼流，再使用direct進行渲染；

　　此方案除了代碼量相對多點之外還存在和1中同樣的問題，控件拖動時依然卡頓，各位園友不知有何好的解決辦法呢。

　　3、最終的解決方案

　　在1和2都達不到理想中的要求時，我突然意識到一個問題，為什么會出現(xiàn)空域問題？那是因為winform和wpf的渲染方式不同，如果將他們統(tǒng)一，問題是不是解決了？只能說解決了一半，如果需要疊加的控件是規(guī)規(guī)矩矩的矩形，換句話說，不需要透明通道的那些控件，則完全可以使用這套方案，但是像那些有圓角的控件還需要另外想辦法，我們先說前者吧，簡單的代碼如下：

<wfi:WindowsFormsHost>
 <wf:Panel/>
</wfi:WindowsFormsHost>
<wfi:WindowsFormsHost Width="114" Height="152">
　　<ElementHost>
　　　　<Border Width="114" Height="152"/>
　　</ElementHost>
</wfi:WindowsFormsHost>

　　其實就是在 WindowsFormsHost再套一個ElementHost，現(xiàn)在無論是視頻的panel還是在其上方的border控件由于都被WindowsFormsHost所包含，所以border在渲染時不會被覆蓋到底層了。

　　下面再談?wù)勎覀€人認(rèn)為最難的不規(guī)則控件的疊加方式，如果你能在wpf應(yīng)用中通過代碼讓W(xué)indowsFormsHost背景透明，那么你不需要再繼續(xù)往下看了，請你聯(lián)系我，我認(rèn)為這才是最好的解決方案，而接下來我要說的方案可能會讓你們不屑，甚至嘲笑。

　　我的辦法很簡單，就是使用兩個窗口，底部窗口單獨顯示視頻，并設(shè)置為主窗口，頂部窗口設(shè)置AllowsTransparency="True"，ShowInTaskbar="False"，在顯示頂部窗口時使用showdialog而不是show，這樣能夠保證用戶永遠在頂部窗口上操作，到不了視頻窗口。針對子窗口的情況，雖然可以用popup來模擬上述過程，但popup也有很多問題，他默認(rèn)是置頂?shù)?，有時會給用戶帶來困惑，比如兩個子窗口重疊時，明明帶視頻的那個窗口在底部，但由于其中的視頻部分使用的是popup來展示的，它居然會顯示在頂層窗口之上，完美實現(xiàn)了窗口洗牌的特效，除此之外你還需要通過特殊的偏移量才能控制popup的位置，鑒于此，我建議你單獨定制一個專門用來彈出信息的窗體，再將包含視頻的控件作為子元素傳入其中。

　　最終的解決方案是結(jié)合這三種，由于主界面是個實時視頻大背景，所以任何拖動的操作都不該延遲，所以主界面用了3號解決方案，而一些子界面不涉及到在上方拖動的操作，則可以用1號方案，至于2號方案則可以用來兼容各大視頻平臺，例如有些視頻平臺不支持句柄的傳入，則可以使用該方案。

感謝各位的閱讀！關(guān)于“如何解決WPF中在攝像頭視頻上疊加控件的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！