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