vue 萤石云视频监控对接

萤石云文档(web开发)

萤石云DEMO下载

参考博客：vue中实现视频直播（萤石云） - 简书 

参考博客：海康威视&萤石摄像头直播/监控模式Vue开发 - 简书 

萤石云web开发文档短小易懂，一定要看(文档变更有点乱，我看的时候api部分已被移除，故参考了简书博客)

前提了解

 兼容性

• Chrome 55+
• Firefox 55+
• 最新IE

直播与视频监控开发区别

1. 直播可使用第三方播放器如video标签等；而视频监控不可
2. 直播可使用https开头链接；而视频监控不可，视频监控使用萤石云协议(ezopen://)

 视频监控链接地址特征

• 预览：ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].live（示例：ezopen://open.ys7.com/203751922/1.hd.live）
• 回放：ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].rec[?begin= yyyyMMddhhmmss&end= yyyyMMddhhmmss]（ezopen://验证码@open.ys7.com/203751922/1.rec?begin=20190317000000&begin=20190317235959）

tips：

回放地址不带时间参数时默认取当日0时0分0秒至23时59分59秒，缺省也同样会自动补充，比如begin=2019031709，系统会自动给补充为begin=20190317090000&end=20190317235959

回放时间点是否存在录像可以通过调用根据时间获取存储文件信息接口（链接）来查询验证

多窗口模式

• 从文档中只看到多窗口只针对监控 
• 多窗口监控地址通过逗号分隔
• 窗口切割参数：splitBasis

  //在监控模式中设置窗口切割参数（1*1,2*2,3*3）
  var player = new EZUIPlayer({
      id: 'myPlayer',
      url: {url0},{url1},{url2},{url3}, // ezopen播放地址逗号分隔
      autoplay: true,
      accessToken: "at.8o2k6dbpcvtr13reaa96hbnya6*************c",
      decoderPath: '{
       
       {location path}}',
      width: 1200, // 宽度高度为容器规格，将按照窗口数均分
      height: 800,
      splitBasis: 2 //设置窗口切割参数
    });

包引入区别

• js原生引入方式，示例：

  <script src="../ezuikit.j