需求

需求： 開發人員在產線上放置一個螢石攝像頭，前端在可視化大屏上實時監控，且控制左右上下功能。

效果

螢石云接入web前期準備工作

1. 閱讀螢石云API文檔：螢石云開放平臺開發者文檔

2. 閱讀螢石云控制API文檔：螢石云攝像頭控制文檔

3. 需要準備設備序列號，螢石云視頻地址，accessToken,在代碼中我將會寫成亂碼形式。

4. 了解調用API時候返回的錯誤碼,根據錯誤碼做出響應的操作：螢石云調用API時出現的錯誤碼

5. 螢石云參數說明：參數說明，使用地址
   

6. vue項目安裝依賴

   npm install ezuikit-js@0.2.4
   

7. 頁面引入ezuikit

import EZUIKit from "ezuikit-js";

8. 頁面使用，及其控制開關實現

<template><div><div id="video-container" ref="video" class="content video">視頻</div><div class="btn_box"><el-buttonstyle="margin-left: 10px;"roundsize="mini"icon="el-icon-top-left"@click="directionControl(4)"></el-button><el-buttonroundsize="mini"icon="el-icon-top"@click="directionControl(0)"></el-button><el-buttonroundsize="mini"icon="el-icon-top-right"@click="directionControl(6)"></el-button><el-buttonroundsize="mini"icon="el-icon-back"@click="directionControl(2)"></el-button><el-buttonroundsize="mini"icon="el-icon-video-play"@click="stopTurn"></el-button><el-buttonroundsize="mini"icon="el-icon-right"@click="directionControl(3)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom-left"@click="directionControl(5)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom"@click="directionControl(1)"></el-button><el-buttonroundsize="mini"icon="el-icon-bottom-right"@click="directionControl(7)"></el-button></div></div>
</template>

9. 相關JS代碼

import EZUIKit from "ezuikit-js";
import axios from "axios";
export default {mounted() {this.initEZUIKitPlayer();},data() {return {eZUIKitPlayer: null,accessToken:"at.b1bw5w7f8ogfo0rjcd5chidksjdu9jty-361f07133z-1oity3u-dth2n7yvl",accessUrl: "ezopen://open.ys7.com/F6293ADF88/1.hd.live",};},methods: {//停止控制控制云臺stopTurn() {axios({url: "https://open.ys7.com/api/lapp/device/ptz/stop",method: "post",params: {accessToken: this.accessToken,// direction:num,channelNo: 1, // 通道號deviceSerial: "F6245FF7788", //序列號},timeout: 2000,}).then((res) => {//  console.log(res.data)if (res.data.code == "60000") {this.$message(res.data.msg);}});},// 云平臺控制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: "F62937788", //序列號},timeout: 2000,}).then((res) => {if (res.data.code == "60000") {this.$message(res.data.msg);}});},// 初始化螢石云視頻對接initEZUIKitPlayer() {this.eZUIKitPlayer = new EZUIKit.EZUIKitPlayer({id: "video-container",accessToken: this.accessToken,url: this.accessUrl,header: ["capturePicture", "save", "zoom"],footer: ["fullScreen"],width: 375,height: 257,autoplay: true,audio: 1,template: "simple",});},},
};
</script>

10. CSS相關代碼

<style lang="scss" scoped>
.content {background: #fff;height: 368px;
}
.btn_box {margin: 0px auto;width: 190px;height: 125px;display: flex;justify-content: center;flex-wrap: wrap;align-content: space-around;
}
</style>

9. 獲取實時視頻API說明

后續了解更多功能，繼續更新