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

在靈寶等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網(wǎng)站設計、網(wǎng)站建設 網(wǎng)站設計制作定制網(wǎng)站建設,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站建設,營銷型網(wǎng)站,成都外貿網(wǎng)站建設公司,靈寶網(wǎng)站建設費用合理。

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

準備工具

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

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

3 . jsmpeg（點擊下載），運行主程序

4 . 運行jsmpeg

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

• 在運行websocket-relay.js之前node需要安裝webSocket模塊

終端: npm install ws

• 運行jsmpeg文件夾里面的websocket-relay.js

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

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

• 運行解碼程序

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

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

       2019年7月17日更新代碼，因為之前有人問我怎么實現(xiàn)多個視頻流同時播放的問題，這里我把代碼提交上來了，先看一下代碼里面的注釋，說明之后補充，感謝，代碼提交到這里了(https://gitee.com/yzfar/RtspWebSocket.git)

5 . 2019年8月19日多個攝像頭播放的補充

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

• 第一

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

然后執(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

再開一個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和第二步的相對應就像，雙擊打開view-stream.html呈現(xiàn)如下效果

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

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

• 第一條使用英特爾的CPU硬件加速，普通pc機cpu有效，服務器如至強處理器無效

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)大家對視頻直播的需求比較大于是開源這個項目出來，減少重復工作，項目地址：https://github.com/chengpengvb/video

先看一下效果

• 主要功能包括：

    1 .  自動負載均衡（擴展agent數(shù)量）

    2 . 比較低的延遲

    3 . 對于非IE內核使用H5的播放功能，IE使用的是rtmp（需要nginx-rtmp，因為IE不支持聲音）

    4 . 支持聲音播放

    5 . 同一播放流復用，不用重新解碼

支持ssl加密方式

• 運行環(huán)境：

    1 . Windows、Linux

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

• 運行配置

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

    2 . video-agent負責解碼

    3 . video-center，負責調用緩存業(yè)務中心

• 啟動程序

    1 . video-regist

    2 . video-agent （可部署多個）

    3 . video-center

    4 . 打開瀏覽器：http://127.0.0.1:8080/或者http://127.0.0.1:8080/index

• 引入css和js部分

    參考multiPlay.html和default.html頁面

• 前端api說明

varwssConn = wsConnect(window.location.host, UUID()); // 初始化一個連接對象(于后臺交互)，單例，UUID()為一個隨機數(shù)標識

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

varoption = {

       url : rtsp,// rtsp流

       userName : userName,// rtsp流用戶名

       passWord : passWord,// rtsp流密碼

       width : 800,// 視頻寬度

       height : 450,// 視頻高度

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

};

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

video.close(); //關閉

看完上述內容，你們對html5播放rtsp方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。