H5直播RTSP攝像頭視頻流解決方案

頻直播是借助流媒體及通信技術(shù)，通過采集、編碼、發(fā)布和播放等過程實(shí)現(xiàn)實(shí)時播放。近年來，隨著移動互聯(lián)網(wǎng)的發(fā)展，企業(yè)的移動端應(yīng)用日漸增長，手機(jī)直播需求也應(yīng)運(yùn)而生。根據(jù)業(yè)務(wù)需求，需在App端和H5端調(diào)用攝像頭視頻流，來達(dá)到現(xiàn)場生產(chǎn)作業(yè)直播的目的。

1 需求分析

我廠安裝的攝像頭，主要由海康威視、大華和英飛拓三個品牌構(gòu)成，輸出協(xié)議均為RTSP。App端支持直接播放RTSP協(xié)議的視頻流，但無法直接在H5端顯示。故欲達(dá)到在H5端直播的目的，需要將RTSP協(xié)議轉(zhuǎn)換成RTMP或HLS協(xié)議。

常見流媒體協(xié)議：

1、RTSP協(xié)議：英文全稱 Real Time Streaming Protocol，RFC2326，實(shí)時流傳輸協(xié)議，是TCP/IP協(xié)議體系中的一個應(yīng)用層協(xié)議！協(xié)議主要規(guī)定定了一對多應(yīng)用程序如何有效地通過IP網(wǎng)絡(luò)傳送多媒體數(shù)據(jù)。RTSP體系結(jié)位于RTP和RTCP之上（RTCP用于控制傳輸，RTP用于數(shù)據(jù)傳輸），使用TCP或UDP完成數(shù)據(jù)傳輸！

2、RTMP協(xié)議：RTMP協(xié)議是Real Time Message Protocol(實(shí)時信息傳輸協(xié)議)的縮寫，它是由Adobe公司提出的一種應(yīng)用層的協(xié)議，用來解決多媒體數(shù)據(jù)傳輸流的多路復(fù)用（Multiplexing）和分包（packetizing）的問題。

3、HLS協(xié)議：HTTP Live Streaming，是Apple的開放標(biāo)準(zhǔn)，基于HTTP流，它最初是蘋果公司針對蘋果移動設(shè)備而開發(fā)的流，由于是基于HTTP的，因此很多HTTP的優(yōu)點(diǎn)都得到了繼承。

RTMP協(xié)議支持在Html播放，但是它依賴flash播放器，所以在移動端H5不能采用RTMP協(xié)議。HLS協(xié)議基于HTTP流，支持IOS、Android、HTML5，故采取將RTSP拉流并轉(zhuǎn)碼為HLS協(xié)議輸出的方式，下圖是HLS的工作原理：

2 架構(gòu)設(shè)計

考慮到內(nèi)網(wǎng)帶寬限制及多用戶并發(fā)以及便于管理，我們采用流媒體服務(wù)器（內(nèi)外網(wǎng)映射、拉流/轉(zhuǎn)碼）+web服務(wù)器+手機(jī)App+H5的方案，其中流媒體服務(wù)器負(fù)責(zé)拉取攝像頭RTSP視頻流，并壓縮編碼成HLS，等待來自手機(jī)App+H5的request請求；WEB服務(wù)器用于管理攝像頭信息；H5端通過video.js開源插件實(shí)現(xiàn)播放，架構(gòu)圖如下：

3 具體實(shí)現(xiàn)

為了保證系統(tǒng)穩(wěn)定性及管理便捷性，我們使用了EasyNVR流媒體服務(wù)器軟件，EasyNVR集成了可視化web管理服務(wù)，能夠通過簡單的網(wǎng)絡(luò)攝像機(jī)通道配置，將傳統(tǒng)監(jiān)控行業(yè)里面的高清網(wǎng)絡(luò)攝像機(jī)IP Camera、NVR等具有RTSP協(xié)議輸出的設(shè)備接入到EasyNVR，EasyNVR能夠?qū)⑦@些視頻源的音視頻數(shù)據(jù)進(jìn)行拉取，轉(zhuǎn)換為RTMP或HLS，進(jìn)行全平臺終端H5直播（Web、Android、iOS）

相關(guān)學(xué)習(xí)資料推薦，點(diǎn)擊下方鏈接免費(fèi)報名，先碼住不迷路~】

音視頻免費(fèi)學(xué)習(xí)地址：https://xxetb.xet.tech/s/2cGd0

【免費(fèi)分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點(diǎn)擊788280672加群免費(fèi)領(lǐng)取~

1、安裝流媒體服務(wù)器軟件EasyNVR

在EasyNVR官網(wǎng)下載安裝包，解壓后運(yùn)行ServiceInstall-EasyNVR.exe進(jìn)行安裝，成功將啟動web管理界面。

2 獲取攝像機(jī)的RTSP流

我們以海康威視攝像頭為例，首先在攝像頭機(jī)web管理界面（默認(rèn)入口是攝像頭ip地址），在網(wǎng)絡(luò)菜單配置里了，開通UPnP端口，以及RTSP視頻流的映射。

開通映射以后，UPnP狀態(tài)顯示生效。

根據(jù)海康威視攝像頭的視頻流格式，拼出該攝像頭的RTSP地址，如：rtsp://賬號:密碼@http://172.16.xxx.xxx:554/h264/ch35/main/av_stream

可使用VLC media player軟件對攝像頭視頻流進(jìn)行測試，看看是否正常輸出。

3、添加攝像頭信息

將攝像頭rtsp視頻流，配置到easyNvr的通道后，點(diǎn)擊預(yù)覽查看視頻能否正確輸出。

4、HLS轉(zhuǎn)碼

在預(yù)覽界面，其他設(shè)置一欄中，可以查看HLS的.m3u8地址。

5、demo測試

采用video.js開源的視頻插件編碼，調(diào)用.m3u8地址,在H5端成功展示視頻。

通過項(xiàng)目中實(shí)際的應(yīng)用，HLS直播在無論是在實(shí)時性、連續(xù)性還是多用戶并發(fā)控制方面都達(dá)到了我們預(yù)期的目標(biāo)。

原文 H5直播RTSP攝像頭視頻流解決方案 - 掘金

同學(xué)問道：需要實(shí)時播放攝像頭rtsp視頻流，而瀏覽器不能直接播放，怎樣解決？

實(shí)現(xiàn)這個需求可以通過插件或者轉(zhuǎn)碼來實(shí)現(xiàn)。

要實(shí)現(xiàn)這個目的，可以采用的方案非常得多，有商業(yè)的也有開源的，這里主要列舉一些開源的方案。這里的方案都是我嘗試過了的，有些成功，有些沒成功。但是因?yàn)槊總€項(xiàng)目情況不同，這次沒成的方法，換個項(xiàng)目也許就能成。

C++音視頻開發(fā)學(xué)習(xí)資料：點(diǎn)擊莬費(fèi)領(lǐng)取→音視頻開發(fā)（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案一: html5 + websocket_rtsp_proxy 實(shí)現(xiàn)視頻流直播

實(shí)現(xiàn)原理

實(shí)現(xiàn)步驟

服務(wù)器安裝streamedian服務(wù)器
客戶端通過video標(biāo)簽播放


<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
        var errHandler=function(err){
            console.log('err', err.message);
        };

        var infHandler=function(inf) {
            console.log('info', inf)
        };

        var playerOptions={
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player=document.getElementById("test_video");
        html5Player.src="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";

        var player=Streamedian.player('test_video', playerOptions);

        
        window.onbeforeunload=function(){
            player && player.destroy();
            player=null;
            Request=null;
        }
    }
</script>

注意：測試時先從官網(wǎng)申請license key，否則socket 只能識別localhost和127.0.0.1

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：實(shí)現(xiàn)比較簡單
缺點(diǎn)：收費(fèi)的，免費(fèi)版有很多限制

C++音視頻開發(fā)學(xué)習(xí)資料：點(diǎn)擊莬費(fèi)領(lǐng)取→音視頻開發(fā)（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案二：ffmpeg + nginx + video，rtsp轉(zhuǎn)rtmp播放

rtmp是adobe開發(fā)的協(xié)議，一般使用adobe media server 可以方便的搭建起來；隨著開源時代的到來，有大神開發(fā)了nginx的rtmp插件，也可以直接使用nginx實(shí)現(xiàn)rtmp

rtmp方式的最大的優(yōu)點(diǎn)在于低延時，經(jīng)過測試延時普遍在1-3秒，可以說很實(shí)時了；缺點(diǎn)在于它是adobe開發(fā)的，rtmp的播放嚴(yán)重依賴flash，而由于flash本身的安全，現(xiàn)代瀏覽器大多禁用flash

實(shí)現(xiàn)步驟

安裝ffmpeg工具
安裝nginx 注意：linux系統(tǒng)需要安裝 nginx-rtmp-module 模塊，Windows系統(tǒng)安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}

4.ffmpeg轉(zhuǎn)碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

5.video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf="./videojs/video-js.swf"
    var player=videojs('test_video', {"autoplay":true});
    player.play();
</script>

注意：使用谷歌瀏覽器播放時，需要開啟flash允許

C++音視頻開發(fā)學(xué)習(xí)資料：點(diǎn)擊莬費(fèi)領(lǐng)取→音視頻開發(fā)（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案三：ffmpeg + video，rtsp轉(zhuǎn)hls播放

HLS (HTTP Live Streaming) 直播是有蘋果提出的一個基于http的協(xié)議。其原理是把整個流切分成一個個的小視頻文件，然后通過一個m3u8的文件列表來管理這些視頻文件

HTTP Live Streaming 并不是一個真正實(shí)時的流媒體系統(tǒng)，這是因?yàn)閷?yīng)于媒體分段的大小和持續(xù)時間有一定潛在的時間延時。在客戶端，至少在一個分段媒體文件被完全下載后才能夠開始播放，而通常要求下載完兩個媒體文件之后才開始播放以保證不同分段音視頻之間的無縫連接。

此外，在客戶端開始下載之前，必須等待服務(wù)器端的編碼器和流分割器至少生成一個TS文件，這也會帶來潛在的時延。

服務(wù)器軟件將接收到的流每緩存一定時間后包裝為一個新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的幾個片段的索引，以保證觀眾任何時候連接進(jìn)來都會看到較新的內(nèi)容，實(shí)現(xiàn)近似直播的效果。

這種方式的理論最小延時為一個ts文件的時長，一般為2-3個ts文件的時長。

實(shí)現(xiàn)步驟

安裝ffmpeg工具
ffmpeg轉(zhuǎn)碼

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

ffmpeg 關(guān)于hls方面的指令說明

-hls_time n: 設(shè)置每片的長度，默認(rèn)值為2。單位為秒
-hls_list_size n:設(shè)置播放列表保存的最多條目，設(shè)置為0會保存有所片信息，默認(rèn)值為5
-hls_wrap n:設(shè)置多少片之后開始覆蓋，如果設(shè)置為0則不會覆蓋，默認(rèn)值為0.這個選項(xiàng)能夠避免在磁盤上存儲過多的片，而且能夠限制寫入磁盤的最多的片的數(shù)量
-hls_start_number n:設(shè)置播放列表中sequence number的值為number，默認(rèn)值為0

3.video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf="./videojs/video-js.swf"
    var player=videojs('my_video_1', {"autoplay":true});
    player.play();
</script>

C++音視頻開發(fā)學(xué)習(xí)資料：點(diǎn)擊莬費(fèi)領(lǐng)取→音視頻開發(fā)（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案四：VLC插件播放

播放步驟

下載安裝vlc
瀏覽器播放


<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：可以直接播放RTSP，無需任何中介服務(wù)器的幫助
缺點(diǎn)：需要手動安裝插件；基于NPAPI，不被最新的 Chrome 和 Firefox 支持
如果你項(xiàng)目的其他功能都能兼容客戶電腦上的 IE 瀏覽器，這個方案就是首選。

其他方案

WebRTC

WebRTC 是支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時音視頻的一套API，例如：HTML5 通過 webRTC 直接調(diào)用攝像頭，但是如果要實(shí)現(xiàn)遠(yuǎn)程視頻流的顯示，則需要將 RTSP 轉(zhuǎn)換為 WebRTC 流，供 web 端顯示。

h5stream

GB28181

jsmpeg.js + ffmpeg + websocket + node

如果你對音視頻開發(fā)感興趣，或者對本文的一些闡述有自己的看法，可以在下方的留言框，一起探討。

者：竹之同學(xué)

轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000022994032

在線咨詢

上一篇：利用CSS filter的屬性給img修改顏色
下一篇：css中如何讓div水平居中(下)

您的項(xiàng)目需求

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

整合營銷服務(wù)商

H5直播RTSP攝像頭視頻流解決方案

1 需求分析

2 獲取攝像機(jī)的RTSP流

3、添加攝像頭信息

4、HLS轉(zhuǎn)碼

5、demo測試

方案一: html5 + websocket_rtsp_proxy 實(shí)現(xiàn)視頻流直播

方案二：ffmpeg + nginx + video，rtsp轉(zhuǎn)rtmp播放

方案三：ffmpeg + video，rtsp轉(zhuǎn)hls播放

方案四：VLC插件播放

其他方案

WebRTC

h5stream

GB28181

jsmpeg.js + ffmpeg + websocket + node

您的項(xiàng)目需求