vue项目集成萤石云摄像头，实现监控、云台控制（左右移动）、全屏、声音等功能，以及集成遇到的问题 |
您所在的位置：网站首页 › 监控摄像头api开放方法视频 › vue项目集成萤石云摄像头，实现监控、云台控制（左右移动）、全屏、声音等功能，以及集成遇到的问题 |
vue项目集成萤石云摄像头，实现监控、云台控制（左右移动）、全屏、声音等功能，以及集成遇到的问题
|
新项目需要用到萤石云的摄像头监控，通过轻应用集成后客户又提出要控制移动，声音、全屏等功能，记录一下开发过程及踩坑经历。先看效果demo：
垃圾萤石云API文档各种不全，查了半天资料没有一种能全部实现的方式，只能自己东拼西凑来解决，以下提供2中集成方案： 1、ezopen零门槛视频接入（iframe）集成： //控制地方法： //控制云台 directionControl(num) { axios({ url:'https://open.ys7.com/api/lapp/device/ptz/start', method: 'post', params: { accessToken: this.accessToken, //accesstoken码，一般一周过期 speed:2, //旋转速度 direction:num, //方向，传入数字，对应数字在api文档有 channelNo:1, // 通道号 deviceSerial:this.basicInformation.DeviceSerial //序列号 }, timeout: 2000 }).then(res=>{ if(res.data.code == '60000' ){ this.$message(res.data.msg) } }) }, //停止控制控制云台 stopTurn(){ axios({ url:'https://open.ys7.com/api/lapp/device/ptz/stop', method: 'post', params: { accessToken: this.accessToken, // direction:num, channelNo:1, // 通道号 deviceSerial:this.basicInformation.DeviceSerial //序列号 }, timeout: 2000 }).then(res=> { // console.log(res.data) if(res.data.code == '60000' ){ this.$message(res.data.msg) } }) }, /*注释*/ //videoUrl: //后端/前端通过接口获取，必要传参：accessKey、accessSecret,获取token后拼接成视频地址 videoUrl = "https://open.ys7.com/ezopen/h5/iframe?url=" + accessURL + "&accessToken=" + accessTokenaccessURL是预览监控地址，获取途径（示例：）控制台——设备管理——播放地址栏选监控，里面的地址复制出来 accessToken通过接口获取，参考地址：文档概述 · 萤石开放平台API文档 云台控制参考地址：文档概述 · 萤石开放平台API文档 2、通过轻应用集成云台控制实现（目前使用版本，有部分现成的API，我懒，所以选这个），上代码： 安装依赖： npm install [email protected]注意：最新版依赖运行不起来，不知道是不是我自己环境的问题，反正很坑，切换到7.7.7版本正常运行 template部分 script部分 import EZUIKit from "ezuikit-js"; mounted() { this.initPlayer();//初始化萤石云摄像头 }, methods: { //初始化萤石云摄像头 initPlayer(){ if (this.player) { this.destroy(); } //请求接口获取token basicDataApi.cpxqGetYSYToken({key: this.rowData.accessKey,secret:this.rowData.accessSecret}).then((res)=>{ if(res.code == 200){ this.accessToken = res.result.data.accessToken // 初始化设备 this.player = new EZUIKit.EZUIKitPlayer({ id: `ezuikit-player`, url: 'ezopen://open.ys7.com/BB6255228/1.hd.live', accessToken: this.accessToken, height:this.playerHeight }) }else{ this.videoUrl="" } }) }, //销毁 destroy(){ this.player.destroy(); this.player = null; }, //全屏 fullScreen() { this.player.fullScreen(); }, //控制台 controlPlat() { this.player.openPtz(); }, //开启声音 openSound() { this.player.openSound(); }, //关闭声音 closeSound() { this.player.closeSound(); }, //控制云台 directionControl(num) { axios({ url:'https://open.ys7.com/api/lapp/device/ptz/start', method: 'post', params: { accessToken: this.accessToken, //accesstoken码，一般一周过期 speed:2, //旋转速度 direction:num, //方向，传入数字，对应数字在api文档有 channelNo:1, // 通道号 deviceSerial:this.basicInformation.DeviceSerial //序列号 }, timeout: 2000 }).then(res=>{ if(res.data.code == '60000' ){ this.$message(res.data.msg) } }) }, //停止控制控制云台 stopTurn(){ axios({ url:'https://open.ys7.com/api/lapp/device/ptz/stop', method: 'post', params: { accessToken: this.accessToken, // direction:num, channelNo:1, // 通道号 deviceSerial:this.basicInformation.DeviceSerial //序列号 }, timeout: 2000 }).then(res=> { // console.log(res.data) if(res.data.code == '60000' ){ this.$message(res.data.msg) } }) }, }其中直接调用方法的地方参考官方API文档：文档概述 · 萤石开放平台API文档 但是垃圾文档里开启云台方法不生效，咋调试都没出来，所以只能自己加上云台控制的方法。代码没整理，懒得弄了，就这样吧。 |
【本文地址】
今日新闻 |
推荐新闻 |