前期內容提要：
- 【樹莓派-網絡監控（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）遠程訪問】基於內網穿透實現樹莓派監控的公網遠程訪問與遙控
如果您有任何疑問或者好的建議，期待你的留言與評論！