rtdeviceApp/pages/device/tongue/testCameraAuto.nvue

<template>
	<div class="container">
		<view class="show-view">
		     <!-- Camera 组件 -->
		     <Ba-CameraView ref="cameraView" class="camera-view" :load="cameraOptions" @load="onCameraLoad"></Ba-CameraView>
		 </view>
		<!-- 控制按钮 -->
		<div class="controls">
			<button class="btn" @click="toggleAutoZoom">
				{{ autoZoomEnabled ? '关闭自动变焦' : '开启自动变焦' }}
			</button>
			<button class="btn" @click="switchZoomMode">
				切换模式: {{ currentMode }}
			</button>
			<button class="btn" @click="manualZoom">手动变焦</button>
			<button class="btn" @click="takePicture">拍照</button>
		</div>
		
		<!-- 状态显示 -->
		<div class="status">
			<text class="status-text">自动变焦: {{ autoZoomEnabled ? '开启' : '关闭' }}</text>
			<text class="status-text">变焦模式: {{ currentMode }}</text>
			<text class="status-text">{{ statusMessage }}</text>
		</div>
		
	</div>
</template>

<script>
export default {
	data() {
		return {
			autoZoomEnabled: true,
			currentMode: 'FACE',
			statusMessage: '相机初始化中...',
			cameraOptions: {
				isToast: true,
				isShowVibrate: true,
				isShowBeep: true,
				zoom: true,
				captureQuality: 'HIGH',
				autoZoomEnabled: true,
				autoZoomMode: 'FACE'
			}
		}
	},
	methods: {
		onReady() {
			
		    this.setListener(); //设置监听
			
			//this.$refs.cameraView.setCaptureQuality("MEDIUM"); 动态设置清晰度
			//this.$refs.cameraView.setAutoZoom(true, "TONGUE"); // 启用自动变焦
			//this.$refs.cameraView.performAutoZoom(); // 手动触发变焦
			//this.$refs.cameraView.setAutoZoom(false); // 禁用自动变焦
		},
		onCameraLoad() {
			this.statusMessage = '相机加载完成，自动变焦已启用';
			console.log('Camera loaded with auto zoom enabled');
		},
		toggleAutoZoom() {
			this.autoZoomEnabled = !this.autoZoomEnabled;
			this.$refs.cameraView.setAutoZoom((result) => {
				if (result.ok) {
					this.statusMessage = this.autoZoomEnabled ? '自动变焦已开启' : '自动变焦已关闭';
					console.log('Auto zoom toggled:', this.autoZoomEnabled);
				} else {
					this.statusMessage = '设置自动变焦失败: ' + result.msg;
					console.error('Failed to toggle auto zoom:', result.msg);
				}
			}, {
				enabled: this.autoZoomEnabled,
				mode: this.currentMode
			});
		},
		
		switchZoomMode() {
			// 在 FACE、TONGUE、DEFAULT 之间切换
			const modes = ['FACE', 'TONGUE', 'DEFAULT'];
			const currentIndex = modes.indexOf(this.currentMode);
			this.currentMode = modes[(currentIndex + 1) % modes.length];
			
			if (this.autoZoomEnabled) {
				this.$refs.cameraView.setAutoZoom((result) => {
					if (result.ok) {
						this.statusMessage = `变焦模式已切换到: ${this.currentMode}`;
						console.log('Zoom mode switched to:', this.currentMode);
					} else {
						this.statusMessage = '切换变焦模式失败: ' + result.msg;
						console.error('Failed to switch zoom mode:', result.msg);
					}
				}, {
					enabled: this.autoZoomEnabled,
					mode: this.currentMode
				});
			} else {
				this.statusMessage = `变焦模式已设置为: ${this.currentMode} (需开启自动变焦)`;
			}
		},
		
		manualZoom() {
			this.$refs.cameraView.performAutoZoom((result) => {
				if (result.ok) {
					this.statusMessage = '手动变焦执行成功';
					console.log('Manual zoom performed successfully');
				} else {
					this.statusMessage = '手动变焦失败: ' + result.msg;
					console.error('Manual zoom failed:', result.msg);
				}
			});
		},
		
		takePicture() {
			const timestamp = new Date().getTime();
			const fileName = `camera_test_${timestamp}.jpg`;
			
			this.$refs.cameraView.takePicture((result) => {
				if (result.ok) {
					this.statusMessage = `拍照成功: ${fileName}`;
					console.log('Picture taken successfully:', fileName);
				} else {
					this.statusMessage = '拍照失败: ' + result.msg;
					console.error('Failed to take picture:', result.msg);
				}
			}, {
				path: fileName,
				isFull: true
			});
		},
		setListener() {
			this.$refs.cameraView.setListener((res) => {
				if (res.action == "error") {
					this.showToast(res.msg)
				}
			});
		 },
	}
}
</script>

<style>
	
.container {
	flex: 1;
	background-color: #f5f5f5;
	padding: 20px;
}

.title {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

.show-view {
   flex-direction: row;
}

.camera-view {
     width: 750rpx;
     height: 800rpx;
     background-color: #333333;
 }

.controls {
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}

.btn {
	width: 200px;
	height: 50px;
	background-color: #007AFF;
	color: #fff;
	border-radius: 25px;
	margin-bottom: 10px;
	font-size: 16px;
	text-align: center;
	line-height: 50px;
}

.btn:active {
	background-color: #0056CC;
}

.status {
	flex-direction: column;
	align-items: center;
	padding: 15px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ddd;
}

.status-text {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
	text-align: center;
}
</style>