?？礡TSP流轉(zhuǎn)RTMP并推送至Web端展示

jackeyqing 2019-07-07

展開(kāi)全文

最近幫著老師做項(xiàng)目的時(shí)候碰到一個(gè)難題,，將?？禂z像頭的影像實(shí)時(shí)傳輸?shù)角岸隧?yè)面進(jìn)行展示。Google查了兩天,，終于有些眉目,，記錄一下經(jīng)驗(yàn)。

大致需要經(jīng)過(guò)以下幾個(gè)步驟：

獲取?？禂z像頭的視頻流（基于RTSP協(xié)議的視頻流）
流媒體服務(wù)器搭建
前端頁(yè)面選用合適的播放器進(jìn)行播放

下面詳細(xì)說(shuō)明一下每個(gè)步驟

1. 獲取?？禂z像頭的視頻流（基于RTSP協(xié)議的視頻流）

不僅僅是海康攝像頭,，市面上大多數(shù)攝像頭的視頻流都是基于RTSP協(xié)議的,，查閱了一下資料了解到?？档腞TSP流格式：

rtsp://<賬號(hào)>:<密碼>@<IP>:554/<編碼>/<通道>/main/av_stream
例如 rtsp://admin:[email protected]:554/h264/ch1/main/av_stream

說(shuō)一下 '/h264/ch1/main/av_stream’ 這部分,，其中“h264”代表獲取h264格式編碼的流，我們實(shí)驗(yàn)室用的攝像頭支持兩種格式的編碼,，h264和h265,，可以在終端進(jìn)行設(shè)置,，雖然h265編碼比較好,，但是后邊幾個(gè)步驟用到的技術(shù)對(duì)這個(gè)格式的支持很不友好,，因此在這里建議使用h264的編碼,。后邊的“ch1/main/av_stream”表示一些主碼流、子碼流,、通道一類(lèi)的信息，一般情況下按照這個(gè)格式填寫(xiě)就行,。

拿到最終的URL后，最好測(cè)試一下是否是正確的,，這里推薦用最新版的VLC做測(cè)試,，VLC是一個(gè)非常強(qiáng)大的播放器，幾乎支持所有格式的視頻播放,。
這里寫(xiě)圖片描述
打開(kāi)VLC-媒體-打開(kāi)網(wǎng)絡(luò)串流,，彈出上面這個(gè)頁(yè)面，把rtsp地址填進(jìn)去,，看看是否正常播放,，如果不能，應(yīng)該是賬號(hào)密碼錯(cuò)誤或者格式不對(duì),。

2.流媒體服務(wù)器搭建

首先是rtsp轉(zhuǎn)碼
瀏覽器直接展示RTSP流稍微有點(diǎn)困難,，但是也并不是沒(méi)有辦法，VLC Plugin 貌似可以做到,，但是新版本的瀏覽器都不再支持這個(gè)插件了，所以只能將RTSP進(jìn)行一個(gè)轉(zhuǎn)碼,。
一開(kāi)始計(jì)劃了兩種方案,，一個(gè)是轉(zhuǎn)成m3u8格式（基于HLS協(xié)議），另一個(gè)是采用FLV格式（基于RTMP協(xié)議）,，因?yàn)榍罢叩难訒r(shí)比較大,，所以最后采用了后者（從效果來(lái)看，RTMP協(xié)議的延時(shí)幾乎察覺(jué)不出來(lái)）,。
這兩種轉(zhuǎn)碼的方式差不多,，都是用ffmpeg進(jìn)行轉(zhuǎn)碼+推流，指令如下：
ffmpeg -i "rtsp://admin:[email protected]:554/h265/ch1/main/av_stream" -f flv -r 25 -s 640x360 -an rtmp://localhost:1935/live/room
這個(gè)指令中有兩個(gè)URL,，一個(gè)是RTSP視頻流的地址,，另外一個(gè)是接收RTMP流的流媒體服務(wù)器地址。流媒體服務(wù)器需要另外搭建,，我這里選擇的是整合了RTMP模塊的Nginx,。Linux版本的安裝隨便一百度就有,，但是Windows版本就稍微復(fù)雜點(diǎn)，我這有一個(gè)整合好了的可以直接用的,，需要的可以自取,。

鏈接: https://pan.baidu.com/s/19cqUxAdZPEA1WlwSMKMkSg 密碼: r3sr

RTMP默認(rèn)端口號(hào)1935，開(kāi)啟Nginx后可以直接用ffmpeg直接推過(guò)去,，rtmp://localhost:1935/live/room的路徑部分是可以隨意更換的,。注意要先開(kāi)Nginx然后再推流,，下邊是在windows下的效果圖
ffmpeg轉(zhuǎn)碼+推流
然后復(fù)制rtmp://localhost:1935/live/room到VLC中,，如果正常播放，說(shuō)明流服務(wù)器搭建成功,。

前端播放

支持RTMP播放的播放器找了好久,，最后選擇了videojs。這里還有一些坑,。首先是播放器頁(yè)面如果不丟到服務(wù)器環(huán)境下可能出現(xiàn)無(wú)法播放的情況,。還有就是，因?yàn)椴シ牌魇腔趂lash的,，需要瀏覽器開(kāi)啟flash支持,，但是一般情況下如果需要flash，瀏覽器都會(huì)彈窗詢問(wèn),，但是不曉得為啥這個(gè)播放器不會(huì)彈窗,，所以需要手動(dòng)啟動(dòng)瀏覽器的flash支持。chrome的話是點(diǎn)擊url欄左邊的感嘆號(hào)進(jìn)行設(shè)置,，其他瀏覽器不太清楚,。另外，這個(gè)設(shè)置不是全局設(shè)置,，也就是說(shuō)如果項(xiàng)目站點(diǎn)移植之后,，需要重新設(shè)置一下。
頁(yè)面代碼如下：'

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video.js | HTML5 Video Player</title>
    <link href="http://vjs./5.20.1/video-js.css" rel="stylesheet">
    <script src="http://vjs./5.20.1/videojs-ie8.min.js"></script>
</head>
<body width="640px" height="360px">

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640px" height="360px"  data-setup="{}">
    <source src="rtmp:/localhost:80/live/opencv" type="rtmp/flv">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http:///html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>

  <script src="http://vjs./5.20.1/video.js"></script>
</body>
</html>

2019-01-10補(bǔ)充說(shuō)明

前端播放部分,，除了使用videoJS,，還可以使用百度的 cyberplayer,是在videoJS的基礎(chǔ)上開(kāi)發(fā)的，針對(duì)直播做了很多優(yōu)化,，使用方便而且文檔也比較全,，強(qiáng)烈安利！

2019-01-21補(bǔ)充說(shuō)明

注意：本教程僅適用h264編碼的流,，有些受硬盤(pán)錄像機(jī)管理的攝像頭,，即便是填寫(xiě)了/h264這個(gè)參數(shù)（rtsp://admin:[email protected]:554/h264/ch1/main/av_stream ），但是返回的仍然是h265格式的流,，這個(gè)需要在硬盤(pán)錄像機(jī)里修改,。直接訪問(wèn)攝像頭后臺(tái)修改的話,，過(guò)幾分鐘會(huì)被重置。如果按照教程配置到最后出現(xiàn)VLC可以播放但是web無(wú)法播放的情況,，很有可能就是這個(gè)問(wèn)題,。

查看攝像頭編碼的方法：

直接在硬盤(pán)錄像機(jī)里查看
VLC里邊查看：首先在VLC里拉流->tools->Codec選項(xiàng)卡->查看Codec參數(shù)

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： jackeyqing > 《視頻直播點(diǎn)播》

舉報(bào)/認(rèn)領(lǐng)