1.最新代码 及 demo

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

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

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

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

萤石云java 操作云台 萤石云控制云台_vue.js

2.Vue项目步骤如下：

1.安装依赖

PRO版

npm install ezuikit-js

截止到目前 2023 / 11 / 7

npm平台上7.7.0以上版本集成了最新版本解码库，为UIKit Pro版本，7.6.8及以下为UIKit 标准版。因Pro版本目前处于公测阶段，仅支持通过npm升级，github暂未同步

个人建议使用pro版 亲测 性能优化近40%

非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以上

 

萤石云java 操作云台 萤石云控制云台_vue.js_02

// 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()
},

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>`
}

4.多端问题

如果使用uniapp开发 官方的uniapp并非全端解决方案 如图  该代码为官方Demo 官方代码使用了renderjs 但renderjs仅支持H5和APP端 其他端均不可用！

萤石云java 操作云台 萤石云控制云台_ide_03

5.版本问题 

7.7.6  

7.7.7 

7.7.8

目前以上版本均会出现部分设备播放时黑屏问题  但回退到老版本如 7.6.3 等 则正常播放  截止到23/11/29  此问题依旧未解决

Github仓库 同款报错问题  v7.7.7 react 严重报错，更换成v7.7.6就可以了