原创搭建属于你的家庭网络实时监控–HTML5在嵌入式系统中的应用·高级篇

 2014-6-5 15:37  962 28 28 分类: 消费电子

*本文已刊登在《无线电》2014年第6期

《搭建属于你的在线实时采集系统》中已经对HTML5平台有了初步的认识，并基于此向大家展示了如何将采集到的数据上传至网络，实现实时观测。HTML 5是近十年来Web开发标准最巨大的飞跃。想必你已经体会到了HTML5的便捷之处，为了帮助大家更好在此平台上拓展应用，本文更加深入的探析“智能家居”与HTML5的完美结合，让家庭网络实时监控轻松实现。

关于智能家居

2013年，太多公司包括三星和飞利浦在内都对智能家居动了念头，在CES的展览上三星展示了他们的新型智能清洁机器人，飞利浦的Hue智能LED灯泡，遭众多模仿的Nest的智能恒温器，结合智能控制、智能终端、智能显示的智能家居，将迎来更多创意。

所有这些，都让我们感受到智能家居已经脱离一种概念，进入到了下一个产品化阶段。但从用户的角度出发，更多人还是希望体验智能家居最基本的安全保障，便捷、经济、实用依然是多数人关注的主题，所以家庭远程监护无疑得到更多青睐，特别是家中有老人、孩子，或者是你的宠物，发生了紧急状况，怎样才能第一时间得知情况并避免事故的发生？

图1 家庭监控系统示意图

（图片来自：http://dynews.zjol.com.cn/pic/0/11/43/44/11434423_934000.jpg）

从此角度出发，我想到DIY一个家庭网络实时监控系统，用手机或电脑连接网络，就能看到家中各个角落的情况。今天我们介绍的内容就是，用一个摄像头 + 一块单片机就可以搞定的家居网络实时监控，搭载html5平台，实现更佳效果。

关于HTML5—WebSocket数据传输

网络实时访问，图像画质是否能够达到理想值呢？

以前的web界面在数据采集显示方面，都是采用的轮询方式，数据及时性不好，如果轮询过快，不但加大浏览器的负担，而且可能达不到你想要的效果。这次之所以选择HTML5，由于新增的websocket API函数，几乎完美的解决了实时性的问题。

那么介于我们是采用单片机，将采集到的数据上传至网页，所以可负载的数据量收到缓存大小的限制，为解决此问题，我们将采集到的视频数据直接输出JPEG格式的图片，暂设播放速率设置为5帧/秒，即画面每秒切换5幅，如此我们就可以实现视频的观看了。

网络摄像头系统演示

系统环境

a) 单片机：STM32F103RC，256K字节Flash，48K字节SRAM，2K字节EEPROM

b) 以太网控制器：W5500，SPI接口与单片机相连

c) 电源：USB供电

d) 硬件外设：OV2640摄像头

图2 W5500EVB与OV2640摄像头连接图

开发工具: IAR for ARM v5.41，这是我们工程所使用的版本。如果使用不同版本的IAR，请对STM的库稍作调整。

看代码之前，我们还是先来了解一下整个的程序流程，流程图由一个主流程图和两个子流程图组成。如下图所示，程序采用轮询机制来处理请求和图像数据。在硬件初始化完成之后，将进行网络参数配置，这是要根据自己网络的情况来配置W5500的IP地址等网络参数，确保W5500能连接外网；本程序中，我们会使用W5500的两个socket资源，一个用来创建Http Server，这样在浏览器上输入配置的IP地址，浏览器作为客户端就能远程访问我们的硬件了；另一个用来创建Web Socket Server，与网页端建立通信链路，用来传输我们的摄像头图像数据。

图3 系统主流程图

图4a 图4b

图4a Http处理函数流程图图4b WebSocket处理函数流程图

当我们在浏览器**问硬件的IP地址，会向W5500发送http请求，W5500在收到请求后将html5的网页程序发送给浏览器，在网页程序中，浏览器会主动与硬件建立WebSocket连接。在完成握手操作后，图像传输的数据通道即建立了。这样每当硬件轮询到新的图像准备好后，就会通过WebSocket将图像数据发送给浏览器，浏览器收到数据后，在界面上绘制图像。实际效果图请见图5。接下来将对摄像头的初始化和图像数据缓存程序，html5中在画布上绘制图像的程序以及WebSocket数据传输程序做详细介绍。