整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
需要在WEB端實時查看現場的視頻監控（公司選型的是大華攝像機）
11. ffmpeg通過rtsp協議拉取視頻流
2. 使用vlc media player 組件拉取視頻流，在web端顯示
3. 使用h5Stream在線對視頻流拉取
123局域網內攝像頭配置
公司選型的大華攝像機，所有攝像機出廠統一IP是192.168.1.108
這個IP是可變的，可配置，但是前提這個IP可以訪問到攝像頭才允許更改
12在地址欄輸入192.168.1.108，第一次登陸默認賬號密碼都為admin，默認端口37777，第一次登陸會提醒你更改賬號密碼，記得不要忘記，后面視頻拉取的需要用到，進入攝像頭更具自己需要做個性化的配置。相關協議端口開放如下：
攝像頭的ip地址穿刺
使用路由器映射的方法，需要拿到路由器的賬號密碼，這個得跟公司的運維溝通下。
用花生殼做穿刺，會免費贈送一個域名，但是端口是不固定的，如果配置固定的端口，花生殼需要免費收費
在百度上輸入本地IP會出現公司路由的外網IP。測試下兩種方式是否可以通過外網IP來訪問。
拉取視頻流
我選用的的是rtsp協議來拉取視頻流，大華攝像機的rtsp地址格式如下：
rtsp://[賬號]:[密碼]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0channel=1，此屬性值對應渠道。subtype=0對應使用主碼流還是輔碼流
不管大華攝像機也好，還是海康威視攝像機，他們官網都提供本地局域網內的攝像頭管理軟件。進入官網，導航找到技術支持，里面有工具軟件。比如大華的可以用smartPss，海康威視的有iVMS，視頻流通過可以通過多個渠道來傳輸，所以channel要和本地軟件中輸出通道一致
比如的本地地址：rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0本地攝像頭IP地址做穿刺后，把賬號密碼換成公網的ip和端口即可。
使用h5Stream拉取視頻流
h5Stream網上的配置文檔很多，不做一一贅述，其主要配置文件為：conf目錄下的h5ss.conf文件。
我這里用的是rtsp協議，根據自己的需要配置，一般配置一個空閑的端口即可。
在web端的顯示，在h5stream安裝目錄里, www目錄下有相關的使用樣例。
優點：配置簡單，實時視頻同步延遲小，畫面清晰。firefox,chrom,ie都可以使用缺點：web頁面操作相對復雜，在使用多個攝像頭，配置清單駁長，h5stream為收費軟件，h5stream為收費軟件，h5stream為收費軟件，重要的事情說三遍原免費版，會在實時視頻流播放一個小時后斷流，且當前暫時沒有找到破解版。我在官網找到電話，打電話過去咨詢，收費是100塊錢一個攝像頭，具體的價格可以再談。
vlc media player 拉取
省事兒的話先下載vlc media player安裝，也可以單獨下載相應的控件。下載完成后：
把rtsp地址copy進地址欄，測試是否可正常顯示，若不正常請檢查網絡是否通暢，賬號密碼是否正確，ip端口是否正確，通道是否一致而在web端是根據相關的標簽來的：實例如下：
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<param name="autostart" value="true" />
<param name="allowfullscreen" value="false" />
</object>
1234鏈接: vlc使用操作文檔.
優點：測試簡單，操作簡單，WEB頁面操作最簡單，視頻清晰度無損，延遲級小。缺點：谷歌只支持43版本及其更早，現在都70+版本了。火狐更直接，直接提示不支持。現在通過安裝谷歌應用程序可以解決，但是面向客戶的時候，客戶不會使用體驗版，所以注定就不會使用面就不會廣
ffmpeg拉取視頻流
首先ffmpeg是十分強大，且無比靈活，使用命令行來操作，相對來說就復雜得多，網上有很多安裝ffmpeg介紹和ffmpeg命令介紹，這里就不做一一贅述。ffmpeg對視頻流進行拉取，轉成我們需要的視頻碼流，比如我們使用的rtsp協議，可以轉成rtmp協議或者HLS(m3u8)協議。本文著重介紹此兩種，其它的協議格式，原理上相同，只是轉碼后頁面顯示的細節不同。ffmpeg允許截圖：
NGINX并不是一定要用，只要能讀取到此今天文件即可。我是通過nginx吧request請求，定向到此文件，當然web項目比較靈活，可以通過web來做訪問。生成的文件如下：
靜態資源只要支持hls協議，使用今天資源，訪問test.m38u文件即可引入video.js,我使用的是7.4.1
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400">
<source src="http://192.168.0.118:1935/hls/test.m38u" type='rtmp/flv'>
</video>
123缺點：此方法對網絡依賴要求比較高，延遲高，容易卡頓
使用ffmpeg優缺點：優點：谷歌火狐IE都可以用。缺點： ffmpeg很強大，使用命令很靈活，很多細節問題需要琢磨，比如清晰度的問題，比如幀數的問題。ffmpeg比h5stream和vlc使用上確實麻煩許多，而且清晰度不如以上兩種，延遲相對也高一下。需要建立相對完善的管理機制，因為全部使用命令，在客戶頁面關閉視頻流時，后臺還在不停的拉取視頻流，造成極大的資源浪費。
近工作上有個需求，要實現監控攝像頭的視頻在瀏覽器中進行點播播放，之前沒接觸過這方面的技術，在網上研究了一段時間，相關的實現方案有很多，相對來說搭建比較簡單同時又不需要購買付費功能的方案是基于FFmpeg和nginx的flv實現方式，總結了一下相關的實現步驟，有需要的同學可以拿去。
一、安裝ffmpeg
首先需要安裝ffmpeg，ffmpeg是開源的音視頻處理軟件，功能強大，也很穩定，既能實現視頻的編解碼進行格式轉換，也能進行視頻流的推送和拉取，同時支持rtsp、rtmp、hls等多種協議。
ffmpeg的下載地址如下：
http://ffmpeg.org/download.html
我選擇的版本是4.4，大家可以根據需要自己選擇合適的版本，注意下載的是ffmpeg的源碼，后面要根據不同的平臺進行編譯安裝。
ffmpeg下載頁面
在編譯ffmpeg之前需要安裝第三方庫yasm，下載地址如下：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
將安裝包上傳服務器，按照如下步驟進行yasm的安裝。
tar zxvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make
make install
yasm安裝完后，再通過yum安裝gcc編譯器。
yum install gcc
gcc編譯器安裝完成之后就可以編譯ffmpeg，并進行安裝了。
tar zxvf ffmpeg-4.4.tar.gz
cd ffmpeg-4.4
./configure --enable-shared --prefix=/usr/local/ffmpeg
make
make install
ffmpeg安裝完后，需要修改配置文件，引入相關的類庫。
vi /etc/ld.so.conf
輸入以下內容
include ld.so.conf.d/*.conf
/usr/local/ffmpeg/lib/
執行如下命令，使設置生效：
ldconfig
查看下ffmpeg版本，是否是預期的版本。
/usr/local/ffmpeg/bin/ffmpeg -version
查看ffmpeg版本
二、安裝nginx
注意這里使用的nginx需要在原始nginx的基礎上增加編譯nginx-http-flv-module模塊。nginx-http-flv-module是github上開源的項目。
github項目地址：https://github.com/winshining/nginx-http-flv-module
分別下載Nginx（http://nginx.org/en/download.html）和nginx-http-flv-module源碼，進行編譯安裝。我使用的nginx版本是1.18.0，編譯命令中--prefix參數執行nginx安裝路徑，--add-module參數指定nginx-http-flv-module源碼路徑。
cd nginx-1.18.0/
./configure --prefix=/usr/local/nginx-media --with-http_gzip_static_module --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-flv-module-1.2.9
make
make install
安裝完成之后，修改nginx配置文件/usr/local/nginx-media/conf/nginx.conf，配置流媒體服務器。配置可以參考https://github.com/winshining/nginx-http-flv-module主頁的說明樣例。
三、啟動推流
nginx配置完成之后，就可以使用ffmpeg從攝像頭中拉取原始rtsp視頻流，轉換為trmp視頻流，并推送到nginx服務器中，由nginx服務器對外提供flv格式的視頻流。
可以通過如下命令啟動推流。-i參數執行原始rtsp視頻流地址，需要包含認證信息。rtmp協議地址是在nginx中配置的服務器地址。
/usr/local/ffmpeg/bin/ffmpeg -i rtsp://username:password@rtsp視頻流地址 -vcodec copy -acodec copy -f flv rtmp://nginx服務器IP/myapp/s1
四、前端通過flv.js播放視頻流
flv.js也是一個github上的開源項目，項目地址：https://github.com/Bilibili/flv.js/
在前端項目中引入flv.js包，在頁面代碼中通過flvPlayer播放視頻流。url是通過nginx提供的flv的視頻流地址，http://nginx地址:端口/live?port=1935&app=myapp&stream=s1
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>至此，免費的流媒體服務已經搭建好了，有需要的同學可以嘗試一下，本人親自測試可用。
最近需要在web項目中顯示監控視頻，采用了webrtc+webrtc-streamer+coturn的方案實現，能夠在公網上做很低的延時，對于實時監控視頻有很好的效果，是目前來講比較好的一個選擇方案。
1、webrtc 用于視頻流的顯示。
2、webrtc-streamer負責去監控視頻主機（這里多數是NVR或DVR）去拉取RSTP視頻流，并轉發到Webrtc中進行顯示。
3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務，主要作用是穿透做NAT穿透，讓雙方找到能互相找到。
網絡邏輯結構圖
一、webrtc-streamer安裝
這里采用的是CentOS 7系統，直接采用的Docker安裝，關于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。
docker pull mpromonet/webrtc-streamer
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478這里后面的-t和-s參數分別指向cotum的strun和tun服務，這里同內一定要用自己搭建的穿透服務，webrtc-streamer內置的服務是指向goole提供的一個服務，國內訪問及其不穩定，關于cotum的安裝請參照官網。這里啟動好以后，就可以通過瀏覽器訪問8000端口的服務了，這里可以通過以下地址來驗證視頻流服是否成功。
http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101如果上面的地址能播放視頻，說明配置成功了，地址后面的參數是視頻流的地址。
二、web端視頻顯示代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- webrtc公用庫-->
<script src="/js/adapter.js"></script>
<!-- webrtc-streamer調用庫，來自webrtc-streamer-->
<script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 視頻顯示部分 -->
<div id="play_div"></div>
<script>
var webRtcServerList = [];//視頻流服務對象部分
var urls=[
'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址
'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址
];
var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務地址
//---------創建視頻播放界面--------------------------------------------------------
function plays(idx){
var videoelt = document.createElement("video");//創建一個播放器
var vi_tag='videoTag_'+idx;//播放器的id
videoelt.id = vi_tag;//播放器id
videoelt.muted = true;
videoelt.width=500;
videoelt.height=600;
videoelt.controls=true;//開啟進度條
document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創建webrtc流對象
//連接視頻,參數1 視頻地址，參數2 音頻地址（這里沒有），參數3 連接參數(這里采用的是tcp,120秒超時等）
webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
webRtcServerList[idx]=webRtcServer;//緩存視頻流對象
}
//----------頁面退出時關閉播放流---------------------
window.onbeforeunload = function() {
for(var i=0;i<webRtcServerList.length;i++){
webRtcServerList[i].disconnect();
}
}
//---------初始化加載視頻----------------------------
window.onload= function() {
for(var i=0;i<urls.length;i++){
plays(i);
}
}
</script>
</body>
</html>這樣就完成了整個項目實現，這里如果視頻沒有播放成功，最有可能是穿透服務的問題，需要檢查穿透服務。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
