529 lines
13 KiB
Vue
529 lines
13 KiB
Vue
<template>
|
|
<view class="videoLive">
|
|
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="摄像机01"
|
|
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
|
|
|
|
<view class="center">
|
|
<view class="video_live">
|
|
<!-- <image src="../../static/videoLive.png" mode=""></image> -->
|
|
<video id="myVideo" style="width: 100%;height: 100%;" :src="src" controls></video>
|
|
</view>
|
|
|
|
<view class="skills">
|
|
<view class="left">
|
|
<image src="../../static/direction_keys.png" mode=""></image>
|
|
<view :class="directionFlag == 0 ? 'left_arrow_item_act' : 'left_arrow_item'" @touchstart.stop.prevent='touchstart(2)' @touchend.stop.prevent='touchend(2)'>
|
|
|
|
</view>
|
|
<view :class="directionFlag == 1 ? 'right_arrow_item_act' : 'right_arrow_item'" @touchstart.stop.prevent='touchstart(3)' @touchend.stop.prevent='touchend(3)'>
|
|
|
|
</view>
|
|
<view :class="directionFlag == 2 ? 'up_arrow_item_act' : 'up_arrow_item'" @touchstart.stop.prevent='touchstart(0)' @touchend.stop.prevent='touchend(0)'>
|
|
|
|
</view>
|
|
<view :class="directionFlag == 3 ? 'down_arrow_item_act' : 'down_arrow_item'" @touchstart.stop.prevent='touchstart(1)' @touchend.stop.prevent='touchend(1)'>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="right">
|
|
<view class="right_item">
|
|
<view :class="flag1?'add_act':'add'" @touchstart.stop.prevent='touchstart(10)' @touchend.stop.prevent='touchend(10)'>
|
|
|
|
</view>
|
|
<view class="focus">
|
|
焦距
|
|
</view>
|
|
<view :class="flag1?'subtract':'subtract_act'" @touchstart.stop.prevent='touchstart(11)' @touchend.stop.prevent='touchend(11)'>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="right_item">
|
|
<view :class="flag2?'add_act':'add'" @touchstart.stop.prevent='touchstart(8)' @touchend.stop.prevent='touchend(8)'>
|
|
|
|
</view>
|
|
<view class="focus">
|
|
缩放
|
|
</view>
|
|
<view :class="flag2?'subtract':'subtract_act'" @touchstart.stop.prevent='touchstart(9)' @touchend.stop.prevent='touchend(9)'>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 头部导航背景
|
|
background: {
|
|
backgroundColor: '#24B383',
|
|
},
|
|
directionFlag:5,
|
|
flag1:true,
|
|
flag2:true,
|
|
cameraSerialNumber:'',
|
|
cameraChannelNumber:'',
|
|
accesstoken:'',
|
|
src:'',
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// console.log(options,'00');
|
|
this.cameraSerialNumber = options.cameraSerialNumber;
|
|
this.cameraChannelNumber = options.cameraChannelNumber
|
|
this.getVideoData(this.cameraSerialNumber, this.cameraChannelNumber)
|
|
},
|
|
methods:{
|
|
// 获取摄像头得地址
|
|
getVideoData(cameraid, channelid) {
|
|
this.$http({
|
|
url: this.api.camera_getphonehls,
|
|
method: 'GET',
|
|
data: {
|
|
cameraid,
|
|
channelid,
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
this.accesstoken = res.data.accesstoken;
|
|
this.src = res.data.ezopen;
|
|
}
|
|
})
|
|
},
|
|
|
|
touchstart(num){
|
|
if(num == 2){
|
|
this.directionFlag = 0;
|
|
}else if(num == 3){
|
|
this.directionFlag = 1;
|
|
}else if(num == 0){
|
|
this.directionFlag = 2;
|
|
}else if(num == 1){
|
|
this.directionFlag = 3;
|
|
}else if(num == 10){
|
|
this.flag1 = true;
|
|
}else if(num == 11){
|
|
this.flag1 = false;
|
|
}else if(num == 8){
|
|
this.flag2 = true;
|
|
}else if(num == 9){
|
|
this.flag2 = false;
|
|
}
|
|
// let that = this;
|
|
// uni.request({
|
|
// url: 'https://open.ys7.com/api/lapp/device/ptz/start',
|
|
// method: 'POST',
|
|
// data:{
|
|
// accessToken: that.accesstoken,
|
|
// deviceSerial: that.cameraSerialNumber,
|
|
// channelNo: that.cameraChannelNumber,
|
|
// direction:num,
|
|
// speed: 1,
|
|
// },
|
|
// header: {
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
// },
|
|
// success: (res) => {
|
|
// // console.log(res);
|
|
// }
|
|
// });
|
|
|
|
this.$http({
|
|
url: this.api.camera_start + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
|
|
method: 'POST',
|
|
}).then(res=>{
|
|
|
|
})
|
|
},
|
|
|
|
touchend(num){
|
|
this.directionFlag = 5
|
|
// let that = this;
|
|
// uni.request({
|
|
// url:'https://open.ys7.com/api/lapp/device/ptz/stop',
|
|
// method: 'POST',
|
|
// data:{
|
|
// accessToken: that.accesstoken,
|
|
// deviceSerial: that.cameraSerialNumber,
|
|
// channelNo: that.cameraChannelNumber,
|
|
// direction:num,
|
|
// speed: 1,
|
|
// },
|
|
// header: {
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
// },
|
|
// success: (res) => {
|
|
// // console.log(res);
|
|
// }
|
|
// })
|
|
|
|
this.$http({
|
|
url: this.api.camera_stop + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
|
|
method: 'POST',
|
|
}).then(res=>{
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.videoLive{
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #F5F6FA;
|
|
|
|
.center{
|
|
|
|
.video_live{
|
|
width: 750rpx;
|
|
height: 970rpx;
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.skills{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 61rpx 0 0 40rpx;
|
|
display: flex;
|
|
|
|
.left{
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
position: relative;
|
|
margin-right: 60rpx;
|
|
|
|
.left_arrow,.right_arrow{
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.up_arrow,.down_arrow{
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
}
|
|
|
|
// 左箭头
|
|
.left_arrow_item{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 145rpx;
|
|
left: 29rpx;
|
|
}
|
|
.left_arrow_item_act{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 145rpx;
|
|
left: 29rpx;
|
|
}
|
|
.left_arrow_item::after{
|
|
content: '';
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
background: url('../../static/left_arrow.png') center no-repeat;
|
|
background-size: 15rpx 28rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.left_arrow_item_act::after{
|
|
content: '';
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
background: url('../../static/left_arrow_act.png') center no-repeat;
|
|
background-size: 15rpx 28rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
// 右箭头
|
|
.right_arrow_item{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 145rpx;
|
|
right: 29rpx;
|
|
}
|
|
.right_arrow_item_act{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 145rpx;
|
|
right: 29rpx;
|
|
}
|
|
.right_arrow_item::after{
|
|
content: '';
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
background: url('../../static/right_arrow.png') center no-repeat;
|
|
background-size: 15rpx 28rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.right_arrow_item_act::after{
|
|
content: '';
|
|
width: 15rpx;
|
|
height: 28rpx;
|
|
background: url('../../static/right_arrow_act.png') center no-repeat;
|
|
background-size: 15rpx 28rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
// 上箭头
|
|
.up_arrow_item{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 29rpx;
|
|
left: 146rpx;
|
|
}
|
|
.up_arrow_item_act{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 29rpx;
|
|
left: 146rpx;
|
|
}
|
|
.up_arrow_item::after{
|
|
content: '';
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
background: url('../../static/up_arrow.png') center no-repeat;
|
|
background-size: 27rpx 15rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.up_arrow_item_act::after{
|
|
content: '';
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
background: url('../../static/up_arrow_act.png') center no-repeat;
|
|
background-size: 27rpx 15rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
// 下箭头
|
|
.down_arrow_item{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
bottom: 28rpx;
|
|
left: 146rpx;
|
|
}
|
|
.down_arrow_item_act{
|
|
width: 51rpx;
|
|
height: 51rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
bottom: 28rpx;
|
|
left: 146rpx;
|
|
}
|
|
.down_arrow_item::after{
|
|
content: '';
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
background: url('../../static/down_arrow.png') center no-repeat;
|
|
background-size: 27rpx 15rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.down_arrow_item_act::after{
|
|
content: '';
|
|
width: 27rpx;
|
|
height: 15rpx;
|
|
background: url('../../static/down_arrow_act.png') center no-repeat;
|
|
background-size: 27rpx 15rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.right{
|
|
box-sizing: border-box;
|
|
padding-top: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.right_item{
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
background: #EFFAF6;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 7rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.add{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #EFFAF6;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.add_act{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #24B383;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.add::after{
|
|
content: '';
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
background: url('../../static/add.png') center no-repeat;
|
|
background-size: 38rpx 38rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.add_act::after{
|
|
content: '';
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
background: url('../../static/add_act.png') center no-repeat;
|
|
background-size: 38rpx 38rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.focus{
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #24B383;
|
|
}
|
|
|
|
.subtract{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #EFFAF6;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.subtract_act{
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
background: #24B383;
|
|
border: 2px solid rgba(36,179,131,0.35);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.subtract::after{
|
|
content: '';
|
|
width: 38rpx;
|
|
height: 8rpx;
|
|
background: url('../../static/subtract.png') center no-repeat;
|
|
background-size: 38rpx 8rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
.subtract_act::after{
|
|
content: '';
|
|
width: 38rpx;
|
|
height: 8rpx;
|
|
background: url('../../static/subtract_act.png') center no-repeat;
|
|
background-size: 38rpx 8rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|