由于攝像頭是rtsp格式的，h5原生不支持這種格式，網上查了很多教程大多是使用rtsp轉rtmp，不過rtmp需要falsh的支持，但是在chrome已經默認禁用、包括未來也會逐漸淘汰，所有最終這種方案被淘汰。
于是我想應該把rtsp轉化成一種類似http協議的方式，能夠直接被h5識別，于是我google，百度就不用說了，查了半天全是沒用的東西。終于我找到了一種叫jsmpeg的插件，它主要是通過webSocket發送MPEG，前端通過js解析MPEG不斷繪制canvas，包括音頻。最終測試的結果就是一個1920*1080分辨率的畫面延時大概的0.5s左右，超出我的預料，性能居然這么高。后臺觀察發現瀏覽器使用了GPU加速。
準備工具：
- 1、Ffmpeg：用來解碼的，做視頻逃不掉這個
- 2、Node.js：搭建webSocket服務器，以及運行一個jsmpeg的js文件
- 3、jsmpeg：運行主程序
可以到我的github去下載
其實整個步驟就以下幾步：
- 解壓ffmpeg,然后配置一下環境變量
- 安裝node,如電腦已安裝node,這一步忽略
- 安裝webSocket模塊[具體操作：cd到jsmpeg所在路徑,執行
npm install ws即可] - 在jsmpeg所在路徑下，執行
node websocket-relay.js supersecret 8081 8082 - 打開另一個cmd：
ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret - 打開jsmpeg文件夾里面的view-stream.html頁面就可以看到你的監控視頻了
如果在view-stream.html中能看到攝像頭視頻的話，那也就可以在自己的html中這樣去實現：
<!-- html -->
<canvas id="video-canvas"></canvas>
// js
var canvas = document.getElementById('video-canvas');
var url = 'ws://127.0.0.1:8082/';
var player = new JSMpeg.Player(url, {canvas: canvas});
效果如下：
下面是比較詳細的操作過程：
解壓之后的ffmpeg是這樣
接下來需要配置一下環境變量，把ffmpeg下的bin配置到系統path變量里面，根據自己不同的路徑配置
在cmd里輸入ffmpeg回車 輸出以下代表配置正確
此時如果電腦上已經安裝了node，那就直接可運行jsmpeg，如果沒有安裝node,請先百度安裝。由于我的電腦已安裝node,在這里就直接跳過安裝node這一步。
解壓jsmpeg壓縮文件到某個盤符，里面出現有一個websocket-relay.js，我們主要運行這個js文件
運行websocket-relay.js之前node需要安裝webSocket模塊
- 打開cmd控制臺，cd到jsmpeg所在路徑
- npm install ws
- node websocket-relay.js supersecret 8081 8082
說明：
- Supersecret是密碼
- 8081是ffmpeg推送端口
- 8082是前端webSocket端口
然后在cmd中執行：ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
出現下面這樣說明正確
打開jsmpeg文件夾里面的view-stream.html頁面如果沒有問題應該出現下面的畫面，到此為止在h5播放rtsp方案算基本完成
我這邊的node版本是v10.15.3
安裝過程中遇到的小問題
我的是window10操作系統8G 64位
在全局安裝ws后，執行node websocket-relay.js supersecret 8081 8082會報cannot find module 'ws',不知道是不是node版本太高的原因
所以在安裝的時候不要加-g，按照下面的步驟來。
如果電腦設置了睡眠之后再打開，會發現視頻監控停止了，此時不要緊張，在cmd里重新執行一下
- 在D:\videoStream\jsmpeg-master路徑下執行
node websocket-relay.js supersecret 8081 8082 - 打開另一個cmd執行：
ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
