feat:集成lime-camera插件实现内联相机预览+连拍
This commit is contained in:
parent
bdfbf63380
commit
312b91bd48
@ -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>
|
||||
<view class="cc-camera-hint" v-if="!useWebRTC">
|
||||
<text class="cc-hint-text">{{ isBurstMode ? '连拍模式中...' : '点击下方拍照按钮' }}</text>
|
||||
<!-- lime-camera 预览（Android nvue / uni-app x） -->
|
||||
<l-camera
|
||||
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>
|
||||
<view class="cc-thumb-item cc-thumb-placeholder" v-for="n in (9 - capturedList.length)" :key="'p'+n"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -45,11 +68,9 @@
|
||||
</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 {
|
||||
this.useWebRTC = false
|
||||
this.ctxReady = true
|
||||
return
|
||||
}
|
||||
} catch (e) {
|
||||
this.useWebRTC = false
|
||||
this.ctxReady = true
|
||||
// fall through
|
||||
}
|
||||
|
||||
// 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 {
|
||||
this.systemCapture(callback)
|
||||
return
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user