??因公司業務需求，最近研究了海康威視攝像頭推流到web前端的實用技術方案，因為之前并沒有接觸過相關技術方向，所以在實現的時候不說走了彎路，砍掉的技術方案也不少了，下面慢慢說這一個月的學習歷程。
??需求是需要把攝像頭監控視頻實時顯示到瀏覽器的系統上，大體實現了三個版本，也可以說是按三個難度層級進行實現的：
??一. 測試階段--技術方案可行性測試
??二. 集成到java web框架中，實現攝像頭動態配置，并能在前端看到實時監控
??三. 擁抱H5，擺脫對flash的依賴，并編寫簡易的權限驗證，避免任何人都能直接訪問流媒體服務器監控視頻
測試階段
一. 電腦連接攝像頭設備
??首先需要手頭上有海康威視攝像頭設備以方便調試。
??將電腦和攝像頭用網線連接，攝像頭插上電源，如果有NVR需求需要的則要把攝像頭、NVR和電腦分別通過網線連接到交換機上。
二. 連接海康威視攝像頭
??把電腦網段和攝像頭設置到一個網段，這樣才能通過瀏覽器訪問攝像頭配置地址。
??能進到這個界面說明就能連接攝像頭了，這個時候需要打開IE瀏覽器并安裝webcomponent插件，確保能進行視頻預覽就行。
三. 下載VLC media player和FFmpeg視頻轉碼工具
??下載其他播放器也行，只要保證能播放RTSP和RTMP協議的視頻流，這里VLC并不是功能需要，僅作為能直觀驗證推流操作是否正確的一個工具。
??下載好后把FFmpeg配置到環境變量的Path中（也不是必須的，僅僅為了方便點）。
??首先查看能不能通過VLC工具查看RTSP視頻推流
??拉流格式rtsp://用戶名:密碼@攝像頭地址:端口號/編碼/通道號/主(子)碼流/av_stream，這里不清楚的百度下海康威視攝像頭推流地址規則，能看到就證明攝像頭的拉流地址沒問題，不能看到就需要看下攝像頭RTMP推流端口是不是配對了。
四. 下載nginx和nginx-rtmp-module，并配置conf文件
??測試階段用的是nginx-rtmp-module，在第三個版本中因為各種考慮換成了nginx-http-flv-module，這里也可以直接用后者進行測試。最好下載別人已經編譯好的版本，能省很多時間。
??配置conf文件。
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
application live {
live on;
}
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 8s;
}
}
}
http {
server {
listen 8080;
location / {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
}
}
}
??運行nginx.exe，雙擊一閃而過就行，看看控制臺里面是不是有相應進程。這里提醒幾個地方，開機的時候控制臺中是有nginx相應進程的，但是還是要運行一次exe才能順利進行推流，測試階段后期在桌面創建bat或者sh腳本文件運行時，只有命令行窗口一直存在才是成功啟動服務器的標指，一閃而過的話就要用命令行執行bat文件查看相應報錯信息從而修改conf文件中的配置了。
五. 用FFmpeg進行推流操作
??win+R，cmd，進入命令行，輸入ffmpeg -thread_queue_size 128 -rtsp_transport tcp -i "rtsp://admin:12345@192.168.2.94:554/h264/ch1/main/av_stream" -f flv -s 1024x600 -an rtmp://localhost:1935/live/room，執行，live/可以看成直播頻道，后面room為自定義的直播間名字。
??注意上圖中紅框中的視頻流格式，推流成功但是瀏覽器播放不了大多數情況都是這里格式的原因。
??還是用VLC的網絡串流地址（將目的地址輸進去rtmp://localhost:1935/live/room）驗證是否推流成功。
六. 前端瀏覽器播放
??測試階段我用的是videojs（5.xx.x版本），需要瀏覽器中運行flash插件，IE貌似沒有禁止flash就能直接播放。還有一點需要提醒的就是要通過videojs播放視頻，必須把相應頁面放在web應用中運行，不然不能播放，其他插件同理。
??前端頁面代碼：
<script src="${pageContext.request.contextPath}/js/jquery.min.js">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/js/videojs/video-js.css" />
src="${pageContext.request.contextPath}/js/videojs/ie8/videojs-ie8.js">
<script src="${pageContext.request.contextPath}/js/videojs/video.js"></script>
<script>
videojs.options.flash.swf ="${pageContext.request.contextPath}/js/videojs/video-js.swf";
</script>
??基本上引用路徑對了就能播放了
七. 問題及總結
??測試階段基本上是驗證此技術方案的可行性，后期改動也基本上圍繞這套實現方案進行調優。
??測試階段使用的是FFmpeg在命令行進行推流，推到nginx搭建的流媒體服務器，然后讓前端訪問流媒體服務器的推流地址瀏覽監控視頻。優點就是易于實現，少量攝像頭的前端顯示易于實現，但是弊端也很明顯，當需要部署到外網服務器上時，如果需要修改對應推流地址就要登錄服務器重新在命令行推流，還需要同步修改前端的推流地址，不能動態改變推流地址等；且當攝像頭數量多了會不好維護，服務器桌面也將雜亂不堪，所以有必要將推流和停止推流操作集成到web系統中。
