基於udp的監視系統示例

前言

想法來源:http://nashruddin.com/Web_Based_Surveillance_System_with_OpenCV_PHP_and_Javascript

這篇文章是基於opencv,php,javascript做了一個基於網絡的監視系統。

偶雖然熟悉opencv,稍微懂點javascript,但是不懂php,所以只能另闢新徑:

服務器:通過opencv捕獲每一幀圖片,然後基於udp發送出去。

客戶端:使用activex控件嵌入網頁,activex中接受服務器發送的實時視頻文件。

系統設計

整個系統的思路比較清晰,我直接引用上面那篇博文的系統結構圖:

服務器端設計

初始化套接字庫,接下來是一系列代辦的UDP初始化設置。OpenCV初始化,開啓攝像頭,由於要網絡傳輸視頻,所以把圖片縮小1/4。需要說明一點:opencv捕獲到的視頻幀數據不能直接發送(可能是我愚鈍,不知道怎麼直接發送),所以捕獲每一幀數據以後我先寫成jpeg文件,然後再一遍讀取文件一邊發送。套接字緩存最大8K到9K,所以只能分段發送。。。

服務器端需要安裝opencv,我的版本是2.0。

最終代碼如下:

 

客戶端設計

1,首先新建一個activex的工程。activex工程中ctrl類相當於單視圖中的view類。在新建的工程ctrl類下有這麼一段代碼:

 

運行一下可以看到一個橢圓。。。這裏就是繪圖的主函數。就在這個函數中顯示自定義的對話框

2,在資源中新建對話框,因爲將來要嵌入網頁,修改對話框的屬性:

Style = child

System Menu = false

Title Bar = false

將確定,取消按鈕重命名爲:連接服務器,斷開連接。在對話框中增加一個Static Text控件顯示視頻,該控件爲IDC_IMAGE

插入新類:ClientDialog。對話框的ID = IDD_CLIENT,需要一個成員控件:IDC_IMAGE。

然後再ClientDialog類中增加udp相關的操作。

最終ClientDialog代碼如下:

 

到現在,只是定義了ClientDialog類,並沒有定義該類的實例,也就是說當運行控件以後看到的仍然是一個偌大的橢圓。所以需要修改ctrl類:

在ctr類中定義成員指針ClientDialog* m_app; ctrl的構造函數中初始化列表中置m_app爲NULL,類視圖下右擊ctrl類,屬性,重載OnCreate函數。在OnCreate函數創建對話框,OnDraw中顯示,析構函數中釋放:

ctrl類的關鍵代碼:

 

調試activex設置

工程屬性 / 調試 / 命令:C:/Program Files/Internet Explorer/iexplore.exe

工程屬性 / 調試 / 命令參數 : E:/RYF resource/UDPChat/a.html

該html內容爲:

注意html中需要一個CLSID,該ID爲activex工程下,系統自動生成的idl文件中的:

 

這裏的這個ID。。。參見我之前一篇blog:http://blog.csdn.net/dizuo/archive/2011/04/18/6331279.aspx

配置好以後,用IE調試就可以看到對話框出現。。。

 

說明一點:基於UDP連接,所以客戶端點擊“連接服務器”按鈕以後,客戶端先發送一個消息給服務器,跟服務器建立鏈接,然後服務器取得客戶端IP地址,開始發送視頻數據。代碼中服務器是每隔300ms發送一次。。。一秒3幀左右。。。

最終效果:

gif在線製作:http://gif.55.la/

 

代碼可以到我資源下載: http://download.csdn.net/source/3393178

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章