最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头，实现远程播放、控制移动、放大缩小等功能，首先百度搜类似的需求，搜不到，只能自己采坑，登萤石云官网，看对应文档。

一、登录萤石云开放平台，下载demo并运行

• 在萤石云开放平台官网(https://open.ys7.com)的导航栏中，点击下载按钮
• 页面下方，分别有对应JavaScript、Android、IOS的demo，这里，我们下载JavaScript
  
• 下载的demo中，会有对应的原生js摄像头案例，以及用vue、react框架的案例，打开下载的文件里的EZUIKit-JavaScript-npm\demos\react-demo，先用npm或者yarn下载依赖，之后执行npm run start命令就可以运行demo了，
• 直接启动的话，代码中需要将一些参数修改为真实数据才能看到真实的摄像头画面

二、在实际项目中使用，实现基础播放功能

• 首先，项目要下载依赖，在react中，用npm或者yarn下载ezuikit-js库
• 页面引入下载的库
  import EZUIKit from 'ezuikit-js'
• render钩子中，准备dom结构，一个具有id的div

   <div id="ysyPlayWind" ></div>

• 如果想要页面渲染时就播放的话，那么就在componentDidMount钩子函数中写之后的代码，如果需要点击某个按钮来播放视频，那么就在点击事件中写
• 点击播放的函数

onPlayClick = async () => {
      // 播放类别：萤石云
      let url = this.state.playData?.paramYsyUrlHd // 高清地址
      let accessToken = this.state.playData?.accessToken // accessToken
      new EZUIKit.EZUIKitPlayer({
        id: 'ysyPlayWind', // 准备的dom元素的id，画面就在这里面播放
        autoplay: true, // 开启自动播放
        url: url, // 播放地址
        accessToken: accessToken,
        template: 'standard', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版； 
        // header: ['capturePicture','save','zoom'], // 视频上方头部控件 如果templete参数不为simple,该字段将被覆盖
        // footer: ['talk','broadcast','hd','fullScreen'], // 视频下方底部控件 如果template参数不为simple,该字段将被覆盖
        width: 800,
        height: 500,
        // handleError: handleError, // 播放失败的回调
        // handleSuccess: handleSuccess, // 播放成功的回调
      })
  }

• 这样，就可以实现在react中播放萤石云摄像头了，如果没有真实的播放url地址，只是用来玩玩的话，可以登录萤石云开放平台后，在个人中心页面，有试用设备，里面有监控地址，拿那里面的播放地址就行，但是能不能实现控制本人没试过，
  

三、实现可控制摄像头的控制功能
前提：你的摄像头是能控制的摄像头设备

• 萤石云摄像头文档网址https://open.ys7.com/doc/zh/book/index/device_ptz.html
• 文档中，打开 HTTP接口 中的 设备 中的 云台
• 
• 项目中，我只使用了两个接口，开始云台控制、停止云台控制，实现了摄像头各方向的移动，以及电子放大与缩小
• 首先准备一些按钮，有上下左右，以及停止按钮，按钮再用onClick注册事件

    <Button title="向上" onClick={()=>this.startCtrl(0)}>
        <Icon type="arrow-up" />
    </Button>
    <Button title="向下" onClick={()=>this.startCtrl(1)}>
        <Icon type="arrow-down" />
    </Button>
    <Button title="停止" onClick={this.stopCtrl}>
        <Icon type="stopcircle" />
    </Button>

• 准备了两个方法，开始控制和停止控制，开始控制方法中，在开始控制的方法中接收一个参数，上面代码中传的0、1等，代表需要怎样控制这个摄像头（向上还是向下还是向左等等），因为停止控制方法是单独的，无需传参，因此就单独写个方法来调用萤石云提供的停止控制的接口。
• 开始控制方法（参考写法）

// 开始云控制摄像头（调用网络接口）操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
  startCtrl = async(direction) => {
    let {accessToken, paramYsySn, paramChanelNum} = this.state.playData // state中准备好了一些参数，这里解构出来
    
    // 准备一个对象，给接口传参用，参数说明在文档中有详细介绍
    let obj = {
      accessToken, // accessToken，相当于密钥
      deviceSerial: paramYsySn, // 设备的序列号
      channelNo: parseInt(paramChanelNum), // 设备通道号，文档中说要用int，所以我就加了个parseInt，估计不加也行
      direction, // 代表需要怎样控制，这里就是拿的方法中传过来的参数0、1等
      speed: 0 // 速度，0最慢，文档中也有说明
    }

    // 调用萤石云提供的接口，本来我用是axios调用，但是一直报缺少accessToken的错，又不想用原生http请求了，就直接用jquery请求接口了
    $.ajax({
      url: "https://open.ys7.com/api/lapp/device/ptz/start", // 开始云台控制的接口，萤石云提供，文档中有
      type: 'POST',
      data: obj, // 上面准备的请求参数
      success: function(data) {
        console.log(data)
      },
    })

	// 因为这个接口调用后是长驱的，比如让摄像头向左移动，如果不调用停止接口，那么摄像头会一直向左移动，直到转不动或者调用了停止接口才会停下来，因此，在这里设置个延时器，可以实现“步进”控制，点一下，走300ms，调用停止云台控制方法
    window.setTimeout(() => {
      this.stopCtrl() // 调用停止云台控制的方法
    }, 300)
    
  }

• 停止云台控制

  // 停止云控制摄像头（调用网络接口）
  stopCtrl = async() => {
    let {accessToken, paramYsySn, paramChanelNum} = this.state.playData // 同样，解构出一些必要的参数

	// 准备请求参数，跟开始控制方法相比，少了direction与speed两个参数
    let obj = {
      accessToken: accessToken, // 授权过程获取的access_token
      deviceSerial: paramYsySn, // 设备序列号
      channelNo: parseInt(paramChanelNum), // 通道号
    }

	// 调用萤石云提供的停止云台控制的方法，文档中有提供
    $.ajax({
      url: "https://open.ys7.com/api/lapp/device/ptz/stop",
      type: 'POST',
      data: obj,
      success: function(data) {
        console.log(data)
      },
    })
  }

• 到此，就实现了萤石云摄像头的播放与控制