网页监控之自己设计监控界面

一些基础内容参考这篇文章:http://blog.csdn.net/qq_21792169/article/details/51112277

当我们使用mjpg_streamer的时候用http://172.16.148.111:8080/?action=stream来获取视频流,用http://172.16.148.111:8080/?action=snapshot来拍照用起来非常不方便,下面我们自己来写网页然后放入boa服务器的www目录下面。

index.html






WEB网页监控系统的设计







   

   无线监控系统设计我采用了四种设计思路:

第一、通过开发板上LCD来显示摄像头数据;

第二、开发板通过网线连接到局域网内,通过网页来显示摄像头数据,局域网内任意一台电脑都可以实现;

第三、开发板上搭建WIFI网卡驱动,android手机通过APP来显示摄像头数据,也只能是在WIFI信号范围之类;

第四、开发板搭建3G网卡,SIM卡环境,android手机通过APP来显示摄像头数据,全国任意手机连上网都可以监控数据

Design by:网络人VS灰鸽子 2016-3-15


拍照(点击拍照后再网页上就会显示相片,然后自己右键保存)

index.css

#header{width:100%100px;margin:0 auto;}
#header h1{font-size:26px;color:#664666;padding:5px 0 5px 15px;font-weight:800;}
#header h2{font-size:20px;color:#664666;padding:5px 0 5px 15px;font-weight:400;}
#content img{float:left;display:block;border:0px; }
#content h1{font-size:26px;color:#FF0000;padding:5px 0 5px 15px;font-weight:800;}
#content h2{font-size:22px;color:#0000FF;padding:0 0 5px 10px;font-weight:800;}
#content a{font-size:28px;color:#00FF00;padding:0 0 5px 10px;font-weight:800;}


效果显示如下:

网页监控之自己设计监控界面_第1张图片

你可能感兴趣的:(cammer,for,web,to,control)