digital-agriculture-app/pages/videoMonitor/videoPlay.vue

<template>
	<view class="background-color-fff height-100vh">
		<!-- 播放器 -->
		<view>
			<!-- #ifdef APP -->
			<video :src="playurl" :is-live="true" :show-mute-btn="true" autoplay class="w100" :show-fullscreen-btn="false" :show-progress="false" :show-play-btn="false"></video>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<sy-new-jessibuca ref="h5" loadingText="加载中" width="750" height="400" :url="playurl"></sy-new-jessibuca>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<u-alert description="微信小程序需要开通live-player组建权限,暂时不可看" type="warning" showIcon ></u-alert>
			<u-gap :height="10"></u-gap>
			<live-player :src="playurl" :autoplay="true" class="w100" mode="live" />
			<!-- #endif -->
		</view>
		<uni-data-select  :localdata="channelList" @change="handleChange"></uni-data-select>
		<!-- 云台控制 -->
		<view class="controller">
			<view class="rocker">
				<view class="up" @touchstart="handleDirection('up')" @touchend="handleDirection('stop')">
					<u-button :customStyle="{border:'none'}" plain  icon="arrow-up"></u-button>
				</view>
				<view class="down" @touchstart="handleDirection('down')" @touchend="handleDirection('stop')">
					<u-button :customStyle="{border:'none'}"  plain  icon="arrow-down"></u-button>
				</view>
				<view class="left" @touchstart="handleDirection('left')" @touchend="handleDirection('stop')">
					<u-button :customStyle="{border:'none'}"  plain  icon="arrow-left"></u-button>
				</view>
				<view class="right" @touchstart="handleDirection('right')" @touchend="handleDirection('stop')">
					<u-button :customStyle="{border:'none'}"  plain  icon="arrow-right"></u-button>
				</view>
				<view class="circle"></view>
			</view>
			<view class="zoom">
				<view @touchstart="ptzScale(1)" @touchend="ptzScale(0)">
					<u-button plain :customStyle="{border:'none'}"   icon="plus"></u-button>
				</view>
				<view class="text"> 缩放 </view>
				<view  @touchstart="ptzScale(2)" @touchend="ptzScale(0)">
					<u-button plain :customStyle="{border:'none'}"  icon="minus"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//设备ID
				deviceId:null,
				//监控设备编号
				serialNumber: null,
				//频道列表
				channelList:[],
				//频道编号
				channelSipId: null,
				//播放地址
				playurl: null
			}
		},
		async onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.deviceName,
			});
			this.deviceId = option.deviceId
		},
		async mounted() {
			await this.getDeviceInfo();
			
			// #ifdef H5
			this.$refs.h5.create();
			// #endif
		},
		methods: {
			//处理通道选择事件
			handleChange(e){
				//给通道复制
				this.channelSipId=e;
				this.getUrl();
			},
			
			//播放
			async getUrl() {
				if (this.serialNumber && this.channelSipId) {
					//通知设备推流
					const {data} = await uni.$u.http.get(`/sip/player/play/${this.serialNumber}/${this.channelSipId}`);
					if (data.playurl) {
						this.playurl = data.playurl;
						console.log(this.playurl)
					}
				}
			},

			//获取设备信息,设备信息里面有频道信息，在children里面
			async getDeviceInfo() {
				const {data} = await uni.$u.http.get(`/iot/device/${this.deviceId}`);
				this.serialNumber = data.serialNumber;
				this.channelList=data.children.filter(item=>item.sipStatus==3).map(item=>({
					text:item.channelName,
					value:item.channelSipId
				}));
			},
			//云台控制
			handleDirection(d) {
				switch (d) {
					case 'up':
						this.ptzDirection(0, 1);
						break;
					case 'down':
						this.ptzDirection(0, 2);
						break;
					case 'left':
						this.ptzDirection(2, 0);
						break;
					case 'right':
						this.ptzDirection(1, 0);
						break;
					case 'stop':
						this.ptzDirection(0, 0);
						break;
				}
			},
			//方向发送
			ptzDirection(leftRight, upDown) {
				var data = {
					leftRight: leftRight,
					upDown: upDown,
					moveSpeed: 125,
				};
				if (this.serialNumber && this.channelSipId) {
					uni.$u.http.post(`/sip/ptz/direction/${this.serialNumber}/${this.channelSipId}`, data)
				}
			},
			//缩放发送
			async ptzScale(inOut){
				let data = {
					inOut:inOut,
					scaleSpeed:30
				}
				if (this.serialNumber && this.channelSipId) {
					await uni.$u.http.post(`/sip/ptz/scale/${this.serialNumber}/${this.channelSipId}`, data)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.controller{
		margin-top:150rpx;
	}
	.controller .rocker {
		margin: 60rpx auto;
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		position: relative;
		box-sizing: border-box;
		border: 16rpx solid #f1f7ed;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.controller .rocker>view {
		border-radius: 50%;
		overflow: hidden;
	}

	.controller .rocker .left {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
	}

	.controller .rocker .right {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
	}

	.controller .rocker .up {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.controller .rocker .down {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.controller .rocker .circle {
		position: relative;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		border: 1rpx solid #eee;
		background-color: #eee;
	}

	.controller .zoom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		width: 70%;
		margin: 0 auto;
		border-radius: 50rpx;
		box-shadow: 0px 1px 3px #eee;
		overflow: hidden;

	}

	.controller .zoom .text {
		width: 100%;
		margin: 0 10rpx;
		text-align: center;
		color: #2b7;
	}
</style>