vue项目集成萤石云在Web系统中实实际时摄像头监控及控制功能 - ToB企服应用市场:ToB评测及商务社交产业平台

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>

复制代码

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>

复制代码

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

复制代码