由于攝像頭是rtsp格式的冠跷，h5原生不支持這種格式合是，網(wǎng)上查了很多教程大多是使用rtsp轉(zhuǎn)rtmp衫樊，不過(guò)rtmp需要falsh的支持飒赃，但是在chrome已經(jīng)默認(rèn)禁用、包括未來(lái)也會(huì)逐漸淘汰橡伞，所有最終這種方案被淘汰盒揉。
于是我想應(yīng)該把rtsp轉(zhuǎn)化成一種類(lèi)似http協(xié)議的方式，能夠直接被h5識(shí)別兑徘，于是我google刚盈，百度就不用說(shuō)了，查了半天全是沒(méi)用的東西挂脑。終于我找到了一種叫jsmpeg的插件藕漱，它主要是通過(guò)webSocket發(fā)送MPEG，前端通過(guò)js解析MPEG不斷繪制canvas崭闲，包括音頻肋联。最終測(cè)試的結(jié)果就是一個(gè)1920*1080分辨率的畫(huà)面延時(shí)大概的0.5s左右，超出我的預(yù)料刁俭，性能居然這么高橄仍。后臺(tái)觀察發(fā)現(xiàn)瀏覽器使用了GPU加速。
準(zhǔn)備工具：
- 1、Ffmpeg：用來(lái)解碼的侮繁，做視頻逃不掉這個(gè)
- 2虑粥、Node.js：搭建webSocket服務(wù)器，以及運(yùn)行一個(gè)jsmpeg的js文件
- 3宪哩、jsmpeg：運(yùn)行主程序
可以到我的github去下載
其實(shí)整個(gè)步驟就以下幾步：
- 解壓ffmpeg,然后配置一下環(huán)境變量
- 安裝node,如電腦已安裝node,這一步忽略
- 安裝webSocket模塊[具體操作：cd到j(luò)smpeg所在路徑,執(zhí)行
npm install ws即可] - 在jsmpeg所在路徑下娩贷，執(zhí)行
node websocket-relay.js supersecret 8081 8082 - 打開(kāi)另一個(gè)cmd：
ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret - 打開(kāi)jsmpeg文件夾里面的view-stream.html頁(yè)面就可以看到你的監(jiān)控視頻了
如果在view-stream.html中能看到攝像頭視頻的話，那也就可以在自己的html中這樣去實(shí)現(xiàn)：
<!-- 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});
效果如下：
下面是比較詳細(xì)的操作過(guò)程：
解壓之后的ffmpeg是這樣
接下來(lái)需要配置一下環(huán)境變量锁孟，把ffmpeg下的bin配置到系統(tǒng)path變量里面彬祖，根據(jù)自己不同的路徑配置
在cmd里輸入ffmpeg回車(chē) 輸出以下代表配置正確
此時(shí)如果電腦上已經(jīng)安裝了node，那就直接可運(yùn)行jsmpeg品抽，如果沒(méi)有安裝node,請(qǐng)先百度安裝储笑。由于我的電腦已安裝node,在這里就直接跳過(guò)安裝node這一步。
解壓jsmpeg壓縮文件到某個(gè)盤(pán)符桑包，里面出現(xiàn)有一個(gè)websocket-relay.js南蓬，我們主要運(yùn)行這個(gè)js文件
運(yùn)行websocket-relay.js之前node需要安裝webSocket模塊
- 打開(kāi)cmd控制臺(tái)，cd到j(luò)smpeg所在路徑
- npm install ws
- node websocket-relay.js supersecret 8081 8082
說(shuō)明：
- Supersecret是密碼
- 8081是ffmpeg推送端口
- 8082是前端webSocket端口
然后在cmd中執(zhí)行：ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
出現(xiàn)下面這樣說(shuō)明正確
打開(kāi)jsmpeg文件夾里面的view-stream.html頁(yè)面如果沒(méi)有問(wèn)題應(yīng)該出現(xiàn)下面的畫(huà)面哑了，到此為止在h5播放rtsp方案算基本完成
我這邊的node版本是v10.15.3
安裝過(guò)程中遇到的小問(wèn)題
我的是window10操作系統(tǒng)8G 64位
在全局安裝ws后赘方，執(zhí)行node websocket-relay.js supersecret 8081 8082會(huì)報(bào)cannot find module 'ws',不知道是不是node版本太高的原因
所以在安裝的時(shí)候不要加-g，按照下面的步驟來(lái)弱左。
如果電腦設(shè)置了睡眠之后再打開(kāi)窄陡，會(huì)發(fā)現(xiàn)視頻監(jiān)控停止了，此時(shí)不要緊張拆火，在cmd里重新執(zhí)行一下
- 在D:\videoStream\jsmpeg-master路徑下執(zhí)行
node websocket-relay.js supersecret 8081 8082 - 打開(kāi)另一個(gè)cmd執(zhí)行：
ffmpeg -i "你的rtspurl" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret
