hlt_app/pages/waterMarkCamera/WaterMarkCamera.nvue

<template>
	<view class="custom-watermark-camera" :style="{ width: windowWidth, height: windowHeight }">
		<live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
			:aspect="aspect" min-bitrate="1000" audio-quality="16KHz" device-position="back" :auto-focus="true"
			:muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange"
			:style="{ width: windowWidth, height: windowHeight }"></live-pusher>

		<cover-view class="remark">
			<cover-view class="mark-text name">{{ username }}</cover-view>
			<cover-view class="mark-text time">{{ time }}</cover-view>
			<cover-view class="mark-text address">{{ address }}</cover-view>
			<cover-view class="mark-text lnglat">{{ lnglat }}</cover-view>
		</cover-view>

		<view class="menu">
			<!--底部菜单区域背景-->
			<cover-image class="menu-mask" src="/static/images/components/camera/bg.png"></cover-image>

			<!--返回键-->
			<cover-image class="menu-back" @tap="back" src="/static/images/components/camera/back.png"></cover-image>

			<!--快门键-->
			<cover-image class="menu-snapshot" @tap="snapshot"
				src="/static/images/components/camera/circle.png"></cover-image>

			<!--反转键-->
			<cover-image class="menu-flip" @tap="flip" src="/static/images/components/camera/reverse.png"></cover-image>
		</view>
	</view>
</template>

<script>
	let _this = null;
	import moment from 'moment';

	export default {
		data() {
			return {
				poenCarmeInterval: null, //打开相机的轮询
				aspect: '2:3', //比例
				windowWidth: '', //屏幕可用宽度
				windowHeight: '', //屏幕可用高度
				camerastate: false, //相机准备好了
				livePusher: null, //流视频对象
				snapshotsrc: null, //快照
				eventChannel: null, //通信
				timer: null,
				username: "用户名",
				time: "",
				address: "",
				lnglat: ""
			};
		},
		onLoad(e) {
			_this = this;
			this.initCamera();
			this.eventChannel = this.getOpenerEventChannel();
		},
		onReady() {
			this.livePusher = uni.createLivePusherContext('livePusher', this);
			this.startPreview(); //开启预览并设置摄像头
			this.poenCarme();
		},
		onShow() {
			this.getAddress()
			this.time = moment().format('YYYY-MM-DD HH:mm:ss')
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.getAddress()
				this.time = moment().format('YYYY-MM-DD HH:mm:ss')
			}, 5000)
		},
		methods: {
			getAddress() {
				console.log('获取位置')
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						console.log(res)
						this.address = res.address.province + res.address.city + res.address.district + res
							.address.street + res.address.streetNum + res.address.poiName
						this.lnglat = res.longitude + '， ' + res.latitude
					}
				})
			},
			//轮询打开
			poenCarme() {
				//#ifdef APP-PLUS
				if (plus.os.name == 'Android') {
					this.poenCarmeInterval = setInterval(function() {
						console.log(_this.camerastate);
						if (!_this.camerastate) _this.startPreview();
					}, 2500);
				}
				//#endif
			},
			//初始化相机
			initCamera() {
				uni.getSystemInfo({
					success: function(res) {
						_this.windowWidth = res.windowWidth;
						_this.windowHeight = res.windowHeight;
						let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);
						_this.aspect = (_this.windowWidth / zcs) + ':' + (_this.windowHeight / zcs);
						// console.log('画面比例：'+_this.aspect);
					}
				});
			},

			//整除数计算
			aliquot(x, y) {
				if (x % y == 0) return y;
				return this.aliquot(y, x % y);
			},

			//开始预览
			startPreview() {
				this.livePusher.startPreview({
					success: a => {
						console.log(a)
					}
				});
			},

			//停止预览
			stopPreview() {
				this.livePusher.stopPreview({
					success: a => {
						_this.camerastate = false;
					}
				});
			},

			//状态
			statechange(e) {
				//状态改变
				console.log(e);
				if (e.detail.code == 1007) {
					_this.camerastate = true;
				} else if (e.detail.code == -1301) {
					_this.camerastate = false;
				}
			},


			//返回
			back() {
				uni.navigateBack();
			},

			//抓拍
			snapshot() {
				//震动
				uni.vibrateShort({
					success: function() {
						console.log('success');
					}
				});
				//拍照
				this.livePusher.snapshot({
					success: e => {
						_this.snapshotsrc = e.message.tempImagePath;
						_this.stopPreview();
						// _this.setImage();
						this.eventChannel.emit('setImage', {
							path: e.message.tempImagePath,
							text: {
								username: this.username,
								time: this.time,
								address: this.address,
								lnglat: this.lnglat
							}
						})
						uni.navigateBack();
					}
				});
			},

			//反转
			flip() {
				this.livePusher.switchCamera();
			},

			//设置
			setImage() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				console.log(prevPage.$vm)
				prevPage.$vm.setImage({
					path: _this.snapshotsrc
				});
			}
		}
	};
</script>

<style lang="scss">
	.custom-watermark-camera {
		justify-content: center;
		align-items: center;

		.remark {
			position: absolute;
			left: 0;
			top: 100rpx;
			padding: 100rpx;
			color: #fff;
			width: 750rpx;

			.mark-text {
				font-size: 40rpx;
				color: #fff;
			}

			.address {
				font-size: 28rpx;
			}
		}

		.menu {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 180rpx;
			z-index: 98;
			align-items: center;
			justify-content: center;

			.menu-mask {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 750rpx;
				height: 180rpx;
				z-index: 98;
			}

			.menu-back {
				position: absolute;
				left: 30rpx;
				bottom: 50rpx;
				width: 80rpx;
				height: 80rpx;
				z-index: 99;
				align-items: center;
				justify-content: center;
			}

			.menu-snapshot {
				width: 130rpx;
				height: 130rpx;
				z-index: 99;
			}

			.menu-flip {
				position: absolute;
				right: 30rpx;
				bottom: 50rpx;
				width: 80rpx;
				height: 80rpx;
				z-index: 99;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>