前端JS、Vue实现海康萤石直播预览、回放、云台控制功能
最新代码和demo
官方示例
https://open.ys7.com/help/31
GitHub仓库
https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm
控制功能
云台 · 萤石开放平台API文档 (ys7.com)
目前遇到的问题以及解决方法：
如果您的项目需要云台控制 设备切换 预览和回放等功能 强烈建议看完这些！！！
1. 老库和新库代码不同 但调用方式相同 如果在一个项目中同时引入两个库调用 可能会造成冲突的情况
如A页面引入A库 则正常播放 播放之后 切B页面 引入B库的B页面播放则报错 若首先进B页引B库 则A报错 这是因为A库script引入后 已经加载入内存 因为调用方式相同 所以B页会优先调用A库 所以报错
-------------------------------------------------------------------------------------------------------------------------
2. A切换到B设备播放时 一定要先调用以下停止播放方法 可能会造成切换到B之后 A依旧在播放的问题（如果项目有切换设备播放的功能 那强烈建议在切换事件中添加以下代码）
player.stop()-------------------------------------------------------------------------------------------------------------------------
3. 情况同2 正在播放时 切换到其他模块/页面 也会造成关闭当前模块/页面后依旧在播放的问题 可以在销毁时调用停止播放方法 （必须加）
beforeDestroy() { player.stop() },-------------------------------------------------------------------------------------------------------------------------
4. 设置不带云台控制的主题后 如果调用切换视频方法 changePlayUrl 后 视频会出现云台控制按钮
-------------------------------------------------------------------------------------------------------------------------
5.控制请求不能为JSON格式 故控制代码中设置了请求头并使用了qs插件进行转换 如果使用JSON格式发送 则会报10002 accessToken异常或过期
-------------------------------------------------------------------------------------------------------------------------
6.首次加载设备时设备存在不在线情况 重复切换设备播放后有可能会出现bug 此时可以参考以下代码
// video-container是播放容器// 判断设备是否在线 具体判断根据业务逻辑来写 if (data.parameter == undefined) { // 首先调用禁止播放 player.stop() // 不在线时重载元素 （ref绑定你播放容器的父元素 然后重载） this.$refs.viewtools.innerHTML = `` }
Vue项目步骤如下：
安装依赖
npm install ezuikit-js全局引入
import EZUIKit from 'ezuikit-js';或者页面内引入（推荐）
页面使用
控制步骤如下：
需要的参数可以参照文档 文档已经放文章上面
在每个按钮上添加mousedown和mouseup事件 省略了一些代码
控制可能会有一些延迟 操作间隔建议1s以上
// 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
// 拿向上按钮举例 鼠标按下越久 转动的也就越广~
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)
})
},