<template>
|
<el-row :gutter="8" class="w100 h100">
|
<el-col :span="24" :xs="24" class="flex-column h100">
|
<div id="shipinbuju" class="video_box_containter">
|
<div>
|
<!-- <span style="position: absolute; left: 40%; top: 50%; font-size: 36px">设备安装中...</span> -->
|
<div id="ezuikit-player"></div>
|
<div class="flex">
|
<span @mousedown="PTZControlStart('left')" @mouseup="PTZControlStop('left')"
|
><el-icon><ArrowLeftBold /></el-icon
|
></span>
|
<span
|
><el-icon><ArrowUpBold /></el-icon
|
></span>
|
<span
|
><el-icon><ArrowRightBold /></el-icon
|
></span>
|
<span
|
><el-icon><ArrowDownBold /></el-icon
|
></span>
|
<span></span>
|
<span></span>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup lang="ts">
|
import axios from 'axios';
|
import { ElMessage } from 'element-plus';
|
import { computed, onMounted, reactive, ref } from 'vue';
|
import EZUIKit from 'ezuikit-js';
|
const YING_SHI_URL = 'https://open.ys7.com/api/';
|
const AppKey = '4dd1ebea34544429b55d0e12fef86156';
|
const Secret = '151b699b9150fe1939af7b2fca29503c';
|
|
//0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距，16-自动控制
|
const PZT_CMD = { top: 0, bottom: 1, left: 2, right: 3 };
|
|
const state = reactive({
|
m_accessToken: null,
|
m_curDeviceLiveUrl: '',
|
});
|
onMounted(() => {
|
getAccessToken();
|
});
|
// 根据key和secret获取accessToken https://open.ys7.com/help/81
|
const getAccessToken = () => {
|
axios({
|
method: 'post',
|
url: YING_SHI_URL + 'lapp/token/get',
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded',
|
},
|
data: {
|
appKey: AppKey,
|
appSecret: Secret,
|
},
|
})
|
.then((res) => {
|
state.m_accessToken = res.data.data.accessToken;
|
getLiveUrlByAccessToken();
|
})
|
.catch((err) => {
|
ElMessage.error('获取token失败');
|
});
|
};
|
// 根据accessToken获取直播地址 https://open.ys7.com/help/1414
|
const getLiveUrlByAccessToken = () => {
|
axios({
|
method: 'post',
|
url: YING_SHI_URL + 'lapp/v2/live/address/get',
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded',
|
},
|
data: {
|
accessToken: state.m_accessToken,
|
deviceSerial: 'D64553479', //设备序列号，一个序列号对应一个设备
|
},
|
})
|
.then((res) => {
|
state.m_curDeviceLiveUrl = res.data.data.url;
|
initVideoPlayer();
|
})
|
.catch((err) => {
|
ElMessage.error('获取token失败');
|
});
|
};
|
// 初始化播放器
|
const initVideoPlayer = () => {
|
const UIKitDEMO = new EZUIKit.EZUIKitPlayer({
|
id: `ezuikit-player`,
|
url: state.m_curDeviceLiveUrl,
|
accessToken: state.m_accessToken,
|
width: 500,
|
height: 500,
|
});
|
UIKitDEMO.play()
|
.then((res) => {
|
UIKitDEMO.openPtz();
|
})
|
.catch((err) => {});
|
};
|
// 云台控制开始
|
//对设备进行开始云台控制，开始云台控制之后必须先调用停止云台控制接口才能进行其他操作，包括其他方向的云台转动）
|
const PTZControlStart = (cmd) => {
|
axios({
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded',
|
},
|
url: 'https://open.ys7.com/api/lapp/device/ptz/start',
|
method: 'post',
|
data: {
|
accessToken: state.m_accessToken,
|
deviceSerial: 'D64553479',
|
channelNo: 1,
|
direction: PZT_CMD[cmd],
|
speed: 1,
|
},
|
})
|
.then(function (response) {
|
console.log(response);
|
})
|
.catch(function (error) {
|
console.log(error);
|
});
|
};
|
// 云台控制停止
|
const PTZControlStop = (cmd) => {
|
axios({
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded',
|
},
|
url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
|
method: 'post',
|
data: {
|
accessToken: state.m_accessToken,
|
deviceSerial: 'D64553479',
|
channelNo: 1,
|
direction: PZT_CMD[cmd],
|
},
|
})
|
.then(function (response) {
|
console.log(response);
|
})
|
.catch(function (error) {
|
console.log(error);
|
});
|
};
|
</script>
|
<style scoped lang="scss">
|
.video_box_containter {
|
width: 100%;
|
height: calc(100% - 30px);
|
overflow: auto;
|
border: 1px solid #ddd;
|
border-radius: 10px;
|
box-sizing: border-box;
|
padding: 5px;
|
}
|
|
#shipinbuju {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.jiankongbofang {
|
position: relative;
|
width: 50%;
|
height: 540px;
|
background-color: #ccc;
|
border: 2px solid #999;
|
box-sizing: border-box;
|
}
|
|
.jiankongbofang > iframe {
|
position: relative;
|
width: 100%;
|
height: 92%;
|
text-align: center;
|
font-size: 12px;
|
border: none;
|
}
|
|
.yidong_buttons span {
|
width: 32px;
|
height: 32px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
/*line-height: 32px;
|
display: inline-block;
|
text-align: center;
|
cursor: pointer;*/
|
border-radius: 50%;
|
background-color: #337ab7;
|
font-size: 20px;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.yidong_buttons {
|
position: absolute;
|
width: 85%;
|
left: 15%;
|
top: 93%;
|
display: flex;
|
align-items: center;
|
flex-wrap: nowrap;
|
}
|
</style>
|
