关于ckplayer对接海康摄像头的问题

一.问题描述

1.由于本项目属于智慧化工园区，要求三维地图上实现点击点位标注出现实时监控视频预览

2.由于海康插件属于内嵌的浏览器插件，可以加载视频但是无法实现三维拖影效果，会有严重的遮  挡问题，所以启用ckplayer对接海康视频流

二.解决思路

1.点击标注拿到对应摄像头的indexCode与海康交互拿到对应的m3u8视频请求地址

2.请求地址放入ckplayer

三.代码切片

/* 
引入ckplayer 2020.09.20 V3版本
解压完成直接将其中名为ckplayer文件夹复制于public下
并将以下代码粘贴于index.html，引入插件js
*/

    <script  src="/ckplayer/js/ckplayer.js"></script>
    <script  src="/ckplayer/js/ckplayer.min.js"></script>
    <script  src="/ckplayer/hls.js/hls.min.js"></script>

  /* 
    请求海康摄像头m3u8视频流链接地址
    加载ckplayer
    @@ params:this.videoCode => 海康摄像头唯一标识 
    */

 if (this.videoCode) {
      let obj = {
        cameraIndexCode: this.videoCode
      };
      baseService.post("你的海康视频地址", obj).then((res) => {
        let ckplayerUrl = res.data.url;
        let videoObject = {
          container: "#ckplayerDIV", //“#”代表容器的ID，“.”或“”代表容器的class
          variable: "player", //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
          plug:'hls.js',//设置使用hls插件
          video: ckplayerUrl, //视频地址,
          autoplay: true,//自动播放
          controls: "default",//控制栏样式
        };
        this.player = new ckplayer(videoObject); //初始化播放器
      });
    }

四.注意事项

1.由于最新版的ckplayer默认支持m3u8，但是需要引入hls.min.js（无需安装任何js类库）

2.配置项需要理清楚

五.实现效果