背景:我司用了海康視頻監控平台,有一台MAG服務器節點,通過該服務器可以轉換成HLS流(蘋果的一種視頻流協議可以看下別人的介紹)
問:為什么不用RTSP 或者RTMP 或者sdk模式來對接
答:首先我司攝像頭品牌不一樣,流也有上限,如果要網頁播放還需要自己搭建轉流服務器和推流服務器,技術實現復雜和時間上的限制。
需求:瀏覽器上播放我司實時視頻流(延遲6秒左右),最終通過其他博主和同事幫助解決了該需求
遇到的第一個問題:PC上無法播放HLS流
通過HTML 的vdieo 標簽來播放發現PC上瀏覽器無法播放,而蘋果瀏覽器和移動平台沒有問題,
解決方案:HLS.js,通過百度發現需要第三方解碼來解決(PC瀏覽器播放HLS協議的視頻_weixin_33991727的博客-CSDN博客)
常用的有 ckplayer,video.js 等 我這邊選用輕量級的HLS.js
遇到的第二個問題:集成了HLS.js后還是無法播放 ,原因是瀏覽器為了安全阻止了跨域訪問資源問題(瀏覽器的跨域問題以及解決方案 - RemateDanpike - 博客園 (cnblogs.com))
解決方案:
安裝第三方allow CORS Chrome插件后解決,具體效果如下