fix:摄像头增加initdone事件监听+重试机制+id属性

This commit is contained in:
97694732@qq.com 2026-06-06 17:10:10 +08:00
parent 6dd9d17633
commit 56c79aaf3a

View File

@ -2,7 +2,10 @@
<view class="cc-page"> <view class="cc-page">
<!-- 摄像头预览区 --> <!-- 摄像头预览区 -->
<view class="cc-camera-wrap"> <view class="cc-camera-wrap">
<camera class="cc-camera" device-position="back" flash="off" @error="onCameraError"></camera> <camera id="ccCamera" class="cc-camera" device-position="back" flash="off" @error="onCameraError" @initdone="onCameraInit"></camera>
<view class="cc-camera-hint" v-if="!ctxReady">
<text class="cc-hint-text">摄像头初始化中...</text>
</view>
</view> </view>
<!-- 已拍照九宫格 --> <!-- 已拍照九宫格 -->
@ -21,7 +24,7 @@
<!-- 底部操作区 --> <!-- 底部操作区 -->
<view class="cc-footer"> <view class="cc-footer">
<view class="cc-capture-btn" @click="capturePhoto"> <view class="cc-capture-btn" @click="capturePhoto" :class="{ disabled: !ctxReady }">
<view class="cc-capture-inner"></view> <view class="cc-capture-inner"></view>
</view> </view>
<view class="cc-confirm-btn" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }"> <view class="cc-confirm-btn" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
@ -36,13 +39,34 @@
data() { data() {
return { return {
capturedList: [], capturedList: [],
ctx: null ctx: null,
ctxReady: false
} }
}, },
onReady() { onReady() {
this.ctx = uni.createCameraContext() this.initCamera()
}, },
methods: { methods: {
initCamera() {
try {
this.ctx = uni.createCameraContext()
if (this.ctx) {
this.ctxReady = true
console.log('摄像头已就绪')
} else {
//
setTimeout(() => this.initCamera(), 500)
}
} catch (e) {
console.error('摄像头初始化失败:', e)
//
setTimeout(() => this.initCamera(), 500)
}
},
onCameraInit() {
console.log('摄像头initdone')
this.initCamera()
},
onCameraError(e) { onCameraError(e) {
console.error('摄像头错误:', e) console.error('摄像头错误:', e)
uni.showToast({ title: '摄像头启动失败', icon: 'none', duration: 3000 }) uni.showToast({ title: '摄像头启动失败', icon: 'none', duration: 3000 })
@ -52,7 +76,7 @@
uni.showToast({ title: '最多拍9张', icon: 'none' }) uni.showToast({ title: '最多拍9张', icon: 'none' })
return return
} }
if (!this.ctx) { if (!this.ctx || !this.ctxReady) {
uni.showToast({ title: '摄像头未就绪', icon: 'none' }) uni.showToast({ title: '摄像头未就绪', icon: 'none' })
return return
} }
@ -78,7 +102,6 @@
uni.showToast({ title: '请先拍照', icon: 'none' }) uni.showToast({ title: '请先拍照', icon: 'none' })
return return
} }
//
var pages = getCurrentPages() var pages = getCurrentPages()
var prevPage = pages[pages.length - 2] var prevPage = pages[pages.length - 2]
if (prevPage) { if (prevPage) {
@ -96,16 +119,33 @@
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: #000; background: #000;
overflow: hidden;
} }
.cc-camera-wrap { .cc-camera-wrap {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #111;
} }
.cc-camera { .cc-camera {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.cc-camera-hint {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
.cc-hint-text {
color: #999;
font-size: 28rpx;
}
.cc-thumb-bar { .cc-thumb-bar {
background: #1a1a1a; background: #1a1a1a;
padding: 16rpx 20rpx; padding: 16rpx 20rpx;
@ -165,6 +205,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: opacity 0.3s;
}
.cc-capture-btn.disabled {
opacity: 0.4;
} }
.cc-capture-inner { .cc-capture-inner {
width: 64rpx; width: 64rpx;