??因公司業(yè)務(wù)需求荆姆，最近研究了好苫茫康威視攝像頭推流到web前端的實用技術(shù)方案，因為之前并沒有接觸過相關(guān)技術(shù)方向胆筒，所以在實現(xiàn)的時候不說走了彎路邮破，砍掉的技術(shù)方案也不少了，下面慢慢說這一個月的學(xué)習(xí)歷程仆救。
??需求是需要把攝像頭監(jiān)控視頻實時顯示到瀏覽器的系統(tǒng)上抒和，大體實現(xiàn)了三個版本，也可以說是按三個難度層級進(jìn)行實現(xiàn)的：
??一. 測試階段--技術(shù)方案可行性測試
??二. 集成到j(luò)ava web框架中彤蔽，實現(xiàn)攝像頭動態(tài)配置摧莽，并能在前端看到實時監(jiān)控
??三. 擁抱H5，擺脫對flash的依賴顿痪，并編寫簡易的權(quán)限驗證镊辕，避免任何人都能直接訪問流媒體服務(wù)器監(jiān)控視頻
測試階段
一. 電腦連接攝像頭設(shè)備
??首先需要手頭上有海康威視攝像頭設(shè)備以方便調(diào)試蚁袭。
??將電腦和攝像頭用網(wǎng)線連接征懈，攝像頭插上電源，如果有NVR需求需要的則要把攝像頭揩悄、NVR和電腦分別通過網(wǎng)線連接到交換機上卖哎。
二. 連接海康威視攝像頭
??把電腦網(wǎng)段和攝像頭設(shè)置到一個網(wǎng)段删性，這樣才能通過瀏覽器訪問攝像頭配置地址亏娜。
??能進(jìn)到這個界面說明就能連接攝像頭了，這個時候需要打開IE瀏覽器并安裝webcomponent插件蹬挺，確保能進(jìn)行視頻預(yù)覽就行维贺。
三. 下載VLC media player和FFmpeg視頻轉(zhuǎn)碼工具
??下載其他播放器也行，只要保證能播放RTSP和RTMP協(xié)議的視頻流汗侵，這里VLC并不是功能需要幸缕，僅作為能直觀驗證推流操作是否正確的一個工具。
??下載好后把FFmpeg配置到環(huán)境變量的Path中（也不是必須的晰韵，僅僅為了方便點）发乔。
??首先查看能不能通過VLC工具查看RTSP視頻推流
??拉流格式rtsp://用戶名:密碼@攝像頭地址:端口號/編碼/通道號/主(子)碼流/av_stream，這里不清楚的百度下貉┲恚康威視攝像頭推流地址規(guī)則栏尚，能看到就證明攝像頭的拉流地址沒問題，不能看到就需要看下攝像頭RTMP推流端口是不是配對了只恨。
四. 下載nginx和nginx-rtmp-module译仗，并配置conf文件
??測試階段用的是nginx-rtmp-module抬虽，在第三個版本中因為各種考慮換成了nginx-http-flv-module，這里也可以直接用后者進(jìn)行測試纵菌。最好下載別人已經(jīng)編譯好的版本阐污，能省很多時間。
??配置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笛辟，雙擊一閃而過就行，看看控制臺里面是不是有相應(yīng)進(jìn)程序苏。這里提醒幾個地方手幢，開機的時候控制臺中是有nginx相應(yīng)進(jìn)程的，但是還是要運行一次exe才能順利進(jìn)行推流忱详，測試階段后期在桌面創(chuàng)建bat或者sh腳本文件運行時围来，只有命令行窗口一直存在才是成功啟動服務(wù)器的標(biāo)指，一閃而過的話就要用命令行執(zhí)行bat文件查看相應(yīng)報錯信息從而修改conf文件中的配置了匈睁。
五. 用FFmpeg進(jìn)行推流操作
??win+R监透，cmd，進(jìn)入命令行软舌，輸入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才漆，執(zhí)行，live/可以看成直播頻道佛点，后面room為自定義的直播間名字。
??注意上圖中紅框中的視頻流格式黎比，推流成功但是瀏覽器播放不了大多數(shù)情況都是這里格式的原因超营。
??還是用VLC的網(wǎng)絡(luò)串流地址（將目的地址輸進(jìn)去rtmp://localhost:1935/live/room）驗證是否推流成功。
六. 前端瀏覽器播放
??測試階段我用的是videojs（5.xx.x版本）阅虫，需要瀏覽器中運行flash插件演闭，IE貌似沒有禁止flash就能直接播放。還有一點需要提醒的就是要通過videojs播放視頻颓帝，必須把相應(yīng)頁面放在web應(yīng)用中運行米碰，不然不能播放，其他插件同理购城。
??前端頁面代碼：
<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>
??基本上引用路徑對了就能播放了
七. 問題及總結(jié)
??測試階段基本上是驗證此技術(shù)方案的可行性吕座，后期改動也基本上圍繞這套實現(xiàn)方案進(jìn)行調(diào)優(yōu)。
??測試階段使用的是FFmpeg在命令行進(jìn)行推流瘪板，推到nginx搭建的流媒體服務(wù)器吴趴，然后讓前端訪問流媒體服務(wù)器的推流地址瀏覽監(jiān)控視頻。優(yōu)點就是易于實現(xiàn)侮攀，少量攝像頭的前端顯示易于實現(xiàn)锣枝，但是弊端也很明顯厢拭，當(dāng)需要部署到外網(wǎng)服務(wù)器上時，如果需要修改對應(yīng)推流地址就要登錄服務(wù)器重新在命令行推流撇叁，還需要同步修改前端的推流地址供鸠，不能動態(tài)改變推流地址等；且當(dāng)攝像頭數(shù)量多了會不好維護(hù)陨闹，服務(wù)器桌面也將雜亂不堪楞捂，所以有必要將推流和停止推流操作集成到web系統(tǒng)中。
