wszhyWx/pages/videoLive/videoLive.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);
					}
				});
			},
			
			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);
					}
				})
			},
		}
	}
</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>