标签: 家庭网络实时监控

*本文已刊登在《无线电》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 Http处理函数流程图              图4b WebSocket处理函数流程图   当我们在浏览器**问硬件的IP地址，会向W5500发送http请求，W5500在收到请求后将html5的网页程序发送给浏览器，在网页程序中，浏览器会主动与硬件建立WebSocket连接。在完成握手操作后，图像传输的数据通道即建立了。这样每当硬件轮询到新的图像准备好后，就会通过WebSocket将图像数据发送给浏览器，浏览器收到数据后，在界面上绘制图像。实际效果图请见图5。接下来将对摄像头的初始化和图像数据缓存程序，html5中在画布上绘制图像的程序以及WebSocket数据传输程序做详细介绍。 图5 系统浏览器端效果图 OV2640 介绍 1.OV2640 硬件简介 图7 OV2640摄像头 OV2640像素输出最大支持200万像素，支持QCIF(176*144)、QVGA(320*240)、VGA(640*480)、1027*768、1600*1200等像素输出。 继续阅读：http://blog.iwiznet.cn/?p=6289 程序下载地址：http://wizwiki.net/forum/viewtopi c.php?f=91t=733

*本文已刊登在《无线电》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 Http处理函数流程图              图4b WebSocket处理函数流程图  当我们在浏览器**问硬件的IP地址，会向W5500发送http请求，W5500在收到请求后将html5的网页程序发送给浏览器，在网页程序中，浏览器会主动与硬件建立WebSocket连接。在完成握手操作后，图像传输的数据通道即建立了。这样每当硬件轮询到新的图像准备好后，就会通过WebSocket将图像数据发送给浏览器，浏览器收到数据后，在界面上绘制图像。实际效果图请见图5。接下来将对摄像头的初始化和图像数据缓存程序，html5中在画布上绘制图像的程序以及WebSocket数据传输程序做详细介绍。 图5 系统浏览器端效果图 OV2640 介绍 1.OV2640 硬件简介 图7 OV2640摄像头 OV2640像素输出最大支持200万像素，支持QCIF(176*144)、QVGA(320*240)、VGA(640*480)、1027*768、1600*1200等像素输出。  具备两种输出格式： a、原始数据如RGB565，RGB RAW，YUV422； b、JPEG压缩图像格式（可极大减少传输带宽，例如640*480分辨率的原图片大小在300KB左右， JPEG编码输出后大小仅约为16KB） 继续阅读： http://blog.iwiznet.cn/?p=6289 程序下载地址： http://wizwiki.net/forum/viewtopic.php?f=91t=733