前期内容提要：
- 【树莓派-网络监控（1）分析准备】基于树莓派搭建可视化可远程遥控网络监控——工程分析及前期准备
- 【树莓派-网络监控（2）画面传输】基于mjpg-stream实现监控画面的传输
- 【树莓派-网络监控（3）角度遥控】基于python3控制两自由度舵机，实现摄像头拍摄角度的遥控
- 【树莓派-网络监控（4）数据交互】基于python异步io框架Tornado,实现监控遥控命令与Web网页触发事件的绑定及前后端的数据交互
在上一章节中，我们同时打开树莓派IP:8080以及树莓派IP:80两个网页（一个观看监控实时画面；一个控制监控画面角度），基本实现了在局域网环境下对摄像头拍摄角度的实时控制。但很显然，在现实应用场景中，同时开启两个网站是繁琐的，特别是在移动端，两个网页轮流切换以实现网络监控的控制更是一场极差的用户体验。作为内网摄像头搭建的最后一章，显然本章的首要目标就是解决这一问题，将监控实时画面与遥控功能集成到一个网页中，在此基础上进一步提升用户体验，优化控制页面,完成内网环境下摄像头的全部搭建。
基本思路：
首先，在网页的集成上，大致有三种方案：
- 方案一：建立一个全新页面，其后将 监控实时画面（树莓派IP:8080）页面 和 监控操控页面（树莓派IP:80）合并上去；
- 方案二：在 监控实时画面（树莓派IP:8080）页面 上集成 监控操控页面
- 方案三：在 监控操控页面（树莓派IP:80）上集成 监控实时画面
显然，相比于需要再次架设全新Web服务器的方案一，以及难以后期维护，源码过于简短且不易编辑的方案二，方案三更为简便和快捷，对于后期网络环境的变更可以适配最优适配传输画面。因此这里选用在监控操控页面index.html加上iframe标签的方式，集成监控实时画面。
其次，则是页面的进一步优化,大致是三个方向：其一，实现响应式布局以适配移动端的浏览和操作；其二，优化控制端功能和逻辑；比如为保障网络监控控制端的安全性（特别是后期穿透至外网环境后），需要在进入控制页面前进行身份认证（口令验证）；作为网络监控必不可少的时钟的显示；作为跳出页面工具的搜索引擎功能等等；其三，优化控制端用户体验，通过jquery、bootstrap等实现诸如一键换肤等功能。
最后，明确需求及其方案，绘制图表一张，用于跟踪工程的实际完成情况：
| 需求 | 方案 | 完成情况（达成\未达成） |
|---|---|---|
| 集成 监控操控页面 与 监控实时画面 | 使用html的iframe标签 | ----- |
| 保障网络监控控制端的安全性 | 进入控制页面前进行身份认证（口令验证） | ----- |
| 实现响应式布局并增加时钟显示功能、搜索引擎等功能 | 使用JavaScript、CSS实现 | ----- |
| 提升用户使用体验 | 一键换肤，缓解视觉疲劳等（jquery、bootstrap实现） | ----- |
| 上线正常运行 | 上线测试 | ----- |
一、集成 监控操控页面 与 监控实时画面
在 监控操控页面index.html加上iframe标签，集成监控实时画面。
<iframe src="http://树莓派IP:8080/stream_simple.html" style="height:500px;width:100%;" scrolling="yes" frameborder="0"></iframe>
由于移动端设备大小各异，我们必须考虑到 “监控画面” 宽度（不变值） 并不会恒小于手机实际屏幕宽度（如下图一出现了监控画面溢出网页情况），因此在这里我在固定iframe大小的同时，加上一个横向滚动条以保障视频的完整性（不然监控画面将被裁剪）。添加横向滚动条的思路大致有二：（1）基于整个网页添加横向滚动条——效果见下图二；（2）基于iframe添加横向滚动条——效果见下图三。
可以发现，如果基于整个网页添加横向滚动条，并不能有效解决监控画面溢出网页的情形；而如果基于iframe添加横向滚动条，虽然解决了监控画面溢出的问题，但是由于iframe内的监控画面宽度超出了iframe适应手机最大宽度后生成的宽度，在iframe内部会发现html的滚动条将不出现。并且活生生的从手机最大宽度处截断（类似overflow：hidden的效果），监控画面右边很大一部分画面被剪裁，无法滑动查看。显然，上述两个解决方法是不符合工程要求的。
- 解决方法：
在iframe外加一层div,让超出div的内容可以通过touch来滚动；-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果，完整代码如下：
<style type="text/css">
.warpper { overflow-x: auto;overflow-y:hidden; -webkit-overflow-scrolling: touch; width: 100%; height: 505px; margin: 2px auto; border: 0.1px solid black; }
</style>
<div class="warpper">
<iframe src="http://192.168.1.101:8080/stream_simple.html" style="height:500px;width:100%;" scrolling="yes" frameborder="0"></iframe>
</div>
如下图所示，操作界面上多出了一个略大于监控画面的黑框（div），用户能够通过touch来左右滚动监控画面，在保证了监控画面完整性的同时，解决了监控画面溢出的问题，在监控画面板块实现了自适应，以兼容任何一款移动设备界面的查看与操作。
| 需求 | 方案 | 完成情况（达成\未达成） |
|---|---|---|
| 集成 监控操控页面 与 监控实时画面 | 使用html的iframe标签 | 达成 |
二、保障网络监控控制端的安全性
为保障网络监控控制端的安全性，并不是所有用户在知晓监控管理页面地址后都具有访问权限，据此，在进入控制页面前应当进行身份认证（口令验证），由于方法繁多且较易实现，在此便不再多述，直接贴一个简单的实现方法，后期可以自行优化。
<script type="text/javascript">
loopy()
function loopy() {
var sWord =""
while (sWord != "123") {//初始密码123
sWord = prompt("请输入正确密码!")
}
}
</script>
| 需求 | 方案 | 完成情况（达成\未达成） |
|---|---|---|
| 保障网络监控控制端的安全性 | 进入控制页面前进行身份认证（口令验证） | 达成 |
三、实现响应式布局并增加时钟显示功能、搜索引擎等功能，进一步优化网页，提升用户使用体验
优化网页部分纯粹是一个DIY环节了，比如我这里加入了一个一键换肤功能，用于缓解视觉疲劳，这一块涉及到的JS和CSS文件我已随博客发布上传，大家可以自行下载。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>Camera PLATFORM</title>
</head>
时钟：
<header id="header" class="media">
<div class="media-body">
<div class="media" id="top-menu">
<div id="time" class="pull-right">
<span id="hours"></span>
:
<span id="min"></span>
:
<span id="sec"></span>
</div>
</div>
</div>
</header>
搜索引擎：
<header id="header" class="media">
<div class="media-body">
<div class="media" id="top-menu">
<div class="media-body">
<form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
<input type="text" class="main-search" id="search1" name="word"/>
</form>
</div>
</div>
</div>
</header>
| 需求 | 方案 | 完成情况（达成\未达成） |
|---|---|---|
| 实现响应式布局并增加时钟显示功能、搜索引擎等功能 | 使用JavaScript、CSS实现 | 达成 |
| 提升用户使用体验 | 一键换肤，缓解视觉疲劳等（jquery、bootstrap实现） | 达成 |
四、上线测试
内网环境下摄像头的搭建已经进入尾声，在开始最后的测试前，还有三件事需要完成：
- 将工程打包上传至服务端
- 实现Tornado框架下静态文件的读取
- 将相关服务全部设置为开机自启
（1） 将工程打包上传至服务端
文件结构：
/home/pi
│
└── 111
├── index.html
├── index.py
├── steering.py
└── static
├── css
│ ├── bootstrap.min.css
│ └── style.css
│
├── js
│ ├── bootstrap.min.js
│ └── functions.js
│ └── jquery.min.js
│
└── img
├── skin-blue.jpg
├── skin-chrome.jpg
├── skin-city.jpg
├── skin-cloth.jpg
├── skin-greenish.jpg
├── skin-kiwi.jpg
├── skin-lights.jpg
├── skin-night.jpg
├── skin-ocean.jpg
├── skin-sunny.jpg
├── skin-sunset.jpg
├── skin-tectile.jpg
├── skin-violate.jpg
├── skin-yellow.jpg
│
├── icon
│ └── search.png
│
└── body
└── blue.jpg
└── chrome.jpg
└── city.jpg
└── cloth.jpg
└── greenish.jpg
└── kiwi.jpg
└── night.jpg
└── lights.jpg
└── ocean.jpg
└── sunny.jpg
└── sunset.jpg
└── tectile.jpg
└── violate.jpg
└── yellow.jpg
（2） Tornado框架下实现静态文件的读取
在index.html中我们需要调用 img/js/css 这类静态资源。Tornado模板模块提供了一个叫作static_url的函数来生成static目录下文件的URL，换言之，在index.html中是不能直接通过<link rel="stylesheet" href="/static/css/index.css">调用静态文件，而应该以<link rel="stylesheet" href="{{static_url('css/index.css')}}">的形式调用，具体而言：
<!-- CSS -->
<link href="{{static_url('css/bootstrap.min.css')}}" rel="stylesheet">
<link href="{{static_url('css/style.css')}}" rel="stylesheet">
<!-- jQuery -->
<script src="{{static_url('js/jquery.min.js')}}"></script> <!-- jQuery Library -->
<!-- Bootstrap -->
<script src="{{static_url('js/bootstrap.min.js')}}"></script>
<!-- All JS functions -->
<script src="{{static_url('js/functions.js')}}"></script>
css文件中的路径则无需修改，注意目录层级结构即可：
（3） 监控控制页面开机自启
关于摄像头的开机自启，在系列文章 第二章 已完成部署，监控控制页面的开机自启我们也选用systemctl方法，值得注意的是：
- 需要指定python3的绝对路径。（通过
which python3命令查询） - 由于index.py并不是一个单一的执行脚本，因此需要申明其运行环境WorkingDirectory。
sudo vim /etc/systemd/system/index.service
[Unit]
Description=index daemon
After=syslog.target network.target
Wants=network.target
[Service]
WorkingDirectory=/home/pi/111
Type=simple
ExecStart=/usr/bin/python3 /home/pi/111/index.py
Restart= always
RestartSec=1min
[Install]
WantedBy=multi-user.target
#启动监控画面的传输
systemctl daemon-reload
systemctl start index
#查看是否成功开启
systemctl status index.service
#设置为开机启动
systemctl enable index
工程测试：
在实际测试过程中，由于测试环境仅50M带宽，故将监控画面分辨率固定在了352*288，与之相对应，将iframe外的div大小由原来的width: 100%; height: 505px变更为了width: 100%; height: 300px以保证后续内网穿透环境下远程访问画面传输的连续性与稳定性。
| 需求 | 方案 | 完成情况（达成\未达成） |
|---|---|---|
| 上线正常运行 | 上线测试 | 达成 |
至此，我们通过集成监控实时画面与遥控功能等方式，完成内网环境下网络摄像头的全部搭建与调试工作。但显然，仅仅能够在内网访问控制的摄像头并不能成为真正意义上的网络摄像头，因此，在下一章节即该系列的完结篇，我们将利用内网穿透技术，实现树莓派监控的公网远程访问与遥控，以完成网络摄像头的全部部署。
后期内容提要：
- 【树莓派-网络监控（6）远程访问】基于内网穿透实现树莓派监控的公网远程访问与遥控
如果您有任何疑问或者好的建议，期待你的留言与评论！