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

最新推荐文章于 2024-06-11 15:42:40 发布

fdgyfghh

最新推荐文章于 2024-06-11 15:42:40 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/fdgyfghh/article/details/83956314

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

一些基础内容参考这篇文章：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

<span style="font-size:18px;"><script language="JavaScript"><!--var password="";password=prompt('请输入密码 (本网站需输入密码才可进入):','');if (password != 'mima')   {alert("密码不正确,无法进入本站!!");    window.opener=null; window.close();}  // 密码不正确就关闭//--></script><script> function show(){ var date = new Date(); //日期对象 var now = ""; now = date.getFullYear()+"年"; //读英文就行了 now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了 now = now + date.getDate()+"日"; now = now + date.getHours()+"时"; now = now + date.getMinutes()+"分"; now = now + date.getSeconds()+"秒"; document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串 setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法 } </script><html><head><title>WEB网页监控系统的设计</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="keywords" content="网络人VS灰鸽子博客"><meta name="description" content="WEB网页监控系统的设计"><link rel="stylesheet" href="./index.css"><script type="text/javascript" src="./index.js"></script></head><body>   <!用来显示时间><h2 align=right><font color="#cc0033"><body onload="show()">   <!-- 网页加载时调用一次 以后就自动调用了--> <div id="nowDiv"></div> </font></h2></body><embed src="./xuehua.mp3" autostart="true" loop="true" hidden="true"><div id="header"><h1><center>WEB无线网络监控系统设计</center></h1><h2><marquee behavior=alternate>只有目的明确，结果清晰，过程才最高效，才不会轻易被干扰，被改变方向。</marquee></h1></div><div id="content"><img src="http://172.16.148.111:8080/?action=stream" width="640px"; height="480px";/><h1>   无线监控系统设计我采用了四种设计思路：</h1><h2>第一、通过开发板上LCD来显示摄像头数据；</h2><h2>第二、开发板通过网线连接到局域网内，通过网页来显示摄像头数据，局域网内任意一台电脑都可以实现；</h2><h2>第三、开发板上搭建WIFI网卡驱动，android手机通过APP来显示摄像头数据，也只能是在WIFI信号范围之类；</h2><h2>第四、开发板搭建3G网卡，SIM卡环境，android手机通过APP来显示摄像头数据，全国任意手机连上网都可以监控数据</h2><h2>Design by:<a href="http://blog.csdn.net/qq_21792169/article/details/50629515" target="_blank">网络人VS灰鸽子</a> 2016-3-15</h2><br><a target="_blank" href="http://172.16.148.111:8080/?action=snapshot">拍照</a><font size="4" color="pink">（点击拍照后再网页上就会显示相片，然后自己右键保存）</font></div></body></html></span>

index.css

<span style="font-size:18px;">#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;}</span>

效果显示如下：