前言
想法來源: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