轉自開源社區一個大佬文章，只是內容有些過時安裝會出錯，所以就更新一下
准備工具
- 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卡不知道可不可以，參考: 其他說明 原文地址