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

发布时间:2024年01月15日

插件下载

官网: 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传入开始和结束时间实现回放等等很多有用的功能。

文章来源:https://blog.csdn.net/weixin_52630329/article/details/135605436
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。