xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
wszhyWx/pages/videoLive/videoLive.vue

336 lines
7.9 KiB
Vue
Raw Blame History

<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>
<image class="left_arrow" src="../../static/left_arrow.png" mode="" @touchstart='ytControl(2)' @touchend='ytControlStop(2)' ></image>
<image class="right_arrow" src="../../static/right_arrow.png" mode="" @touchstart='ytControl(3)' @touchend='ytControlStop(3)'></image>
<image class="up_arrow" src="../../static/up_arrow.png" mode="" @touchstart='ytControl(0)' @touchend='ytControlStop(0)'></image>
<image class="down_arrow" src="../../static/down_arrow.png" mode="" @touchstart='ytControl(1)' @touchend='ytControlStop(1)'></image>
</view>
<view class="right">
<view class="right_item">
<view :class="flag1?'add_act':'add'" @touchstart='ytControlFocusAdd(10)' @touchend='ytControlStopFocusAdd(10)'>
<image src="../../static/add_act.png" mode="" v-if="flag1==true"></image>
<image src="../../static/add.png" mode="" v-if="flag1==false"></image>
</view>
<view class="focus">
焦距
</view>
<view :class="flag1?'subtract':'subtract_act'" @touchstart='ytControlFocusSubtract(11)' @touchend='ytControlStopFocusSubtract(11)'>
<image src="../../static/subtract.png" mode="" v-if="flag1==true"></image>
<image src="../../static/subtract_act.png" mode="" v-if="flag1==false"></image>
</view>
</view>
<view class="right_item">
<view :class="flag2?'add_act':'add'" @touchstart='ytControlScaleAdd(8)' @touchend='ytControlStopScaleAdd(8)'>
<image src="../../static/add_act.png" mode="" v-if="flag2==true"></image>
<image src="../../static/add.png" mode="" v-if="flag2==false"></image>
</view>
<view class="focus">
缩放
</view>
<view :class="flag2?'subtract':'subtract_act'" @touchstart='ytControlScaleSubtract(9)' @touchend='ytControlStopScaleSubtract(9)'>
<image src="../../static/subtract.png" mode="" v-if="flag2==true"></image>
<image src="../../static/subtract_act.png" mode="" v-if="flag2==false"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: '#24B383',
},
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;
}
})
},
ytControl(num){
let that = this;
// console.log("start");
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);
}
});
},
ytControlStop(num){
let that = this;
// console.log("stop");
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);
}
})
},
// 焦距-放大
ytControlFocusAdd(num){
this.flag1 = true;
this.ytControl(num)
},
ytControlStopFocusAdd(num){
this.ytControlStop(num);
},
// 焦距-缩小
ytControlFocusSubtract(num){
this.flag1 = false;
this.ytControl(num)
},
ytControlStopFocusSubtract(num){
this.ytControlStop(num);
},
// 缩放-放大
ytControlScaleAdd(num){
this.flag2 = true;
this.ytControl(num)
},
ytControlStopScaleAdd(){
this.ytControlStop(num);
},
// 缩放-缩小
ytControlScaleSubtract(num){
this.flag2 = false;
this.ytControl(num)
},
ytControlStopScaleSubtract(num){
this.ytControlStop(num);
},
}
}
</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;
>image{
width: 100%;
height: 100%;
}
.left_arrow,.right_arrow{
width: 15rpx;
height: 28rpx;
}
.left_arrow{
position: absolute;
top: 155rpx;
left: 47rpx;
}
.right_arrow{
position: absolute;
top: 155rpx;
right: 45rpx;
}
.up_arrow,.down_arrow{
width: 27rpx;
height: 15rpx;
}
.up_arrow{
position: absolute;
top: 42rpx;
left: 157rpx;
}
.down_arrow{
position: absolute;
bottom: 40rpx;
left: 157rpx;
}
}
.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;
>image{
width: 38rpx;
height: 38rpx;
}
}
.add_act{
width: 66rpx;
height: 66rpx;
background: #24B383;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
>image{
width: 38rpx;
height: 38rpx;
}
}
.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;
>image{
width: 38rpx;
height: 8rpx;
}
}
.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;
>image{
width: 38rpx;
height: 8rpx;
}
}
}
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink