vue中使用海康监控H5视频播放

插件下载

官网： open.hikvision.com/download/5c…

在官网下载H5视频播放器开发包 V1.0.0的文档和程序包，就可以自己根据使用说明来体验一下demo啦，这里就不啰嗦了。

在Vue中使用

第一步

首先我们需要将下载下来的程序包内的JS文件放到我们自己的项目文件并引入，根据不同系统需引入不同的文件，所以我们需要进行一个系统的判断

    getScript() {
      this.oPlugin = new JSPlugin({
        szId: this.videoId, // 当前的视频播放的节点，需要英文字母开头，必填
        szBasePath: './dist', // 这个是啥我也不知道，但是必填
        // 分屏播放
        iMaxSplit: 1,
        iCurrentSplit: 1,
        // 设置样式
        oStyle: {
          border: '#343434',
          borderSelect: 'transparent',
          background: '#000'
        }
      })
      this.initPlugin()
      this.realplay()
    },
    // 事件初始化
    initPlugin() {
      this.oPlugin
        .JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            this.iWind = iWindIndex
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(
              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
              oError
            )
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            console.log(iWindIndex)
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            console.log(iWindIndex)
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log(bFull)
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log(iWndIndex, iWidth, iHeight)
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log(iWndIndex)
          }
        })
        .then(() => {
          this.oPlugin
            .JS_SetOptions({
              bSupportSound: true, // 是否支持音频，默认支持
              bSupportDoubleClickFull: false, // 是否双击窗口全屏，默认支持
              bOnlySupportMSE: false, // 只支持 MSE
              bOnlySupportJSDecoder: true // 只支持 JSDecoder
            })
            .then(() => {
              console.log('JS_SetOptions')
            })
        })
      },
      // 播放初始化
    realplay() {
      console.log('播放初始化')
      // 这个必须要使用ws协议进行流的传输
      // 于是决定在后端进行流的获取，前端发送地点名称获得直播的流的地址
      // 这里是我向后端请求数据的代码就不贴出来了
      // 
      // 好！这里我们已经拿到了数据
      this.oPlugin
        .JS_Play(
          this.videoUrl,
          {
            playURL: this.videoUrl, // 流媒体播放时必传
            mode: 1 // 解码类型：0=普通模式，1=高级模式，默认为 0
          },
          this.iWind
        )
        .then(
          (res) => {
            console.log(res, '播放成功')
          },
          (err) => {
            console.log(err, '播放失败')
          }
        )
    },

第二步

在我们的组件中引入

引入JSPlugin const { JSPlugin } = window;

第三步

现在开始实例化，现在就可以根据下载下来的文档和dem对照起来查看了，首先我们先创建实例，JS_SetOptions是配置播放的方式，这里我们将bOnlySupportJSDecoder设为true，只加载JSDecoder。其实在我的需求里initPlugin()这个方法里的监听事件几乎都没有用上，但还是写出来，大家可以根据不同需求做不同的操作，其中错误回调我认为是很有必要的，如果遇到视频无法播放，可以对照文档最后的“错误码及其描述”来检查错误

    getScript() {
      this.oPlugin = new JSPlugin({
        szId: this.videoId, // 当前的视频播放的节点，需要英文字母开头，必填
        szBasePath: './dist', // 这个是啥我也不知道，但是必填
        // 分屏播放
        iMaxSplit: 1,
        iCurrentSplit: 1,
        // 设置样式
        oStyle: {
          border: '#343434',
          borderSelect: 'transparent',
          background: '#000'
        }
      })
      this.initPlugin()
      this.realplay()
    },
    // 事件初始化
    initPlugin() {
      this.oPlugin
        .JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            this.iWind = iWindIndex
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(
              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
              oError
            )
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            console.log(iWindIndex)
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            console.log(iWindIndex)
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log(bFull)
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log(iWndIndex, iWidth, iHeight)
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log(iWndIndex)
          }
        })
        .then(() => {
          this.oPlugin
            .JS_SetOptions({
              bSupportSound: true, // 是否支持音频，默认支持
              bSupportDoubleClickFull: false, // 是否双击窗口全屏，默认支持
              bOnlySupportMSE: false, // 只支持 MSE
              bOnlySupportJSDecoder: true // 只支持 JSDecoder
            })
            .then(() => {
              console.log('JS_SetOptions')
            })
        })
      },
      // 播放初始化
    realplay() {
      console.log('播放初始化')
      // 这个必须要使用ws协议进行流的传输
      // 于是决定在后端进行流的获取，前端发送地点名称获得直播的流的地址
      // 这里是我向后端请求数据的代码就不贴出来了
      // 
      // 好！这里我们已经拿到了数据
      this.oPlugin
        .JS_Play(
          this.videoUrl,
          {
            playURL: this.videoUrl, // 流媒体播放时必传
            mode: 1 // 解码类型：0=普通模式，1=高级模式，默认为 0
          },
          this.iWind
        )
        .then(
          (res) => {
            console.log(res, '播放成功')
          },
          (err) => {
            console.log(err, '播放失败')
          }
        )
    },

第四步

这一步千万千万要注意，因为有时候Decoderjs还没加载到页面上就调用了创建实例的方法，这样是会报错的，所以我们会有判断这一步操作

mounted() {
    this.time = setInterval(() => {
      const { _JSPlayM4_GetPort, _malloc } = window
      if (_JSPlayM4_GetPort && _malloc) {
        this.getScript()
        clearInterval(this.time)
      }
    }, 100)
  },

结尾

这里说一下为什么我选择的是这个开发包而不是另一个视频WEB插件。相信用过海康平台实现监控的小伙伴大多都用过视频WEB插件 V1.5.1，这也是一个功能及其完善的插件，不过这个插件我甚至都无法调试，我无法在页面上选中这个播放容器，而H5视频播放器是通过Canvas绘制，我可以获取DOM节点我也可以修改这个播放器的样式。而且我需要安装一个VideoWebPlugin插件才可以在浏览器运行，我觉得这就不是特别友好了。当然如果要使用这个H5视频播放器要好好的查看一下文档的功能说明和性能说明文档，里面会有介绍普通模式和高级模式的差异以及浏览器兼容性。

到此，需求就已经基本满足了，非常简单，只要大家按照文档和demo一步步敲出来就行了，文档里还有很多方法，例如：停止播放: JS_Stop、开启声音: JS_OpenSound、录像: JS_StartSave、以及播放：JS_Play传入开始和结束时间实现回放等等很多有用的功能。