vue使用萤石云监控视频/录像回放功能踩坑记录

vue使用萤石云监控视频/录像回放功能踩坑记录

这两天在搞PC和移动端的萤石云录像回放功能，踩坑不少，记录一下。

1、版本问题

之前同事采用的是本地js引入的方式使用萤石云，不知道哪个版本，出现录像回放功能首次进入可以播放，点击暂停再次播放就不能播放问题。后换为npm依赖引入的方式，但是有的版本本地可以使用，线上打包部署后出现白屏。。。很坑，不断尝试，现使用 ezuikit-js: 7.7.0 ,版本，较为稳定，没发现什么问题。

2、销毁问题

退出页面时一定要执行stop方法，并销毁EZUIKit实例！

不要在beforeDestroy生命周期中执行销毁操作！

不销毁实例会出现离开页面后依旧有监控声音并且占内存问题

在beforeDestroy生命周期中销毁会出现报错无法成功销毁并且下次进入页面播放器初始化失败

推荐在beforeRouteLeave中执行销毁操作（执行完别忘了next放行）

beforeRouteLeave(to,from,next){
   // 我将实例挂载在window上，不挂应该也可以
   //为了销毁做了很多尝试，挂载在window上就是其中一步
   // 后来发现不能在beforeDestroy中执行销毁才是关键，代码懒得改了
    if (window.ezukitPlayer) {
      window.ezukitPlayer.stop()
      window.ezukitPlayer = null
    }
    //以下是我自己之前尝试用删除dom方式进行销毁
    let ezudemo = this.$refs['ezuikitPlayer']
    let playcon = document.getElementById("ezuikit-playback-wrap")
    playcon
      ? ezudemo.removeChild(playcon)
      : "";
    let playcons = document.getElementById("ezuikit-player-wrap")
    playcons
      ? ezudemo.removeChild(playcons)
      : "";
    next()
  },

3、官方轻应用模板问题

如果你尝试过你就会发现，虽然官方支持创建自定义模板，但是根本没你编辑后保存会发现模板根本没有变化，比如我之前想录像回放默认为本地存储播放，删掉云存储按钮后保存后发现根本没有变化。。。官方文档概述更是一言难尽

想要默认本地存储播放录像视频只需要改动这行

// 官方模板地址
url: "ezopen://open.ys7.com/AA2615287/1.cloud.rec",
// 改为这样，去掉地址中的cloud就可以默认本地存储播放
url: "ezopen://open.ys7.com/AA2615287/1.rec",

4、小问题

// 这是官方的回放模板，如果想要改为直播只需要把template改为pcLive，url改为直播地址
      this.ezukitPlayer = new EZUIKit.EZUIKitPlayer({
        id: 'ezuikit-playback',
        width,
        height,
        template: 'pcRec',
        url,
        accessToken,
        handleSuccess() {
          that.isfinish = true
        },
        handleError() {
          that.isfinish = true
        },
      })
      window.ezukitPlayer = this.ezukitPlayer

小问题就是我们这时候实例挂载在id为ezuikit-playback的dom上面，但是编译完会发现这个dom的id变为ezuikit-playback-wrap，会在后面加上一个-wrap，如果有需要通过id操作dom的时候需要注意这个问题