前端JS、Vue实现海康萤石直播预览、回放、云台控制功能

RyzenVega

已于 2024-05-11 16:10:47 修改

阅读量1.5w

点赞数 27

分类专栏： Vue、JQ 文章标签： javascript vue.js 前端

于 2022-03-21 15:51:08 首次发布

本文链接：https://blog.csdn.net/weixin_46607967/article/details/123632324

版权

Vue、JQ 专栏收录该内容

10 篇文章

订阅专栏

1.最新代码及 demo

由于萤石JS库以及文档更新较为频繁建议随版本更新避免踩坑

萤石播放协议众多请根据业务逻辑选择所需要的协议萤石 · 协议对比

这里以EZOPEN协议私有协议举例对比其他来说该协议最适用于PC端

由于官方文档比较混乱建议文档本文章 GitHub同时食用

评论中的问题都可以在该文章前后找到解决方案

爆内存和多屏播放就用easyplayer

要控制功能就本地解码播放

官方示例

萤石 · UIKit Javascript

GitHub仓库

控制功能

接入异常问题

UNIAPP > 小程序引入使用传送门

PC多设备多屏分屏播放传送门

vue项目使用easyplayer播放m3u8直播推流

2.Vue项目步骤如下：

1.安装依赖

PRO版

npm install ezuikit-js

npm平台上7.7.0以上版本集成了最新版本解码库，为UIKit Pro版本，7.6.8及以下为UIKit 标准版

个人建议使用pro版亲测性能优化不错

非PRO版

npm install ezuikit-js@7.6.3

7.6.3用着挺稳定的....

2.引入

全局引入（不推荐）

import EZUIKit from 'ezuikit-js';

页面内按需引入（推荐）

<script>
  import EZUIKit from 'ezuikit-js'
  var player = null
  export default {
    ...
  }
</script>

3.页面使用

<template>
  <div>
    <div ref="viewtools" class="eqLive">
      <div id="video-container"></div>
    </div>
  </div>
</template>

<script>
// 若全局引入 则不必在此重复引入
import EZUIKit from "ezuikit-js";

var player = null;
export default {
  data(){
    return{
        
    }
  },
  mounted() {
    this.videoPlayer()
  },
  beforeDestroy() {
    player.stop()
  },
  methods: {
    videoPlayer() {
      // divW和divH是获取了父级宽高 使播放容器能铺满div
      let divW = this.$refs.viewtools.clientWidth
      let divH = this.$refs.viewtools.clientHeight
      player = new EZUIKit.EZUIKitPlayer({
        id: 'video-container', // 视频容器ID
        accessToken: '后端给的accessToken',
        url: '后端给的URL',
        // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
        // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
        template: 'security',
        useHardDev: true // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
        // plugin: ["talk"], // 加载插件，talk-对讲 非必填
        width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
        height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
      })
      window.player = player
  }
};

</script>
<style scoped>
  .eqLive{
    /* 设置任意宽高任意一项即可 然后使用aspect-ratio元素 动态设置比例 */
    // height: 300px
    width: 500px
    aspect-ratio: 16/9;
  }
</style>

3.控制步骤如下：

需要的参数可以参照控制文档文档已经放文章上面

需要在每个按钮上添加mousedown和mouseup事件在此省略了一些代码只拿向上按钮举例

控制可能会有一些延迟操作间隔建议1s以上

// 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
// 拿向上按钮举例  鼠标按下越久 转动的也就越广~

<div @mousedown="ytControl('0')" @mouseup="ytControlStop()"></div>


import axios from 'axios'
import qs from 'qs'


data(){
  return{
    // 云台控制
    controlNum: '',
  }
}


// 云台控制
ytControl(num) {
  this.controlNum = num
    axios({
    method: 'POST',
    url: 'https://open.ys7.com/api/lapp/device/ptz/start',
    data: qs.stringify({
      // 授权过程获取的access_token
      accessToken: accessToken,
      // 设备序列号,存在英文字母的设备序列号，字母需为大写
      deviceSerial: deviceSerial,
      // 通道号
      channelNo: 1,
      // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
      direction: this.controlNum,
      // 云台速度：0-慢，1-适中，2-快，海康设备参数不可为0
      speed: 2,
    }),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  }).then((res) => {
    console.log(res)
  })
},
// 停止云台控制
ytControlStop() {
  axios({
    method: 'POST',
    url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
    data: qs.stringify({
      accessToken: accessToken,
      deviceSerial: deviceSerial,
      channelNo: 1,
      direction: this.controlNum,
      speed: 2,
    }),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  }).then((res) => {
    console.log(res)
  })
},

4.目前遇到的问题以及解决方法：

如果您的项目需要云台控制设备切换预览和回放等功能强烈建议看完这些！！！

1. 依赖引入问题

老库和新库代码不同但调用方式相同如果在一个项目中同时引入两个库调用可能会造成冲突的情况

如A页面引入A库则正常播放播放之后切B页面引入B库的B页面播放则报错若首先进B页引B库则A报错这是因为A库script引入后已经加载入内存因为调用方式相同所以B页会优先调用A库所以报错现在该问题基本不存在了除非是比较老的项目之前引入过海康的老库

2. 播放问题

A切换到B设备播放时一定要先调用以下停止播放方法可能会造成切换到B之后 A依旧在播放的问题（如果项目有切换设备播放的功能那强烈建议在切换事件中添加以下代码）

player.stop()

情况同上正在播放时切换到其他模块/页面也会造成关闭当前模块/页面后依旧在播放的问题可以在销毁时调用停止播放方法（必须加）

beforeDestroy() {
   player.stop()
},

由于官方并没有提供销毁播放器的API 如果想实现销毁DOM 需要先调用停止方法然后对父元素进行重载或删除DOM 虽然实现了功能但会出现一个比较严重问题由于播放时写入到了内存组件销毁后实例依旧还在内存中 JS是无法操作内存的所以会出现内存使用骤增的情况暂无法解决

3.云台控制问题

设置不带云台控制的主题后如果调用切换视频方法 changePlayUrl 后视频会出现云台控制按钮

不知道官方解决了没...

控制请求不能为JSON格式

故控制代码中设置了请求头并使用了qs插件进行转换如果使用JSON格式发送则会报10002 accessToken异常或过期

首次加载设备时设备存在不在线情况重复切换设备播放后有可能会出现bug 此时可以参考以下代码

// video-container是播放容器 
<div ref="viewtools" class="eqLive">
   <div id="video-container"></div>
</div>


// 判断设备是否在线  具体判断根据业务逻辑来写
if (data.parameter == undefined) {
   // 首先调用禁止播放
   player.stop()
   // 不在线时重载元素  （ref绑定你播放容器的父元素 然后重载）
   this.$refs.viewtools.innerHTML = `<div id="video-container"></div>`
}