WEB頁面頁面播放實(shí)時視頻流

務(wù)述求

	需要在WEB端實(shí)時查看現(xiàn)場的視頻監(jiān)控（公司選型的是大華攝像機(jī)）
1

技術(shù)方案選型

1.  ffmpeg通過rtsp協(xié)議拉取視頻流
2.  使用vlc media player 組件拉取視頻流，在web端顯示
3.  使用h5Stream在線對視頻流拉取
123

實(shí)現(xiàn)大方向

把局域網(wǎng)內(nèi)的攝像頭地址做穿刺暴露給外網(wǎng)，并更具響應(yīng)的視頻拉取協(xié)議映射好端口
安裝相應(yīng)的組件，對相應(yīng)視頻流進(jìn)行拉取
在WEB對通過中間件中轉(zhuǎn)，顯示到頁面

實(shí)現(xiàn)細(xì)節(jié)

局域網(wǎng)內(nèi)攝像頭配置

公司選型的大華攝像機(jī)，所有攝像機(jī)出廠統(tǒng)一IP是192.168.1.108 
這個IP是可變的，可配置，但是前提這個IP可以訪問到攝像頭才允許更改
12

在地址欄輸入192.168.1.108，第一次登陸默認(rèn)賬號密碼都為admin，默認(rèn)端口37777，第一次登陸會提醒你更改賬號密碼，記得不要忘記，后面視頻拉取的需要用到，進(jìn)入攝像頭更具自己需要做個性化的配置。相關(guān)協(xié)議端口開放如下：

攝像頭的ip地址穿刺

登錄公司路由器，做端口映射
使用花生殼做穿刺。

使用路由器映射的方法，需要拿到路由器的賬號密碼，這個得跟公司的運(yùn)維溝通下。
用花生殼做穿刺，會免費(fèi)贈送一個域名，但是端口是不固定的，如果配置固定的端口，花生殼需要免費(fèi)收費(fèi)

在百度上輸入本地IP會出現(xiàn)公司路由的外網(wǎng)IP。測試下兩種方式是否可以通過外網(wǎng)IP來訪問。

拉取視頻流

我選用的的是rtsp協(xié)議來拉取視頻流，大華攝像機(jī)的rtsp地址格式如下：

rtsp://[賬號]:[密碼]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0channel=1，此屬性值對應(yīng)渠道。subtype=0對應(yīng)使用主碼流還是輔碼流

不管大華攝像機(jī)也好，還是海康威視攝像機(jī)，他們官網(wǎng)都提供本地局域網(wǎng)內(nèi)的攝像頭管理軟件。進(jìn)入官網(wǎng)，導(dǎo)航找到技術(shù)支持，里面有工具軟件。比如大華的可以用smartPss，?？低暤挠衖VMS，視頻流通過可以通過多個渠道來傳輸，所以channel要和本地軟件中輸出通道一致

比如的本地地址：rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0本地攝像頭IP地址做穿刺后，把賬號密碼換成公網(wǎng)的ip和端口即可。

使用h5Stream拉取視頻流

h5Stream網(wǎng)上的配置文檔很多，不做一一贅述，其主要配置文件為：conf目錄下的h5ss.conf文件。

我這里用的是rtsp協(xié)議，根據(jù)自己的需要配置，一般配置一個空閑的端口即可。

在web端的顯示，在h5stream安裝目錄里, www目錄下有相關(guān)的使用樣例。

優(yōu)點(diǎn)：配置簡單，實(shí)時視頻同步延遲小，畫面清晰。firefox,chrom,ie都可以使用缺點(diǎn)：web頁面操作相對復(fù)雜，在使用多個攝像頭，配置清單駁長，h5stream為收費(fèi)軟件，h5stream為收費(fèi)軟件，h5stream為收費(fèi)軟件，重要的事情說三遍原免費(fèi)版，會在實(shí)時視頻流播放一個小時后斷流，且當(dāng)前暫時沒有找到破解版。我在官網(wǎng)找到電話，打電話過去咨詢，收費(fèi)是100塊錢一個攝像頭，具體的價格可以再談。

vlc media player 拉取

省事兒的話先下載vlc media player安裝，也可以單獨(dú)下載相應(yīng)的控件。下載完成后：

把rtsp地址copy進(jìn)地址欄，測試是否可正常顯示，若不正常請檢查網(wǎng)絡(luò)是否通暢，賬號密碼是否正確，ip端口是否正確，通道是否一致而在web端是根據(jù)相關(guān)的標(biāo)簽來的：實(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)：測試簡單，操作簡單，WEB頁面操作最簡單，視頻清晰度無損，延遲級小。缺點(diǎn)：谷歌只支持43版本及其更早，現(xiàn)在都70+版本了。火狐更直接，直接提示不支持?，F(xiàn)在通過安裝谷歌應(yīng)用程序可以解決，但是面向客戶的時候，客戶不會使用體驗(yàn)版，所以注定就不會使用面就不會廣

ffmpeg拉取視頻流

首先ffmpeg是十分強(qiáng)大，且無比靈活，使用命令行來操作，相對來說就復(fù)雜得多，網(wǎng)上有很多安裝ffmpeg介紹和ffmpeg命令介紹，這里就不做一一贅述。ffmpeg對視頻流進(jìn)行拉取，轉(zhuǎn)成我們需要的視頻碼流，比如我們使用的rtsp協(xié)議，可以轉(zhuǎn)成rtmp協(xié)議或者HLS(m3u8)協(xié)議。本文著重介紹此兩種，其它的協(xié)議格式，原理上相同，只是轉(zhuǎn)碼后頁面顯示的細(xì)節(jié)不同。ffmpeg允許截圖：

使用HLS(m3u8)協(xié)議
也就是ffmpeg把拉取的rtsp轉(zhuǎn)成HLS的視頻流。
命令實(shí)例：ffmpeg -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 D:/workspace/nginx-1.8.1/html/hls/test.m3u8
1

NGINX并不是一定要用，只要能讀取到此今天文件即可。我是通過nginx吧request請求，定向到此文件，當(dāng)然web項目比較靈活，可以通過web來做訪問。生成的文件如下：

靜態(tài)資源只要支持hls協(xié)議，使用今天資源，訪問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)：此方法對網(wǎng)絡(luò)依賴要求比較高，延遲高，容易卡頓

rtmp協(xié)議
命令樣例：ffmpeg -rtsp_transport tcp -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -f flv -r 25 -s 1280*720 -an "rtmp://192.168.0.118:1935/hls/mystream" 1其中把rtsp視頻流轉(zhuǎn)成rtmp視頻流，通過video.js 直接在頁面播放<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400"> <source src="rtmp://192.168.0.118:1935/hls/mystream" type='rtmp/flv'> </video> 123

使用ffmpeg優(yōu)缺點(diǎn)：優(yōu)點(diǎn)：谷歌火狐IE都可以用。缺點(diǎn)： ffmpeg很強(qiáng)大，使用命令很靈活，很多細(xì)節(jié)問題需要琢磨，比如清晰度的問題，比如幀數(shù)的問題。ffmpeg比h5stream和vlc使用上確實(shí)麻煩許多，而且清晰度不如以上兩種，延遲相對也高一下。需要建立相對完善的管理機(jī)制，因?yàn)槿渴褂妹睿诳蛻繇撁骊P(guān)閉視頻流時，后臺還在不停的拉取視頻流，造成極大的資源浪費(fèi)。

不足與思考

不足
單個的視頻播放，注定應(yīng)用面相對狹窄，相當(dāng)于只寫了一半的功能，在很多應(yīng)用場景單個攝像頭是不能滿足業(yè)務(wù)需求的，一般需要拉取多個視頻流，這個就很需要好好的思考的。
多個攝像頭，如果不在同一個局域網(wǎng)，那么拉取視頻流占用較大的資源就無法避免
思考
如果在同一的局域網(wǎng)，使用本地的工具，比如電視墻功能，組播功能，在多個鏡頭信息直接完成一個視頻流拉取多個攝像頭信息
如果是不同的局域網(wǎng)，那么就需要使用ffmpeg的組播功能，vlc和h5stream的支持并不是很友好
視頻流并不是24小時拉取，如果使用ffmpeg的話，在空閑時間并不能主動停止拉取，在WINDOWS下也很難精確地停止某個視頻流的拉取進(jìn)程，在linux下會相對好一些，可以shell腳本找到相對于的pid并KILL

近工作上有個需求，要實(shí)現(xiàn)監(jiān)控攝像頭的視頻在瀏覽器中進(jìn)行點(diǎn)播播放，之前沒接觸過這方面的技術(shù)，在網(wǎng)上研究了一段時間，相關(guān)的實(shí)現(xiàn)方案有很多，相對來說搭建比較簡單同時又不需要購買付費(fèi)功能的方案是基于FFmpeg和nginx的flv實(shí)現(xiàn)方式，總結(jié)了一下相關(guān)的實(shí)現(xiàn)步驟，有需要的同學(xué)可以拿去。

一、安裝ffmpeg

首先需要安裝ffmpeg，ffmpeg是開源的音視頻處理軟件，功能強(qiáng)大，也很穩(wěn)定，既能實(shí)現(xiàn)視頻的編解碼進(jìn)行格式轉(zhuǎn)換，也能進(jìn)行視頻流的推送和拉取，同時支持rtsp、rtmp、hls等多種協(xié)議。

ffmpeg的下載地址如下：

http://ffmpeg.org/download.html

我選擇的版本是4.4，大家可以根據(jù)需要自己選擇合適的版本，注意下載的是ffmpeg的源碼，后面要根據(jù)不同的平臺進(jìn)行編譯安裝。

ffmpeg下載頁面

在編譯ffmpeg之前需要安裝第三方庫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安裝完后，再通過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)的類庫。

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上開源的項目。

github項目地址：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主頁的說明樣例。

三、啟動推流

nginx配置完成之后，就可以使用ffmpeg從攝像頭中拉取原始rtsp視頻流，轉(zhuǎn)換為trmp視頻流，并推送到nginx服務(wù)器中，由nginx服務(wù)器對外提供flv格式的視頻流。

可以通過如下命令啟動推流。-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

四、前端通過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>

至此，免費(fèi)的流媒體服務(wù)已經(jīng)搭建好了，有需要的同學(xué)可以嘗試一下，本人親自測試可用。

最近需要在web項目中顯示監(jiān)控視頻，采用了webrtc+webrtc-streamer+coturn的方案實(shí)現(xiàn)，能夠在公網(wǎng)上做很低的延時，對于實(shí)時監(jiān)控視頻有很好的效果，是目前來講比較好的一個選擇方案。

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提供的一個服務(wù)，國內(nèi)訪問及其不穩(wěn)定，關(guān)于cotum的安裝請參照官網(wǎng)。這里啟動好以后，就可以通過瀏覽器訪問8000端口的服務(wù)了，這里可以通過以下地址來驗(yàn)證視頻流服是否成功。

http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101

如果上面的地址能播放視頻，說明配置成功了，地址后面的參數(shù)是視頻流的地址。

二、web端視頻顯示代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- webrtc公用庫-->
    <script src="/js/adapter.js"></script>
    <!-- webrtc-streamer調(diào)用庫，來自webrtc-streamer-->
    <script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 視頻顯示部分 -->
<div id="play_div"></div>
<script>
    var webRtcServerList = [];//視頻流服務(wù)對象部分
    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)建一個播放器
        var vi_tag='videoTag_'+idx;//播放器的id
        videoelt.id = vi_tag;//播放器id
        videoelt.muted = true;
        videoelt.width=500;
        videoelt.height=600;
        videoelt.controls=true;//開啟進(jìn)度條
        document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
        var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創(chuàng)建webrtc流對象
        //連接視頻,參數(shù)1 視頻地址，參數(shù)2 音頻地址（這里沒有），參數(shù)3 連接參數(shù)(這里采用的是tcp,120秒超時等）
        webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
        webRtcServerList[idx]=webRtcServer;//緩存視頻流對象
    }
    //----------頁面退出時關(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>

這樣就完成了整個項目實(shí)現(xiàn)，這里如果視頻沒有播放成功，最有可能是穿透服務(wù)的問題，需要檢查穿透服務(wù)。

在線咨詢

上一篇：HTML從基礎(chǔ)到精通-css布局
下一篇：WORD_VBA文本框的添加、刪除、寫入及保存為html文件

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。