前言
想法来源: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.youkuaiyun.com/dizuo/archive/2011/04/18/6331279.aspx
配置好以后,用IE调试就可以看到对话框出现。。。
说明一点:基于UDP连接,所以客户端点击“连接服务器”按钮以后,客户端先发送一个消息给服务器,跟服务器建立链接,然后服务器取得客户端IP地址,开始发送视频数据。代码中服务器是每隔300ms发送一次。。。一秒3帧左右。。。
最终效果:
gif在线制作:http://gif.55.la/
代码可以到我资源下载: http://download.youkuaiyun.com/source/3393178