自己動手實現純Web遠端監控系統
想不想能夠在網上看到自己家裡的情況?羅技的網路攝像頭又貴效果又不好,而且就只能擺一個死角度,而且頁面上要安裝外掛,專業的監控系統死貴死貴,而且還是要用外掛或者專門的軟體,甚至有的還有埠限制,防火牆穿透能力極差。我們現在的目標就是在有限的資金投入下實現一個純Web(沒有專用外掛),跨瀏覽器,支援攝像頭的控制(水平270度,垂直210度,帶變焦)的遠端監控系統。甚至還能支援拍照和錄影功能。
首先由於資金有限,所以我們軟體不準備花一分錢,全部自己來寫。硬體只要能滿足要求我們用最便宜的(如果硬體肯多花錢當然效果也會好很多)
下面是我們需要採購的清單,部分比較昂貴的裝置我參考了淘寶的價格。
產品 |
規格 |
價格 |
雲臺 |
301雲臺 |
150(淘寶價) |
雲臺解碼板 |
自帶電源的萬用解碼板 |
320 |
攝像頭 |
1/3" SONY ICX 409AK Color |
420(淘寶價) |
RS232-RS485轉換頭 |
通用 |
45 |
視訊採集卡 |
視訊採集卡--影視大師豪華版 (三諾) |
180(淘寶價) |
網線、串列埠線 |
超6類網線2根、RS232線一根 |
當然為了安裝這些硬體我們還需要一些工具比如網線鉗,電烙鐵,焊錫絲等。
為了能夠實現我們之前所提到的功能,我們需要分三個步驟來完成。
第一個步驟是硬體安裝。那麼第一步就是找個穩定的安裝面把雲臺裝好,具體的安裝過程就不說了,擰螺絲,會吧。
接下來需要把攝像頭的資料線和控制線接好,資料線就是常規的AV線,控制線就是用網線自己焊的,接頭在攝像頭的包裝盒裡有。雲臺的控制線也是一樣。然後我們就把雲臺和攝像頭的控制線按照說明書上的格式在解碼板上安裝好,然後設定解碼板的協議格式為pelco-d(具體的設定方式在說明書上有)。控制訊號是通過串列埠傳送的,我們將串列埠線接到電腦的串列埠上,另一端接到轉介面頭,轉接頭的Rs485這一端用網線就行了,只需要兩根線芯就行了,這根網線的另一端接到解碼板上就行了。至此控制鏈路的物理鏈路就打通了。連通性測試可以用萬用表來完成。
第二步就是打通視訊鏈路,首先是把採集卡裝到電腦上,然後把av線插到採集卡上就行了。好了現在硬體都搞定了我們就可以來搞定軟體了。
首先我們要實現雲臺的控制。雲臺控制是通過串列埠來實現,電腦的串列埠通過pelco-d協議與雲臺解碼板通訊。pelco-d協議介紹
我們要自己實現這個協議,由於這個協議很簡單,而且我們只有一個雲臺需要控制,所以就把地址位寫死成01,然後所有的指令都固化成為一個長度為7 的Byte陣列。上下左右+前後變焦+停止,一共7個指令我們用七個陣列來寫死:
1using System;
2using System.Collections.Generic;
3using System.Text;
4
5namespace PelcoDLib
6{
7 class ControlData
8 {
9 // 保留 地址 指令1 指令2 資料1 資料2 驗證10publicstaticbyte[] Up ={ 0xff, 0x01, 0x00, 0x10, 0x00, 0x3f, 0x50 };
11 publicstaticbyte[] Down ={ 0xff, 0x01, 0x00, 0x08, 0x00, 0x3f, 0x48 };
12 publicstaticbyte[] Left ={ 0xff, 0x01, 0x00, 0x04, 0x3f, 0x00, 0x44 };
13 publicstaticbyte[] Right ={ 0xff, 0x01, 0x00, 0x02, 0x3f, 0x00, 0x42 };
14
15 publicstaticbyte[] Forward ={ 0xff, 0x01, 0x00, 0x20, 0x00, 0x00, 0x21 };
16 publicstaticbyte[] Back ={ 0xff, 0x01, 0x00, 0x40, 0x00, 0x00, 0x41 };
17
18 publicstaticbyte[] Stop ={ 0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00 };
19
20 publicstaticbyte[] FocusForward ={ 0xff, 0x01, 0x00, 0x80, 0x00, 0x00, 0x81 };
21 publicstaticbyte[] FocusBack ={ 0xff, 0x01, 0x01, 0x00, 0x00, 0x00, 0x02 };
22
23 publicstaticbyte[] SetPoint ={ 0xff, 0x01, 0x00, 0x03, 0x00, 0x01, 0x05 };
24 publicstaticbyte[] GotoPoint ={ 0xff, 0x01, 0x00, 0x07, 0x00, 0x01, 0x09 };
25
26 publicstatic SortedDictionary<string, byte[]> Commands =new SortedDictionary<string, byte[]>();
27
28 static ControlData()
29 {
30 Commands.Add("up", Up);
31 Commands.Add("down", Down);
32 Commands.Add("left", Left);
33 Commands.Add("right", Right);
34 Commands.Add("for", Forward);
35 Commands.Add("back", Back);
36 Commands.Add("ffor", FocusForward);
37 Commands.Add("fback", FocusBack);
38 Commands.Add("setp", SetPoint);
39 Commands.Add("gop", GotoPoint);
40 }41
42 }43}44
然後我們通過串列埠通訊的類傳送這些指令就行了,下面是控制雲臺向上運動的方法:
1publicstaticvoid Up()
2 {
3 using (SerialPort port = GetPort())
4 {
5 if(!port.IsOpen)
6 port.Open();
7 port.Write(ControlData.Commands[ConfigurationManager.AppSettings["up"]], 0, 7);
8 }9 }
注意一點:一旦執行了指令雲臺就會一直按照這個指令運動下去,直到執行Stop指令為止。
最後我們只需要能夠在頁面上執行到這些方法就能控制雲臺了,所以我們在電腦上配置好IIS,建立一個站點,在站點上建立一個頁面,我們通過這個頁面獲取指令的引數來呼叫相應的方法。
比如
private void GoUp()
{
cam.Up();
}
之後我們用ajax去呼叫這個頁面,就實現了控制雲臺的功能,我是用的flash用loadvars的方式去呼叫的,異曲同工不是麼。
實現視訊的方法要簡單一些,我們可以用media encoder+media Service來實現,不過這個組合的延遲太嚴重了,大概十多而是秒,這個時候操作會變得很奇怪,所以我用的flash encoder+fms來實現從採集卡到Web頁面顯示的功能,這兩個都有免費的開發版(10個併發,商業應用的話可以花錢買lisence)。我們在電腦上安裝好這兩個軟體後,fms會以服務的方式執行,flash encoder執行後會自動找到採集裝置,設定好位元速率,大小,比例等引數後設置好fms的地址就可以開始推送了,開始推送後會自動在fms建立application。
這個時候我們在網站上建立一個頁面,把控制的flash或者ajax程式放上去,然後加入一個flash的播放器,地址設定為fms的app的地址,然後我們就能夠在頁面上看到影象了,而且還能夠去控制攝像頭運動。當然我們也可以自己用flash寫一個播放器。
效果的話,我可不希望在家被偷窺,所以大家可以去 大熊貓網站 看看,這個網站的應用就是按照類似的方式實現的,不過攝像頭換成了sony的高檔貨,3000多一個,太清楚啦,甚至可以拉很近看到地上的毛毛蟲。如果是網上就不用看啦,攝像頭在室外,晚上一片漆黑。不過早上8點到10點真的很容易看到熊貓哦。