zhgdyunapp/pages/projectEnd/buildersDiary/components/watermarkCamera.nvue

<template>
	<view class="live-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 - 0 }"></live-pusher>
		<!--返回键-->
		<cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image>
		<!--快门键-->
		<cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image>
		<!--反转键-->
		<cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image>
		<!-- App 端的遮罩和辅助框 -->
		<!-- #ifdef APP-PLUS -->
		<cover-view class="app-mask">
			<cover-view v-for="(item, index) in resultList" :key="index" class="app-guide-box"
				:style="item.guideBoxStyle"></cover-view>
		</cover-view>
		<!-- #endif -->
	</view>
</template>

<script>
	let _this = null;
	export default {
		name: 'E-Run-water-camera',
		data() {
			return {
				poenCarmeInterval: null, //打开相机的轮询
				aspect: '2:3', //比例
				windowWidth: '', //屏幕可用宽度
				windowHeight: '', //屏幕可用高度
				camerastate: false, //相机准备好了
				livePusher: null, //流视频对象
				snapshotsrc: null, //快照
				guideBoxStyle: {},
				resultList: [],
				// 存储参考尺寸
				referenceWidth: 375,
				referenceHeight: 491
			};
		},
		onLoad(e) {
			_this = this;
			console.log(11223344, e)
			try {
				const resultList = JSON.parse(e.resultList);
				// 获取当前屏幕尺寸
				uni.getSystemInfo({
					success: (res) => {
						this.windowWidth = res.windowWidth;
						this.windowHeight = res.windowHeight;
						// 计算宽高缩放比例
						const widthRatio = this.windowWidth / this.referenceWidth;
						const heightRatio = this.windowHeight / this.referenceHeight;

						this.resultList = resultList.map(item => {
							const object = item;
							return {
								...item,
								guideBoxStyle: {
									// 对坐标和宽高进行缩放
									left: `${object.left * widthRatio}px`,
									top: `${object.top * heightRatio}px`,
									width: `${object.width * widthRatio}px`,
									height: `${object.height * heightRatio}px`,
									border: '2px solid red',
									position: 'absolute'
								}
							};
						});
					}
				});
			} catch (error) {
				console.error('解析配置失败:', error);
			}
			this.initCamera();
		},
		onReady() {
			this.livePusher = uni.createLivePusherContext('livePusher', this);
			this.startPreview(); //开启预览并设置摄像头
			// this.poenCarme();
		},
		methods: {

			//轮询打开
			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();
						uni.navigateBack();
					}
				});
			},

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

			//设置
			setImage() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 1]; //上一个页面
				console.log(1112233, JSON.stringify(_this.snapshotsrc))
				//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
				// prevPage.$vm.setImage({
				// 	path: _this.snapshotsrc
				// });
				// prevPage.$vm.photoUrl = _this.snapshotsrc;
				// 在下一个页面中触发事件并传递数据
				uni.$emit('updateData', _this.snapshotsrc);
				// uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.app-mask {
		position: fixed;
		top: 0;
		left: 0;
		// background-color: rgba(0, 0, 0, 0.5);
		z-index: 98;
	}

	.app-guide-box {
		position: absolute;
		border: 2px solid red;
		z-index: 99;
	}

	.app-menu {
		position: absolute;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

		.menu-flip {
			// background-image: url("@/static/live-camera/flip.png");
			// background-repeat: no-repeat;
			// background-size: 100% 100%;
			width: 80rpx;
			height: 80rpx;
		}
	}

	.menu-snapshot {
		width: 130rpx;
		height: 130rpx;
		z-index: 99;
		position: absolute;
		bottom: 50rpx;
	}

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

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

	.live-camera {
		position: relative;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>