vue项目集成萤石云在Web系统中实实际时摄像头监控及控制功能 ...

需求

需求： 开发职员在产线上放置一个萤石摄像头，前端在可视化大屏上实时监控，且控制左右上下功能。
效果

萤石云接入web前期准备工作

• 阅读萤石云API文档：萤石云开放平台开发者文档
  
• 阅读萤石云控制API文档：萤石云摄像头控制文档
  
• 必要准备设备序列号，萤石云视频地址，accessToken,在代码中我将会写成乱码情势。
  
• 了解调用API时间返回的错误码,根据错误码做出相应的操作：萤石云调用API时出现的错误码
  
• 萤石云参数阐明：参数阐明，使用地址
  
  
  
  
• vue项目安装依靠
  
  1. npm install ezuikit-js@0.2.4

  复制代码

7. 页面引入ezuikit

1. import EZUIKit from "ezuikit-js";

复制代码

• 页面使用，及其控制开关实现
  

1. <template>
2.   <div>
3.     <div id="video-container" ref="video" class="content video">视频</div>
4.     <div class="btn_box">
5.       <el-button
6.         style="margin-left: 10px;"
7.         round
8.         size="mini"
9.         icon="el-icon-top-left"
10.         @click="directionControl(4)"
11.       ></el-button>
12.       <el-button
13.         round
14.         size="mini"
15.         icon="el-icon-top"
16.         @click="directionControl(0)"
17.       ></el-button>
18.       <el-button
19.         round
20.         size="mini"
21.         icon="el-icon-top-right"
22.         @click="directionControl(6)"
23.       ></el-button>
24.       <el-button
25.         round
26.         size="mini"
27.         icon="el-icon-back"
28.         @click="directionControl(2)"
29.       ></el-button>
30.       <el-button
31.         round
32.         size="mini"
33.         icon="el-icon-video-play"
34.         @click="stopTurn"
35.       ></el-button>
36.       <el-button
37.         round
38.         size="mini"
39.         icon="el-icon-right"
40.         @click="directionControl(3)"
41.       ></el-button>
42.       <el-button
43.         round
44.         size="mini"
45.         icon="el-icon-bottom-left"
46.         @click="directionControl(5)"
47.       ></el-button>
48.       <el-button
49.         round
50.         size="mini"
51.         icon="el-icon-bottom"
52.         @click="directionControl(1)"
53.       ></el-button>
54.       <el-button
55.         round
56.         size="mini"
57.         icon="el-icon-bottom-right"
58.         @click="directionControl(7)"
59.       ></el-button>
60.     </div>
61.   </div>
62. </template>

复制代码

• 相关JS代码
  

1. import EZUIKit from "ezuikit-js";
2. 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>

复制代码

• CSS相关代码
  

2. <style lang="scss" scoped>
3. .content {
4.   background: #fff;
5.   height: 368px;
6. }
7. .btn_box {
8.   margin: 0px auto;
9.   width: 190px;
10.   height: 125px;
11.   display: flex;
12.   justify-content: center;
13.   flex-wrap: wrap;
14.   align-content: space-around;
15. }
16. </style>

复制代码

• 获取实时视频API阐明
  

后续了解更多功能，继续更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。