feat:集成lime-camera插件实现内联相机预览+连拍

pages/upload/camera_capture.vue

@@ -2,19 +2,43 @@
 	<view class="cc-page">
 		<!-- 摄像头预览区 -->
 		<view class="cc-camera-wrap">
-			<video id="ccVideo" ref="ccVideo" class="cc-video" autoplay playsinline muted v-if="useWebRTC"></video>
+			<!-- lime-camera 预览（Android nvue / uni-app x） -->
-			<view class="cc-camera-hint" v-if="!useWebRTC">
+			<l-camera
-				<text class="cc-hint-text">{{ isBurstMode ? '连拍模式中...' : '点击下方拍照按钮' }}</text>
+				v-if="useLimeCamera"
+				ref="lCamera"
+				class="cc-lcamera"
+				mode="normal"
+				:device-position="cameraPosition"
+				flash="off"
+				:focus="true"
+				@initdone="onCameraInitDone"
+				@error="onCameraError"
+				style="width:100%;height:100%;"
+			></l-camera>
+			<!-- WebRTC 预览（H5） -->
+			<video
+				v-else-if="useWebRTC"
+				id="ccVideo"
+				ref="ccVideo"
+				class="cc-video"
+				autoplay
+				playsinline
+				muted
+			></video>
+			<!-- 无预览时占位 -->
+			<view v-else class="cc-camera-hint">
+				<text class="cc-hint-text">相机加载中...</text>
 			</view>
 			<canvas id="ccCanvas" ref="ccCanvas" class="cc-canvas" style="display:none;"></canvas>
-			
+
-			<!-- 连拍模式：相机遮罩提示 -->
+			<!-- 连拍模式提示遮罩 -->
 			<view class="cc-burst-overlay" v-if="isBurstMode">
 				<text class="cc-burst-tip">连拍中⋯</text>
 				<text class="cc-burst-count">{{ capturedList.length }} 张</text>
 				<text class="cc-burst-dots">
 					<text class="cc-dot" v-for="n in 3" :key="n">.</text>
 				</text>
+				<text class="cc-burst-hint">点击红色按钮停止</text>
 			</view>
 		</view>
 
@@ -28,8 +52,7 @@
 						<text class="cc-del-icon">✕</text>
 					</view>
 				</view>
-				<view class="cc-thumb-item cc-thumb-placeholder" v-for="n in (9 - capturedList.length)" :key="'p'+n">
+				<view class="cc-thumb-item cc-thumb-placeholder" v-for="n in (9 - capturedList.length)" :key="'p'+n"></view>
-				</view>
 			</view>
 		</view>
 
@@ -43,13 +66,11 @@
 			<view class="cc-capture-btn" @click="capturePhoto" v-else :class="{ disabled: capturedList.length >= 9 }">
 				<view class="cc-capture-inner"></view>
 			</view>
-			
+
 			<view class="cc-right-actions">
-				<!-- 连拍模式切换 -->
 				<view class="cc-burst-toggle" @click="toggleBurstMode" v-if="!isBurstMode && capturedList.length < 9">
-					<text class="cc-burst-toggle-text">{{ isBurstEnabled ? '⚡连拍' : '拍摄' }}</text>
+					<text class="cc-burst-toggle-text">⚡连拍</text>
 				</view>
-				<!-- 确认按钮 -->
 				<view class="cc-confirm-btn" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
 					<text class="cc-confirm-text">确认 ({{ capturedList.length }})</text>
 				</view>
@@ -59,6 +80,18 @@
 </template>
 
 <script>
+	// 尝试导入 lime-camera（Android nvue 环境使用）
+	var limeCameraReady = false
+	var createCameraContext = null
+	try {
+		var limeModule = require('@/uni_modules/lime-camera')
+		createCameraContext = limeModule.createCameraContext
+		limeCameraReady = true
+	} catch (e) {
+		console.log('lime-camera 插件未安装,使用备用方案')
+		limeCameraReady = false
+	}
+
 	export default {
 		data() {
 			return {
@@ -66,8 +99,10 @@
 				mediaStream: null,
 				ctxReady: false,
 				useWebRTC: false,
+				useLimeCamera: false,
+				cameraContext: null,
+				cameraPosition: 'back',
 				isBurstMode: false,
-				isBurstEnabled: false,
 				burstTimer: null
 			}
 		},
@@ -81,19 +116,46 @@
 		methods: {
 			// 检测运行环境
 			checkEnvironment() {
+				// 1. 优先尝试 lime-camera（Android nvue）
+				if (limeCameraReady) {
+					this.useLimeCamera = true
+					this.ctxReady = true
+					console.log('使用 lime-camera 相机')
+					return
+				}
+
+				// 2. WebRTC（H5）
 				try {
 					if (typeof document !== 'undefined' && typeof navigator !== 'undefined' && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
 						this.useWebRTC = true
 						this.startWebRTC()
-					} else {
+						return
-						this.useWebRTC = false
-						this.ctxReady = true
 					}
 				} catch (e) {
-					this.useWebRTC = false
+					// fall through
-					this.ctxReady = true
 				}
+
+				// 3. 无可用环境
+				this.useWebRTC = false
+				this.ctxReady = false
+				uni.showToast({ title: '当前环境不支持相机预览', icon: 'none' })
 			},
+
+			// lime-camera 初始化完成
+			onCameraInitDone(e) {
+				console.log('lime-camera 初始化完成,最大缩放:', e.detail.maxZoom)
+				this.cameraContext = createCameraContext()
+				this.ctxReady = true
+			},
+
+			// lime-camera 错误
+			onCameraError(err) {
+				console.error('lime-camera 错误:', err)
+				uni.showToast({ title: '相机启动失败: ' + (err.detail ? JSON.stringify(err.detail) : '未知错误'), icon: 'none' })
+				this.useLimeCamera = false
+				this.checkEnvironment()
+			},
+
 			// WebRTC 启动摄像头（H5 环境）
 			startWebRTC() {
 				var that = this
@@ -124,6 +186,7 @@
 					this.ctxReady = true
 				}
 			},
+
 			stopCamera() {
 				this.clearBurstTimer()
 				if (this.mediaStream) {
@@ -134,47 +197,46 @@
 					this.mediaStream = null
 				}
 			},
+
 			toggleBurstMode() {
-				this.isBurstEnabled = !this.isBurstEnabled
-				if (this.isBurstEnabled) {
-					this.startBurst()
-				}
-			},
-			startBurst() {
 				if (this.capturedList.length >= 9) {
 					uni.showToast({ title: '最多拍9张', icon: 'none' })
-					this.isBurstEnabled = false
 					return
 				}
+				this.startBurst()
+			},
+
+			startBurst() {
 				this.isBurstMode = true
-				// 立即拍第一张
 				this.doBurstCapture()
 			},
+
 			doBurstCapture() {
 				if (!this.isBurstMode || this.capturedList.length >= 9) {
 					this.isBurstMode = false
-					this.isBurstEnabled = false
 					return
 				}
 				var that = this
 				this.captureSinglePhoto(function() {
-					// 间隔1.5秒后继续连拍
+					// 间隔 1.5 秒继续
 					that.burstTimer = setTimeout(function() {
 						that.doBurstCapture()
 					}, 1500)
 				})
 			},
+
 			stopBurst() {
 				this.isBurstMode = false
-				this.isBurstEnabled = false
 				this.clearBurstTimer()
 			},
+
 			clearBurstTimer() {
 				if (this.burstTimer) {
 					clearTimeout(this.burstTimer)
 					this.burstTimer = null
 				}
 			},
+
 			// 拍摄单张照片
 			capturePhoto() {
 				if (this.capturedList.length >= 9) {
@@ -183,14 +245,48 @@
 				}
 				this.captureSinglePhoto()
 			},
+
 			// 底层拍照逻辑（带可选回调）
 			captureSinglePhoto(callback) {
+				// 1. lime-camera 拍照（Android 内联相机，带预览）
+				if (this.useLimeCamera && this.cameraContext) {
+					this.limeCapture(callback)
+					return
+				}
+				// 2. WebRTC 截图（H5）
 				if (this.useWebRTC && this.mediaStream && this.ctxReady) {
 					this.webRTCCapture(callback)
-				} else {
+					return
-					this.systemCapture(callback)
+				}
+				// 3. 系统相机（无预览，备用）
+				this.systemCapture(callback)
+			},
+
+			// lime-camera 拍照
+			limeCapture(callback) {
+				var that = this
+				try {
+					this.cameraContext.takePhoto({
+						quality: 'high',
+						success: function(res) {
+							that.capturedList.push(res.tempImagePath)
+							if (callback) { callback() }
+						},
+						fail: function(err) {
+							console.error('lime拍照失败:', err)
+							if (that.isBurstMode) {
+								that.isBurstMode = false
+							}
+							uni.showToast({ title: '拍照失败', icon: 'none' })
+							if (callback) { callback() }
+						}
+					})
+				} catch (e) {
+					console.error('lime拍照异常:', e)
+					if (callback) { callback() }
 				}
 			},
+
 			// WebRTC 截图
 			webRTCCapture(callback) {
 				if (typeof document === 'undefined') {
@@ -211,7 +307,8 @@
 				this.capturedList.push(dataUrl)
 				if (callback) { callback() }
 			},
-			// 系统相机拍照
+
+			// 系统相机拍照（无预览，备用）
 			systemCapture(callback) {
 				var that = this
 				uni.chooseImage({
@@ -225,18 +322,18 @@
 						if (callback) { callback() }
 					},
 					fail: function() {
-						// 用户取消或失败，连拍模式下暂停
 						if (that.isBurstMode) {
 							that.isBurstMode = false
-							that.isBurstEnabled = false
 						}
 						if (callback) { callback() }
 					}
 				})
 			},
+
 			deletePhoto(idx) {
 				this.capturedList.splice(idx, 1)
 			},
+
 			confirmCapture() {
 				if (this.capturedList.length === 0) {
 					uni.showToast({ title: '请先拍照', icon: 'none' })
@@ -271,6 +368,10 @@
 		align-items: center;
 		justify-content: center;
 	}
+	.cc-lcamera {
+		width: 100%;
+		height: 100%;
+	}
 	.cc-video {
 		width: 100%;
 		height: 100%;
@@ -291,22 +392,25 @@
 	.cc-burst-overlay {
 		position: absolute;
 		top: 0; left: 0; right: 0; bottom: 0;
-		background: rgba(0,0,0,0.3);
+		background: rgba(0,0,0,0.25);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		z-index: 5;
+		pointer-events: none;
 	}
 	.cc-burst-tip {
 		color: #fff;
 		font-size: 40rpx;
 		font-weight: bold;
+		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
 	}
 	.cc-burst-count {
-		color: rgba(255,255,255,0.8);
+		color: rgba(255,255,255,0.9);
 		font-size: 32rpx;
 		margin-top: 16rpx;
+		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
 	}
 	.cc-burst-dots {
 		color: #409eff;
@@ -318,6 +422,12 @@
 		0%, 100% { opacity: 0.3; }
 		50% { opacity: 1; }
 	}
+	.cc-burst-hint {
+		color: rgba(255,255,255,0.6);
+		font-size: 24rpx;
+		margin-top: 20rpx;
+		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
+	}
 	.cc-dot {
 		margin: 0 4rpx;
 	}