自己动手实现纯Web远程监控系统(纯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个指令我们用七个数组来写死：

封装指令的类
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> 1using System;
 2using System.Collections.Generic;
 3using System.Text;
 4
 5namespace PelcoDLib
 6{
 7    class ControlData
 8    {   
 9        //                                    保留  地址  指令1 指令2 数据1 数据2 验证
10        public static byte[] Up =           { 0xff, 0x01, 0x00, 0x10, 0x00, 0x3f, 0x50 };
11        public static byte[] Down =         { 0xff, 0x01, 0x00, 0x08, 0x00, 0x3f, 0x48 };
12        public static byte[] Left =         { 0xff, 0x01, 0x00, 0x04, 0x3f, 0x00, 0x44 };
13        public static byte[] Right =        { 0xff, 0x01, 0x00, 0x02, 0x3f, 0x00, 0x42 };
14
15        public static byte[] Forward =      { 0xff, 0x01, 0x00, 0x20, 0x00, 0x00, 0x21 };
16        public static byte[] Back =         { 0xff, 0x01, 0x00, 0x40, 0x00, 0x00, 0x41 };
17
18        public static byte[] Stop =         { 0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00 };
19
20        public static byte[] FocusForward = { 0xff, 0x01, 0x00, 0x80, 0x00, 0x00, 0x81 };
21        public static byte[] FocusBack =    { 0xff, 0x01, 0x01, 0x00, 0x00, 0x00, 0x02 };
22
23        public static byte[] SetPoint = { 0xff, 0x01, 0x00, 0x03, 0x00, 0x01, 0x05 };
24        public static byte[] GotoPoint = { 0xff, 0x01, 0x00, 0x07, 0x00, 0x01, 0x09 };
25
26        public static 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

 

然后我们通过串口通信的类发送这些指令就行了，下面是控制云台向上运动的方法：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->1public static void 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点真的很容易看到熊猫哦。