vue项目集成萤石云摄像头，实现监控、云台控制（左右移动）、全屏、声音等功能，以及集成遇到的问题

        新项目需要用到萤石云的摄像头监控，通过轻应用集成后客户又提出要控制移动，声音、全屏等功能，记录一下开发过程及踩坑经历。先看效果demo：

        垃圾萤石云API文档各种不全，查了半天资料没有一种能全部实现的方式，只能自己东拼西凑来解决，以下提供2中集成方案：

1、ezopen零门槛视频接入（iframe）集成：

<iframe :src="videoUrl" style="width: 100%;margin-bottom: 10px;" class="row_video_css">

        <div class="btn_box">
            <el-button round  size="mini" icon="el-icon-top-left" @click="directionControl(4)"></el-button>
            <el-button round  size="mini" icon="el-icon-top" @click="directionControl(0)"></el-button>
            <el-button round  size="mini" icon="el-icon-top-right" @click="directionControl(6)"></el-button>
            <el-button round  size="mini" icon="el-icon-back" @click="directionControl(2)"></el-button>
            <el-button round  size="mini" icon="el-icon-video-play" @click="stopTurn"></el-button>
            <el-button round  size="mini" icon="el-icon-right" @click="directionControl(3)"></el-button>
            <el-button round  size="mini" icon="el-icon-bottom-left" @click="directionControl(5)"></el-button>
            <el-button round  size="mini" icon="el-icon-bottom" @click="directionControl(1)"></el-button>
            <el-button round  size="mini" icon="el-icon-bottom-right" @click="directionControl(7)"></el-button>
          </div>


//控制地方法：
//控制云台
    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=" + accessToken

accessURL是预览监控地址，获取途径（示例：）控制台——设备管理——播放地址栏选监控，里面的地址复制出来

accessToken通过接口获取，参考地址：文档概述 · 萤石开放平台API文档

云台控制参考地址：文档概述 · 萤石开放平台API文档

2、通过轻应用集成云台控制实现（目前使用版本，有部分现成的API，我懒，所以选这个），上代码：

安装依赖：

npm install ezuikit-js@7.7.7

注意：最新版依赖运行不起来，不知道是不是我自己环境的问题，反正很坑，切换到7.7.7版本正常运行

template部分

<div id="ezuikit-player"></div>
          <div class="btn_box" style="text-align: right">
            <el-tooltip class="item" effect="dark" content="左移" placement="bottom">
              <el-button round  size="mini" icon="el-icon-back" @click="directionControl(2)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="上移" placement="bottom">
              <el-button round  size="mini" icon="el-icon-top" @click="directionControl(0)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="停止移动" placement="bottom">
              <el-button round  size="mini" icon="el-icon-video-play" @click="stopTurn"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="下移" placement="bottom">
              <el-button round  size="mini" icon="el-icon-bottom" @click="directionControl(1)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="右移" placement="bottom">
              <el-button round  size="mini" icon="el-icon-right" @click="directionControl(3)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="开启声音" placement="bottom">
              <el-button round  size="mini" icon="el-icon-bell" v-on:click="openSound"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="关闭声音" placement="bottom">
              <el-button round  size="mini" icon="el-icon-close-notification" v-on:click="closeSound"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
              <el-button round  size="mini" icon="el-icon-full-screen" v-on:click="fullScreen"></el-button>
            </el-tooltip>
          </div>

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文档

但是垃圾文档里开启云台方法不生效，咋调试都没出来，所以只能自己加上云台控制的方法。代码没整理，懒得弄了，就这样吧。