bigDataApp/components/monitor-native/monitor-native.vue

<template>
	<view class="mn-page">
		<view class="video-box">
			<video v-if="videoSrc" id="monitorVideo" class="video" :src="videoSrc" controls autoplay
				object-fit="contain" @error="onVideoError"></video>
			<view v-else class="video-mask" @click="startPlay">
				<image class="play-img" mode="widthFix"
					src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/wxplayer.png" />
			</view>
		</view>
		<view class="btn-box">
			<view class="side" @touchstart="ctrl(8)" @touchend="stopCtrl">
				<image class="side-img" mode="widthFix"
					src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/3.png" />
			</view>
			<view class="direc">
				<view class="pad top" @touchstart="ctrl(0)" @touchend="stopCtrl"></view>
				<view class="pad bottom" @touchstart="ctrl(1)" @touchend="stopCtrl"></view>
				<view class="pad left" @touchstart="ctrl(2)" @touchend="stopCtrl"></view>
				<view class="pad right" @touchstart="ctrl(3)" @touchend="stopCtrl"></view>
				<text class="photo yficonfont icon-paizhao-xianxing" @click="takePhoto"></text>
			</view>
			<view class="side" @touchstart="ctrl(9)" @touchend="stopCtrl">
				<image class="side-img" mode="widthFix"
					src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/2.png" />
			</view>
		</view>
		<view class="img-btn" @click="goImages">
			<image class="img-icon"
				src="https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/img_icon.png" />
			<text>{{ isDgp ? '查看光谱图片' : '查看图片' }}</text>
		</view>
	</view>
</template>

<script>
	const domin = 'https://wx.hnyfwlw.com'

	export default {
		name: 'monitor-native',
		props: {
			deviceId: {
				type: String,
				default: ''
			},
			isDgp: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				videoSrc: '',
				typeId: null,
				stopTimer: null
			}
		},
		computed: {
			token() {
				return uni.getStorageSync('session_key')
			}
		},
		methods: {
			request(method, data) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: domin + '/api/api_gateway?method=' + method,
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: data,
						success: (res) => resolve(res.data || {}),
						fail: (err) => reject(err)
					})
				})
			},
			toast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			startPlay() {
				if (this.videoSrc) return
				const method = this.isDgp ? 'camera.camera_manage.multi_addr_camera' : 'camera.camera_manage.addr_camera'
				const data = this.isDgp ? {
					device_id: this.deviceId,
					token: this.token
				} : {
					device_id: this.deviceId,
					is_dahua_app: '1',
					token: this.token
				}
				uni.showLoading({
					title: '获取播放地址...',
					mask: true
				})
				this.request(method, data).then((res) => {
					uni.hideLoading()
					if (res.message == '') {
						let d = res.data
						if (typeof d === 'string') {
							try {
								d = JSON.parse(d)
							} catch (e) {
								d = null
							}
						}
						if (!d) return this.toast('播放地址解析失败')
						this.typeId = d.type_id
						let src = ''
						if (this.isDgp) {
							src = d.rtmp || d.hls || ''
						} else if (d.type_id == 2) {
							// 大华云联
							src = d.hls || d.hlsHd || d.rtsp || ''
						} else {
							src = d.hls || d.hlsHd || ''
						}
						if (!src) return this.toast('未获取到可播放的流地址')
						this.videoSrc = src
					} else {
						this.toast('获取播放地址失败: ' + res.message)
					}
				}).catch(() => {
					uni.hideLoading()
					this.toast('获取播放地址接口异常')
				})
			},
			ctrl(num) {
				const method = this.isDgp ? 'camera.camera_manage.multi_ctrl_camera' : 'camera.camera_manage.ctrl_camera'
				const data = this.isDgp ? {
					device_id: this.deviceId,
					ctrl: num,
					token: this.token
				} : {
					device_id: this.deviceId,
					ctrl: 'move',
					movenum: num,
					token: this.token
				}
				this.request(method, data).then(() => {
					this.toast('指令下发成功,请等待...')
				})
			},
			stopCtrl() {
				if (this.isDgp) {
					if (this.stopTimer) clearTimeout(this.stopTimer)
					this.stopTimer = setTimeout(() => {
						this.request('camera.camera_manage.mulit_stop_move', {
							device_id: this.deviceId,
							token: this.token
						})
					}, 3000)
				} else {
					this.request('camera.camera_manage.ctrl_camera', {
						device_id: this.deviceId,
						ctrl: 'stop',
						token: this.token
					})
				}
			},
			takePhoto() {
				let method, data
				if (this.isDgp) {
					method = 'camera.camera_manage.multi_camera_takephoto'
					data = {
						device_id: this.deviceId,
						token: this.token
					}
				} else if (this.typeId == 2) {
					// 大华云联：截取当前视频帧上传
					const ctx = uni.createVideoContext('monitorVideo', this)
					ctx.snapshot({
						success: (res) => this.uploadPic(res.tempImagePath),
						fail: () => this.toast('截取画面失败')
					})
					return
				} else {
					method = 'camera.camera_manage.camera_takephoto'
					data = {
						device_id: this.deviceId,
						token: this.token
					}
				}
				uni.showLoading({
					title: '拍照指令下发中...',
					mask: false
				})
				this.request(method, data).then((res) => {
					uni.hideLoading()
					this.toast(res.message == '' ? '拍照成功' : res.message)
				}).catch(() => {
					uni.hideLoading()
					this.toast('拍照接口异常')
				})
			},
			uploadPic(filePath) {
				uni.showLoading({
					title: '上传中...',
					mask: false
				})
				uni.uploadFile({
					url: domin + '/api/api_gateway?method=camera.camera_manage.save_camera_photo',
					filePath: filePath,
					name: 'img_file',
					formData: {
						device_id: this.deviceId,
						token: this.token
					},
					success: (res) => {
						uni.hideLoading()
						let message = ''
						try {
							message = (JSON.parse(res.data) || {}).message || ''
						} catch (e) {}
						this.toast(message == '' ? '拍照成功' : message)
					},
					fail: () => {
						uni.hideLoading()
						this.toast('上传失败')
					}
				})
			},
			goImages() {
				uni.navigateTo({
					url: this.isDgp ? '/pages/monitor/dgpImagelist?id=' + this.deviceId : '/pages/monitor/imagelist?id=' + this.deviceId
				})
			},
			onVideoError(e) {
				const msg = (e && e.detail && e.detail.errMsg) ? e.detail.errMsg : ''
				this.toast('视频播放失败' + (msg ? ': ' + msg : ''))
			}
		},
		beforeDestroy() {
			if (this.stopTimer) clearTimeout(this.stopTimer)
		}
	}
</script>

<style>
	@import '@/static/font/iconfont.css';

	.mn-page {
		background-color: #f3f3f3;
		min-height: 100vh;
	}

	.video-box {
		height: 300px;
		width: 100%;
		background: #000;
		overflow: hidden;
		position: relative;
	}

	.video {
		width: 100%;
		height: 300px;
	}

	.video-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.play-img {
		width: 100px;
		height: 100px;
	}

	.btn-box {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.side {
		flex: 1;
	}

	.side-img {
		width: 100%;
	}

	.direc {
		width: 150px;
		height: 150px;
		background: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/monitor/1.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pad {
		width: 50px;
		height: 50px;
		position: absolute;
	}

	.top {
		top: 0;
		left: 50px;
	}

	.bottom {
		bottom: 0;
		left: 50px;
	}

	.left {
		left: 0;
		top: 50px;
	}

	.right {
		right: 0;
		top: 50px;
	}

	.photo {
		font-size: 30px;
		color: #4ec467;
		padding: 16px;
	}

	.img-btn {
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #338cd9;
		font-size: 16px;
	}

	.img-icon {
		width: 20px;
		height: 20px;
		margin-right: 4px;
	}
</style>