解決海康HLS視頻流在PC瀏覽器上播放問題


 

 

背景:我司用了海康視頻監控平台,有一台MAG服務器節點,通過該服務器可以轉換成HLS流(蘋果的一種視頻流協議可以看下別人的介紹)

HLS 詳解_一個人的旅行的博客-CSDN博客 

問:為什么不用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插件后解決,具體效果如下

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM