如何不花錢讓html5播放rtsp視頻流（第一彈）

前言：

    在安防項目工做的小夥伴大概都經歷過一段時間，和國內各類攝像頭對接，讓視頻顯示到本身的項目中，這些視頻廠商大多會提供本身的web插件，讓你本身對接，集成到項目中，但這種視頻插件大多使用了瀏覽器ActiveX控件，因此只能在IE內核瀏覽器以及低版本的火狐和谷歌瀏覽器使用，這就意味的你出來要與多個視頻廠家對接，只能用ES5。還要作大量的瀏覽器兼容工做，就拿本人爲例，一年多的時間先後對接了海康NVR，海康平臺，大華平臺，宇視，中天信，科達，東方網力，天地偉業等，IE兼容一度從IE11作到了IE6，期間趟雷趟到腳軟。一句話，我要吐了。爲了解決這些使人髮指的問題，是時候研究一波怎麼不用插件把視頻流直接播放在頁面上且減小視頻對接工做。

需求：

1. 不花錢，採用開源框架，無商業風險
   
2. 延遲低，視屏流穩定
   
3. 大多數nvr和ipc或者攝像機平臺都支持輸出的RTSP視頻流，經過RTSP轉換來實現，減小對接工做
   
4. 無插件在瀏覽器顯示視頻畫面，兼容火狐谷歌高版本瀏覽器
5. 同一頁面播放不一樣廠家視頻

通過一輪嚴謹的科學調（bai）研（du），仍是發現有不少的視頻轉碼解決方案，若是公司願意花錢，你們就不用往下看了，能夠直接使用easyNVR，青柿，Streamedian等等這些付費的流媒體服務。不花錢的方案也有很多，我們今天介紹第一種（文中所提的框架工具具體功能你們自行百度，不作過多的闡述）。

FFmpge + Nginx +Nginx-rtmp + video.js 實現視頻直播

系統環境環境：centos7.5

原理：

最簡單的FFmpeg全量安裝： 

1. 靜態預安裝FFMpeg。
   爲此，首先要獲取安裝腳本：
   wget https://raw.githubusercontent.com/q3aql/ffmpeg-install/master/ffmpeg-install複製代碼

2. 而後使文件可執行：
   
   chmod a+x ffmpeg-install複製代碼

3. 如今安裝發佈版本：
   
   ./ffmpeg-install --install release複製代碼

4. 如今仔細檢查它是否有效：
   
   ffmpeg -version複製代碼

    

    吐槽：一開始使用了yum來安裝，這裏注意只能默認安裝2.X版本，程序長跑的時候發現rtsp轉碼rtmp過程當中大約1小時，轉碼進程會崩潰，致使視頻流斷開。查了資料得知這是2.X版本的一個已知問題，當get_ue_golomb()函數沒法解析大於8190bit的數據，當遇到大於8190bit的數據時，就會報錯。沒辦法，只能裝一個高版本的全量FFmpeg，跟着教程走，十幾個依賴一步一個坎，我只是個前端啊。而後去CSDN找了個FFmpeg安裝腳本，60多個幣，下載下來發現壓根就不能用，腳本文件字母都能打錯了，難道60多幣的東西寫完都不驗證嗎？你這不是坑幣嗎。最後，只能去google老外了，找到了這個腳本，媽媽咪啊，一步到位安裝最新的FFmpeg4.2，視頻轉碼3天不帶斷的。有時候咱們當代程序員是否是要反思一下，不要被金錢衝昏了頭腦，多多助人爲樂，發揚雷鋒精神，嚴謹一些至少寫的東西能用吧，爲改善中國編程環境奉獻一份力量。

    題外話：前段時間技術胖發免費教學視頻遭到一些付費視頻人的打壓，他們認爲這是侵犯了他們的利益，不讓技術胖繼續發免費視頻，這是多麼讓人噁心的行爲。說實話，技術胖是我vue入門的導師，他的視頻簡單易懂，人也很是好，老是樂此不疲的爲一些程序員解決問題。避免新手走不少彎路，多一些這種有奉新精神的大佬，國內的環境是否是能更好一些呢？

最簡單的Nginx-rtmp 安裝

1. 安裝docker
   yum install -y docker
   複製代碼

2. 啓動docker
   systemctl start docker
   複製代碼

3. 下載鏡像
   docker pull tiangolo/nginx-rtmp
   複製代碼

4. 啓動 nginx-rtsp
   docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp複製代碼

小應用：

使用obs 推流到 nginx-rtsp 前端使用video.js播放 就能夠作一個簡單的直播間

關閉防火牆

1. firewall-cmd --state //防火牆狀態複製代碼

2. systemctl stop firewalld.service //中止防火牆複製代碼

3. systemctl disable firewalld.service //禁止防火牆開機啓動複製代碼

FFmpeg推流

1. 海康rtsp格式

   rtsp://帳戶名:密碼@IP:554/h264/ch33/main/av_stream 
   //ch+通道號，main主碼流，sub子碼流複製代碼

2. 大華rtsp格式：

   rtsp://帳戶名:密碼@IP:554/cam/realmonitor?channel=通道號&subtype=碼流複製代碼

3. FFmpeg推流

   ffmpeg -re  -rtsp_transport tcp -i <rtsp地址> -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/隨便寫複製代碼

 注意：推流時必定要使用 -rtsp_transport tcp協議 不然默認UDP，視頻流會有花屏問題，其餘廠家rtsp格式百度一下，大廠基本都能搜到。

相關腳本

1. 多視頻流推流腳本

   #!/bin/shrtspUrl1="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=12&subtype=1"rtspUrl2="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=11&subtype=1"rtspUrl3="rtsp://admin:jd123456@172.16.154.62:554/cam/realmonitor?channel=10&subtype=1"rtspUrl4="rtsp://admin:jidian123@172.16.151.230:554/Streaming/tracks/1001?starttime=20190827t220910z&endtime=20190827t221030z"ffmpeg -re -rtsp_transport tcp -i $rtspUrl1 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/120 &# ffmpeg -re -rtsp_transport tcp -i $rtspUrl2 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/2 &# ffmpeg -re -rtsp_transport tcp -i $rtspUrl3 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/3 &# ffmpeg -re -rtsp_transport tcp -i $rtspUrl4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://localhost:1935/live/4 &複製代碼

2. 殺FFmpeg進程腳本

   #!/bin/bashecho "restart..."pid=`ps -ef | grep rtsp_transport | awk '{print $2}'`if [ -n "$pid" ]then kill -9 $pid echo "kill pid:"$pidfiecho "kill pid finish..."複製代碼

使用建議：使用腳本能夠在同一窗口實現多個視頻流的推送，便於維護。

能夠同過手動執行，記得給腳本加上權限！也能夠本身寫個程序關聯到業務平臺，控制推流的啓動關閉，node，java等均可以實現。

前端頁面播放視頻

能夠經過video.js 封裝一個rtmp播放器，直接在頁面上播放。

這裏咱們推薦ckplayer

html

<div id="video" style="width: 400px; height: 400px; float: left;"></div>複製代碼

js

var videoObject = {            
    container: '#video', //容器的ID或className 
    variable: 'player', //播放函數名稱 
    autoplay: true,            
    live: true,            
    video: 'rtmp://172.16.151.154:1935/live/1'  //rtmp地址 
};
var player = new ckplayer(videoObject);複製代碼

效果

關於性能

服務器配置

內存：32GB

cpu邏輯內核：24

這裏我同時下發了9個FFmpeg進行轉碼，每一個進程內存佔用60mb左右，cup一個邏輯內核佔用20%左右，理想狀態這臺服務滿載能夠達到120任務，但確定是達不到120，我測試過50個同時下發，cpu總佔用50%左右，還要考慮網絡因素，數據只供你們作一個參考，根據本身的服務器量力而行。

相關代碼

github地址：https://github.com/JackFlyL/rtmpPlayer.git

總結

至此，咱們如何實如今html播放rtsp視屏流就能實現了，通常小型安防項目展現十幾個攝像頭這套方案就能勝任，集成項目方便，且瀏覽器兼容好，不再用搞IE兼容了。可是今天說的是初步方案，仍是有一些缺陷的

1. rtmp基於flash播放器，各大瀏覽器如今都紛紛摒棄了flash，因此rtmp播放也不是長久方案。（這裏能夠將rtsp轉爲http協議經過bilibili開發的flv.js進行播放，不使用flash，原理是同樣的）
2. FFmpeg在rtsp轉碼rtmp會有大概3秒的延時，不能達到一些項目需求

如何使用node全棧打造一套，接口請求，FFmpeg實時下發推流，終止推流，徹底獨立的視頻平臺，能夠與任何業務平臺對接。敬請期待如何不花錢讓html5播放rtsp視頻流（第二彈）

最後

仍是提一下技術胖的事吧，以前vue入門 一直跟着技術胖的視頻學習，他的博客不僅僅只有視頻，還細心的吧代碼都一行一行貼了出來，對於新手真的很友好，看了那麼多視頻基本都是白嫖，就連接一下吧，www.jspang.com/

我不知道有多少人能看到，但至少我能影響我周圍的這些人。免費，不等於義務，一句舒適的話也能暖人心。