基于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。

最终代码如下：

#include <WinSock2.h>
#include <stdio.h>
#include <opencv/cv.h>
#include <opencv/highgui.h>
#include <fstream>
#include <iostream>
#pragma comment(lib, "ws2_32.lib")
IplImage* g_image = NULL;
CvMemStorage* g_storage = NULL;
// #define CHECK_FILE
#define SEND_VIDEO
#ifdef SEND_VIDEO
void main()
{
using namespace std;
//////////////////////////////////////////////////////////////////////////
// OpenCV
CvCapture *	capture;
IplImage  *	frame;
double		t(0);
double		ms(0);
int			key(0);
bool		flag(false);
//////////////////////////////////////////////////////////////////////////
// 加载套接字库
WORD wVersionRequested;
WSAData wsaData;
int err;
wVersionRequested = MAKEWORD(1, 1);
err = WSAStartup( wVersionRequested, &wsaData );
if (err != 0)
return;
if ( LOBYTE(wsaData.wVersion) != 1 ||
HIBYTE(wsaData.wVersion) != 1 )
{
WSACleanup();
return;
}
// 创建套接字
SOCKET sockSrv = socket(AF_INET, SOCK_DGRAM, 0);
SOCKADDR_IN addrSrv;
addrSrv.sin_addr.S_un.S_addr = htonl(INADDR_ANY);
addrSrv.sin_family = AF_INET;
addrSrv.sin_port = htons(6000);
bind( sockSrv, (SOCKADDR*)&addrSrv, sizeof(SOCKADDR) );
SOCKADDR_IN addrClient;
int len = sizeof SOCKADDR;
//////////////////////////////////////////////////////////////////////////
// 等待接收客户端数据
// #NOTE addrClient此时还未知，secvfrom函数调用时传出addrClient值
// 服务器保存数据报信息的源地址
char recvBuf[100];
char tempBuf[100];
recvfrom(sockSrv, recvBuf, 100, 0, (SOCKADDR*)&addrClient, &len);
sprintf(tempBuf, "%s say : %s", inet_ntoa(addrClient.sin_addr), recvBuf);
printf("%s/n", tempBuf);
//////////////////////////////////////////////////////////////////////////

// 设置发送缓存区
int nSendBuf=64*1024;//设置为64K
setsockopt(sockSrv, SOL_SOCKET,SO_SNDBUF,(const char*)&nSendBuf,sizeof(int));
//////////////////////////////////////////////////////////////////////////
/* initialize webcam */
capture = cvCaptureFromCAM(0);
cvSetCaptureProperty(capture, CV_CAP_PROP_FRAME_WIDTH, 320 );
cvSetCaptureProperty(capture, CV_CAP_PROP_FRAME_HEIGHT, 240);
cvNamedWindow("video", 1);
while (key != 'q')
{
t = (double)cvGetTickCount();
/* display video */
frame = cvQueryFrame(capture);
cvShowImage("video", frame);
key = cvWaitKey(1);
/* get elapsed time */
t = (double)cvGetTickCount() - t;
ms += t/((double)cvGetTickFrequency() * 1000.0);
/* autosave every 300 ms */
if (ceil(ms) >= 300 && !flag)
{
// flag = true;
cvSaveImage("img.jpg", frame);
ms = 0;
Sleep(2);
ifstream infile;
infile.open ("img.jpg", ios::binary );
// get length of file:
infile.seekg (0, ios::end);
long length = infile.tellg();
infile.seekg (0, ios::beg);
char buffer[1024];
// 发送文件大小和名称
char temp[1024];            	            //首先用来存放文件大小，后面用作发送文件缓冲区
memset(temp,0,sizeof(temp));
ltoa(length, temp, 10);						//将长度转化为字符
sendto(sockSrv, temp, strlen(temp)+1, 0, (SOCKADDR*)&addrClient, len);	//发送文件的名称和大小

printf("File length = %i/n", length);
// 发送文件
int  ilen =0;
int  iLastPos = infile.tellg();
const int BufferSize = 1024;
int iTemp(0);
// 最后一段需要特殊处理
// 当文件剩余不足1024时，读取到文件尾，curPos为-1
while ( 1 )
{
infile.read (buffer,BufferSize);
int curPos = infile.tellg();
if (-1==curPos)
ilen = length % BufferSize;
else
ilen = BufferSize;
sendto(sockSrv, buffer,ilen, 0, (SOCKADDR*)&addrClient, len);

iTemp += ilen;
// printf("%d /n", iTemp);
if (-1==curPos)
break;
}
// sendto(sockSrv, sendBuf, strlen(sendBuf)+1, 0, (SOCKADDR*)&addrClient, len);
infile.close();
}
}
/* free memory */
cvReleaseCapture(&capture);
cvDestroyWindow("video");
// exit socket
closesocket(sockSrv);
WSACleanup();
}

 

客户端设计

1，首先新建一个activex的工程。activex工程中ctrl类相当于单视图中的view类。在新建的工程ctrl类下有这么一段代码：

void CocxClientCtrl::OnDraw(
CDC* pdc, const CRect& rcBounds, const CRect& rcInvalid)
{
if (!pdc)
return;
// TODO: 用您自己的绘图代码替换下面的代码。
pdc->FillRect(rcBounds, CBrush::FromHandle((HBRUSH)GetStockObject(WHITE_BRUSH)));
pdc->Ellipse(rcBounds);
}

 

运行一下可以看到一个椭圆。。。这里就是绘图的主函数。就在这个函数中显示自定义的对话框。

2，在资源中新建对话框，因为将来要嵌入网页，修改对话框的属性：

Style = child

System Menu = false

Title Bar = false

将确定，取消按钮重命名为：连接服务器，断开连接。在对话框中增加一个Static Text控件显示视频，该控件为IDC_IMAGE

插入新类：ClientDialog。对话框的ID = IDD_CLIENT，需要一个成员控件：IDC_IMAGE。

然后再ClientDialog类中增加udp相关的操作。

最终ClientDialog代码如下：

// ClientDialog.cpp : 实现文件
//
#include "stdafx.h"
#include "activexApp.h"
#include "ClientDialog.h"
#include "Picture.h"
#include <fstream>
#include <iostream>
// CClientDialog 对话框
#pragma comment(lib,"Ws2_32")
CClientDialog *pDlg=NULL;
UINT ListenThread(void *p)
{
//准备接受请求
while(1)
{
if(!pDlg->bAppend)
{
AfxEndThread(0);
return 0;
}
ASSERT(pDlg!=NULL);
pDlg->RevFile(pDlg->m_hSocketClient);
}
return 0;
}
IMPLEMENT_DYNAMIC(CClientDialog, CDialog)
CClientDialog::CClientDialog(CWnd* pParent /*=NULL*/)
: CDialog(CClientDialog::IDD, pParent)
{
m_iPort = 6000;
m_hSocketClient=0;
pBuffer=NULL;
m_iSize=0;
bAppend=true;
m_isDraw = false;
}
CClientDialog::~CClientDialog()
{
if(pBuffer!=NULL)
{
delete []pBuffer;
pBuffer=NULL;
}
}
void CClientDialog::DoDataExchange(CDataExchange* pDX)
{
CDialog::DoDataExchange(pDX);
DDX_Control(pDX, IDC_IMAGE, m_cImage);
}
BEGIN_MESSAGE_MAP(CClientDialog, CDialog)
ON_WM_PAINT()
ON_WM_LBUTTONDOWN()
ON_WM_LBUTTONUP()
ON_WM_MOUSEMOVE()
END_MESSAGE_MAP()
// CClientDialog 消息处理程序
BOOL CClientDialog::OnInitDialog()
{
CDialog::OnInitDialog();
WSADATA wsaData;
WORD version = MAKEWORD(1,1);
int ret=WSAStartup(version,&wsaData);
if(ret!=0)
{
MessageBox("Init  Error");
return FALSE;
}

pDlg = this;
return TRUE;  // return TRUE unless you set the focus to a control
// 异常: OCX 属性页应返回 FALSE
}
void CClientDialog::OnPaint()
{
CPaintDC dc(this); // device context for painting
CDialog::OnPaint();
// 显示矩形框
if (m_isDraw)
{
CClientDC dc(this);
CPen pen(PS_SOLID, 2, RGB(234,23,53));
CPen *pOldPen=dc.SelectObject(&pen);
CBrush *pBrush=CBrush::FromHandle((HBRUSH)GetStockObject(NULL_BRUSH));
CBrush *pOldBrush=dc.SelectObject(pBrush);
dc.Rectangle(CRect(m_begPnt, m_endPnt));
dc.SelectObject(pOldPen);
dc.SelectObject(pOldBrush);
}
}
void CClientDialog::OnOK()
{
UpdateData();
bAppend=true;
InitSock();
//m_cStop.EnableWindow(true);
//m_cOk.EnableWindow(false);
}
void CClientDialog::OnCancel()
{
// TODO: Add extra cleanup here
bAppend=false;
if(m_hSocketClient)
{
closesocket(m_hSocketClient);
}
WSACleanup();
CDialog::OnCancel();
}
void CClientDialog::InitSock()//
{
if(m_hSocketClient)//如果已经创建，先关闭
{
closesocket(m_hSocketClient);
m_hSocketClient=NULL;
}
else
{
// SOCK_STREAM 提供面向连接的
// m_hSocketClient=socket(AF_INET,SOCK_STREAM,0);
m_hSocketClient = socket(AF_INET,SOCK_DGRAM,0);
ASSERT(m_hSocketClient);//
}
// 创建套接字
//SOCKADDR_IN addrSrv;
//addrSrv.sin_addr.S_un.S_addr = inet_addr("127.0.0.1");
//addrSrv.sin_family = AF_INET;
//addrSrv.sin_port = htons(6000);
//int len = sizeof(SOCKADDR);
m_addrSrv.sin_family=AF_INET;							//表示在INT上通信
m_addrSrv.sin_addr.S_un.S_addr = inet_addr("127.0.0.1");
m_addrSrv.sin_port = htons(m_iPort);
int len = sizeof(SOCKADDR);
//////////////////////////////////////////////////////////////////////////
char getContact[] = {"Hi"};
sendto(m_hSocketClient, getContact, strlen(getContact)+1, 0, (SOCKADDR*)&m_addrSrv, len);
//////////////////////////////////////////////////////////////////////////
int nRecvBuf=64*1024;//设置为64K
setsockopt(m_hSocketClient, SOL_SOCKET,SO_RCVBUF,(const char*)&nRecvBuf,sizeof(int));
// while(1)
//	RevFile(m_hSocketClient);
// 开一个线程监听！
AfxBeginThread(ListenThread, this);
}
void CClientDialog::ShowPIC(char* buf,int iSize)
{
if(iSize==0||buf==NULL) return;
ASSERT(buf!=NULL);
CDC *pDC=m_cImage.GetDC();
ASSERT(pDC!=NULL);
CPicture pic;
pic.Load(buf,iSize);
CRect rect;
m_cImage.GetClientRect(&rect);
rect.top+=15;
rect.left+=5;
rect.right-=5;
rect.bottom-=5;
pic.Render(pDC,rect);
}
void CClientDialog::RevFile(const SOCKET& s)
{
char buffer[1024];
char temp[1024];
memset(buffer,0,sizeof(buffer));
memset(temp,0,sizeof(temp));
int len = sizeof(SOCKADDR);
int rcv = recvfrom(s, buffer, 1024, 0, (SOCKADDR*)&m_addrSrv, &len);
long lFileSize = atol(buffer);		//文件大小；

m_iSize = lFileSize;
TRACE("File length = %i/n", lFileSize);
int i(0);
if(pBuffer!=NULL)
{
delete [] pBuffer;
pBuffer=NULL;
}
pBuffer=new char[lFileSize+1];
pBuffer[0]='/0';
char* pBuf = pBuffer;
long iTemp = 0;
memset(buffer,0,sizeof(buffer));
while (1)
{
rcv = recvfrom(m_hSocketClient, buffer, 1024, 0, (SOCKADDR*)&m_addrSrv, &len);
if (rcv <= 0)
{
break;
}
for (int i=0; i<rcv; i++)
{
pBuf[i+iTemp] = buffer[i];
}
iTemp += rcv;
// TRACE("Received = %3d/n", iTemp);
if (rcv < 1024 && iTemp==lFileSize)
{
iTemp = 0;
// 通过内存流显示图片
ShowPIC( pBuf, lFileSize);
// 			std::ofstream outFile("c://test.jpg");
// 			outFile.write(pBuf, lFileSize);
// 			outFile.close();
break;
}
}
// m_cState.SetWindowText("文件接收成功！");
/*shutdown(s, SD_BOTH);
closesocket(s);*/
}
bool CClientDialog::isInImageRegion(const CPoint& point)
{
RECT imageRect;
GetDlgItem(IDC_IMAGE)->GetWindowRect(&imageRect);
this->ScreenToClient(&imageRect);
//TRACE("=====================/n");
//TRACE("%3d %3d %3d %3d/n", imageRect.left, imageRect.top, imageRect.right, imageRect.bottom);
//TRACE("%3d %3d/n", point.x, point.y);
//TRACE("=====================/n");
return point.x > imageRect.left && point.x < imageRect.right
&& point.y > imageRect.top && point.y < imageRect.bottom;
}
void CClientDialog::OnLButtonDown(UINT nFlags, CPoint point)
{
if ( isInImageRegion(point) )
{
m_begPnt.x = point.x;
m_begPnt.y = point.y;
m_isDraw = true;
}
CDialog::OnLButtonDown(nFlags, point);
}
void CClientDialog::OnLButtonUp(UINT nFlags, CPoint point)
{
m_isDraw = false;

CDialog::OnLButtonUp(nFlags, point);
}
void CClientDialog::OnMouseMove(UINT nFlags, CPoint point)
{
if (!isInImageRegion(point))
return;
if (m_isDraw)
{
m_endPnt.x = point.x;	m_endPnt.y = point.y;
Invalidate(FALSE);
// draw...
}
CDialog::OnMouseMove(nFlags, point);
}

 

到现在，只是定义了ClientDialog类，并没有定义该类的实例，也就是说当运行控件以后看到的仍然是一个偌大的椭圆。所以需要修改ctrl类：

在ctr类中定义成员指针ClientDialog* m_app; ctrl的构造函数中初始化列表中置m_app为NULL，类视图下右击ctrl类，属性，重载OnCreate函数。在OnCreate函数创建对话框，OnDraw中显示，析构函数中释放：

ctrl类的关键代码：

CocxClientCtrl::CocxClientCtrl()
: m_app(NULL)
{
InitializeIIDs(&IID_DocxClient, &IID_DocxClientEvents);
}
CocxClientCtrl::~CocxClientCtrl()
{
if (m_app)
delete m_app;
m_app = 0;
}
void CocxClientCtrl::OnDraw(
CDC* pdc, const CRect& rcBounds, const CRect& rcInvalid)
{
if (!pdc)
return;

m_app->MoveWindow(rcBounds);
m_app->ShowWindow(SW_SHOW);
}
void CocxClientCtrl::DoPropExchange(CPropExchange* pPX)
{
ExchangeVersion(pPX, MAKELONG(_wVerMinor, _wVerMajor));
COleControl::DoPropExchange(pPX);
}
void CocxClientCtrl::OnResetState()
{
COleControl::OnResetState();
}
// CocxClientCtrl::AboutBox - 向用户显示“关于”框
void CocxClientCtrl::AboutBox()
{
CDialog dlgAbout(IDD_ABOUTBOX_OCXCLIENT);
dlgAbout.DoModal();
}
// CocxClientCtrl 消息处理程序
int CocxClientCtrl::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
if (COleControl::OnCreate(lpCreateStruct) == -1)
return -1;
m_app = new CClientDialog;
m_app->Create(IDD_CLIENT, this);

return 0;
}

 

调试activex设置：

工程属性 / 调试 / 命令：C:/Program Files/Internet Explorer/iexplore.exe

工程属性 / 调试 / 命令参数 ： E:/RYF resource/UDPChat/a.html

该html内容为：

<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<OBJECT ID="MyActiveX" WIDTH=600 HEIGHT=500
CLASSID="CLSID:BEB347E2-D2EC-4C39-8593-0B76D36DEB09">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="4657">
<PARAM NAME="_ExtentY" VALUE="4075">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
</BODY>
</HTML>

注意html中需要一个CLSID，该ID为activex工程下，系统自动生成的idl文件中的：

//  CocxClientCtrl 的类信息
[ uuid(BEB347E2-D2EC-4C39-8593-0B76D36DEB09),
helpstring("ocxClient Control"), control ]
coclass ocxClient
{
[default] dispinterface _DocxClient;
[default, source] dispinterface _DocxClientEvents;
};

 

这里的这个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