html5播放rtsp方案
轉自開源社群一個大佬文章，只是內容有些過時安裝會出錯，所以就更新一下
準備工具
- Ffmpeg（點選下載），用來解碼的，做視訊逃不掉這個,因為系統不一樣選擇builds包自行下載
- Node.js（點選下載），搭建webSocket伺服器，以及執行一個jsmpeg的js檔案
- jsmpeg（點選下載），執行主程式
1 安裝Ffmpeg
- Ffmpeg（做視訊的應該都聽過這個軟體，在github上星星很多，使用c語言編寫，可以在gitHub上面看到有興趣研究一下程式碼，它不只是解析rtsp這麼簡單），這裡下載是一個壓縮檔案，
- 下載完了解壓到一個碟符裡面，比如我解壓到D盤的soft下面
如圖： - 配置環境變數，把ffmpeg下的bin配置到系統path變數裡面，根據自己不同的路徑配置 如圖：
- 配置之後控制檯輸入ffmpeg出現下面的文字說明安裝正確，否則請自行百度 如圖：
上面是配置正確的資訊
2 安裝Node
- 下載node安裝檔案，傻瓜式的安裝這裡就不截圖了，安裝完成之後在cmd控制檯輸入node -v驗證是否安裝完成 如圖： 出現版本資訊說明安裝正確，關於node的一些其他相關操作自行百度，就不詳細敘述了。
3 執行jsmpeg
- 解壓jsmpeg壓縮檔案到某個碟符，裡面出現有一個websocket-relay.js，我們主要執行這個js檔案 如圖： 在執行websocket-relay.js之前node需要安裝webSocket模組
- webSocket模組安裝
在cmd控制檯輸入: npm install ws
出現這種文字說明安裝正確，然後在當前目錄下執行jsmpeg資料夾裡面的websocket-relay.js 執行命令： node websocket-relay.js supersecret 8081 8082
說明：
- Supersecret是密碼
- 8081是ffmpeg推送埠
- 8082是前端webSocket埠 出現上面的文字說明執行正確,然後另起一個視窗執行ffmpeg 執行命令： ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
你的rtspurl就是監控地址的全地址包含協議頭 rtsp這些，然後出現下面的文字說明執行正確
開啟jsmpeg資料夾裡面的view-stream.html頁面如果沒有問題應該出現下面的畫面，到此為止在h5播放rtsp方案算基本完成
上述方案目前還沒有投入生產使用，想要真正投入使用至少要解決同時播放多個rtsp流的問題，官方提供websocket-relay.js只能播放一個源，所以需要重寫裡面的程式碼，學一下node.js吧，考慮到效能問題，最好在有GPU的客戶端使用，否則效能會是一個瓶頸，網路頻寬也是一個值得考慮的問題
多個攝像頭播放補充
作者原始碼地址 gitee
操作步驟
- 其他步驟和上面的一致保證環境沒得問題之後在cd到專案目錄
然後執行: node websocket.js supersecret 8081 8082，我們主程式改為websocket.js了 2. 在另一個cmd輸入：ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1 3. 再開一個cmd輸入，這裡測試:ffmpeg "你的rtsl" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2 4. 上述2和3這兩不一樣的就是最後的live1和live2了 5. 最後修改view-stream.html裡面的程式碼如下
變化的就是var url = 'ws://127.0.0.1:8082/live';變化的就是live1和live2和第二步的相對應就像，雙擊開啟view-stream.html呈現如下效果
這裡補充一下，程式碼裡面沒有關閉視訊流的功能，在日誌列印關閉連線之後最好刪除一下後臺的ffmpeg流，不然會造成效能問題，這個關閉的程式碼在js裡面不能體現出來，最好是在控制cmd命令的程式裡面關閉一下。
對於解碼的時候有的說cpu佔用很高的情況這裡我說一下，第一種減少攝像頭的位元速率，第二種採用gpu加速解碼ffmpeg，網上也有很多參考，但是對硬體是有要求的，如果專案夠大，可以要求客戶購買顯示卡，比如英偉達的1080ti，A卡不知道可不可以，參考: 其他說明 原文地址