由于攝像頭是rtsp格式的，h5原生不支持這種格式，網(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
上述方案目前還沒有投入生產(chǎn)使用，想要真正投入使用至少要解決同時播放多個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 800x600http://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 h264_qsv -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h264_qsv -f mpegts -codec:v mpeg1video -s 800x600http://127.0.0.1:8081/supersecret/live1
第二條使用cuda加速羽杰，需要gpu并安裝cuda
ffmpeg -c:v h264_cuvid -rtsp_transport tcp -i "rtsp" -q 0 -vcodec h264_cuvid -f mpegts -codec:v mpeg1video -s 800x600http://127.0.0.1:8081/supersecret/live2
另外需要使用聲音的采用如下命令
ffmpeg -i -i "rts" -f mpegts -codec:v mpeg1video -s 800x600 -codec:a mp2http://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內(nèi)核使用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董朝，負責調(diào)用緩存業(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說明
var wssConn = wsConnect(window.location.host, UUID()); // 初始化一個連接對象(于后臺交互)，單例干跛，UUID()為一個隨機數(shù)標識
var video = $("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(); //關閉
作者：chengpeng
