html5播放rtsp方法

今天就跟大家聊聊有關(guān)html5播放rtsp方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

由于攝像頭是rtsp格式的，h6原生不支持這種格式，網(wǎng)上查了很多教程大多是使用rtsp轉(zhuǎn)rtmp，不過rtmp需要falsh的支持，但是在chrome已經(jīng)默認(rèn)禁用、包括未來也會(huì)逐漸淘汰，所有最終這種方案被淘汰。一種叫jsmpeg的插件，它主要是通過webSocket發(fā)送MPEG，前端通過js解析MPEG不斷繪制canvas，包括音頻。最終測試的結(jié)果就是一個(gè)1920*1080分辨率的畫面延時(shí)大概的0.5s左右，性能蠻高的。

準(zhǔn)備工具

1 . Ffmpeg（點(diǎn)擊下載），配置環(huán)境添加到path變量中

2 . Node.js（點(diǎn)擊下載），配置環(huán)境添加到path變量中

3 . jsmpeg（點(diǎn)擊下載），運(yùn)行主程序

4 . 運(yùn)行jsmpeg

解壓jsmpeg壓縮文件到某個(gè)盤符，里面出現(xiàn)有一個(gè)websocket-relay.js，我們主要運(yùn)行這個(gè)js文件

• 在運(yùn)行websocket-relay.js之前node需要安裝webSocket模塊

終端: npm install ws

• 運(yùn)行jsmpeg文件夾里面的websocket-relay.js

終端: node websocket-relay.js supersecret 8081 8082

說明： Supersecret是密碼 8081是ffmpeg推送端口8082是前端webSocket端口

• 運(yùn)行解碼程序

終端：ffmpeg -i "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

上述方案目前還沒有投入生產(chǎn)使用，想要真正投入使用至少要解決同時(shí)播放多個(gè)rtsp流的問題，官方提供websocket-relay.js只能播放一個(gè)源，所以需要重寫里面的代碼，學(xué)一下node.js吧，考慮到性能問題，最好在有GPU的客戶端使用，否則性能會(huì)是一個(gè)瓶頸，網(wǎng)絡(luò)帶寬也是一個(gè)值得考慮的問題

       2019年7月17日更新代碼，因?yàn)橹坝腥藛栁以趺磳?shí)現(xiàn)多個(gè)視頻流同時(shí)播放的問題，這里我把代碼提交上來了，先看一下代碼里面的注釋，說明之后補(bǔ)充，感謝，代碼提交到這里了(https://gitee.com/yzfar/RtspWebSocket.git)

5 . 2019年8月19日多個(gè)攝像頭播放的補(bǔ)充

之前我把播放多個(gè)攝像頭的代碼上傳的碼云上面了，今天我說一下怎么播放廢話不多說，怎么用說一下

• 第一

其他步驟和上面的一致保證環(huán)境沒得問題之后在cd到項(xiàng)目目錄

然后執(zhí)行: node websocket.js supersecret 8081 8082，我們主程序改為websocket.js了

• 第二

終端： ffmpeg "rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

再開一個(gè)cmd輸入，這里測試:

終端：ffmpeg " rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

這兩不一樣的就是最后的live1和live2了

• 第三

修改view-stream.html里面的代碼如下

變化的就是var url = 'ws://127.0.0.1:8082/live';變化的就是live1和live2和第二步的相對應(yīng)就像，雙擊打開view-stream.html呈現(xiàn)如下效果

這里補(bǔ)充一下，代碼里面沒有關(guān)閉視頻流的功能，在日志打印關(guān)閉連接之后最好刪除一下后臺的ffmpeg流，不然會(huì)造成性能問題，這個(gè)關(guān)閉的代碼在js里面不能體現(xiàn)出來，最好是在控制cmd命令的程序里面關(guān)閉一下。

ffmpeg具備gpu加速功能，本人未測試過，有興趣的朋友可以嘗試一下cuda方式。

• 第一條使用英特爾的CPU硬件加速，普通pc機(jī)cpu有效，服務(wù)器如至強(qiáng)處理器無效

ffmpeg -c:v h364_qsv -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h364_qsv -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

• 第二條使用cuda加速，需要gpu并安裝cuda

ffmpeg -c:v h364_cuvid -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h364_cuvid -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live2

• 另外需要使用聲音的采用如下命令

ffmpeg -i -i "rts" -f mpegts -codec:v mpeg1video -s 800x600 -codec:a mp2 http://127.0.0.1:8081/supersecret/live2

基于webrtc播放的解決方案移步到：https://my.oschina.net/chengpengvb/blog/5023676

6 . 開源視頻播放系統(tǒng)

我發(fā)現(xiàn)大家對視頻直播的需求比較大于是開源這個(gè)項(xiàng)目出來，減少重復(fù)工作，項(xiàng)目地址：https://github.com/chengpengvb/video

先看一下效果

• 主要功能包括：

    1 .  自動(dòng)負(fù)載均衡（擴(kuò)展agent數(shù)量）

    2 . 比較低的延遲

    3 . 對于非IE內(nèi)核使用H5的播放功能，IE使用的是rtmp（需要nginx-rtmp，因?yàn)镮E不支持聲音）

    4 . 支持聲音播放

    5 . 同一播放流復(fù)用，不用重新解碼

支持ssl加密方式

• 運(yùn)行環(huán)境：

    1 . Windows、Linux

    2 . 2jdk1.8、ffmpeg、nodejs、nginx-rtmp（IE播放）

• 運(yùn)行配置

    1 . video-regist的注冊中心，常規(guī)配置bootstrap.yml

    2 . video-agent負(fù)責(zé)解碼

    3 . video-center，負(fù)責(zé)調(diào)用緩存業(yè)務(wù)中心

• 啟動(dòng)程序

    1 . video-regist

    2 . video-agent （可部署多個(gè)）

    3 . video-center

    4 . 打開瀏覽器：http://127.0.0.1:8080/或者h(yuǎn)ttp://127.0.0.1:8080/index

• 引入css和js部分

    參考multiPlay.html和default.html頁面

• 前端api說明

var wssConn = wsConnect(window.location.host, UUID()); // 初始化一個(gè)連接對象(于后臺交互)，單例，UUID()為一個(gè)隨機(jī)數(shù)標(biāo)識

var video = $("dom").video(wssConn);

var option = {

       url : rtsp,// rtsp流

       userName : userName,// rtsp流用戶名

       passWord : passWord,// rtsp流密碼

       width : 800,// 視頻寬度

       height : 450,// 視頻高度

       type : 0 // 解碼類型 0:cpu,1:qsv,2:cuda，查看agent端是否支持該解碼方式，可能需要相關(guān)硬件

};

video.play(option, null);// 開始播放

video.close(); //關(guān)閉

看完上述內(nèi)容，你們對html5播放rtsp方法有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。