vue项目集成萤石云在Web系统中实实际时摄像头监控及控制功能
需求需求： 开发职员在产线上放置一个萤石摄像头，前端在可视化大屏上实时监控，且控制左右上下功能。
效果
https://img-blog.csdnimg.cn/direct/0763691417974d6cae33160168cc93c1.gif
萤石云接入web前期准备工作
[*] 阅读萤石云API文档：萤石云开放平台开发者文档
[*] 阅读萤石云控制API文档：萤石云摄像头控制文档
[*] 必要准备设备序列号，萤石云视频地址，accessToken,在代码中我将会写成乱码情势。
[*] 了解调用API时间返回的错误码,根据错误码做出相应的操作：萤石云调用API时出现的错误码
[*] 萤石云参数阐明：参数阐明，使用地址
https://img-blog.csdnimg.cn/direct/d54f5e7ea92a4e32b015ec6aa5db67fc.png
[*] vue项目安装依靠
npm install ezuikit-js@0.2.4
https://img-blog.csdnimg.cn/direct/174e269f5e524067886cb1a42d167858.png
7. 页面引入ezuikit
import EZUIKit from "ezuikit-js";
[*]页面使用，及其控制开关实现
<template>
<div>
<div id="video-container" ref="video" class="content video">视频</div>
<div class="btn_box">
<el-button
style="margin-left: 10px;"
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>
</div>
</template>
[*]相关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>
[*]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>
[*]获取实时视频API阐明
https://img-blog.csdnimg.cn/direct/9d75968e041f402aa4073b8dc11ac5f6.png
后续了解更多功能，继续更新
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]