解决海康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插件后解决，具体效果如下