This commit is contained in:
@jyuhsin
2026-01-05 16:47:45 +08:00
parent 7d8b34065f
commit 41d697b6a8
@@ -115,6 +115,7 @@ layout("/layouts/platform_h5.html"){
<div class="footer-container">
<van-button v-if="scanStatus" @click="closeScan" block color="#006DB9">关闭扫描</van-button>
<van-button v-if="scanStatus" @click="cameraVisible = true" plain type="primary">切换摄像头</van-button>
<van-button v-else @click="initCamera" block color="#006DB9">点击扫描</van-button>
</div>
@@ -196,12 +197,20 @@ layout("/layouts/platform_h5.html"){
this.scanStatus = true;
try {
const container = document.getElementById('reader');
const size = Math.min(container.clientWidth * 0.8, 300); // 最大 300px
await this.html5QrCode.start(
cameraId,
{
fps: 300,
qrbox: { width: 300, height: 300 },
aspectRatio: 1.0
fps: 10,
qrbox: size,
videoConstraints: {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: "environment" // 强制后置(部分浏览器支持)
},
disableFlip: true, // 防止镜像
formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE] // 只扫 QR,提升速度
},
(decodedText) => {
this.decodedText = decodedText
@@ -221,11 +230,18 @@ layout("/layouts/platform_h5.html"){
async closeScan() {
if (!this.html5QrCode || !this.scanStatus) return;
try {
const videoEl = this.html5QrCode?.getState()?.camera?.stream?.getVideoTracks();
if (videoEl && videoEl.length) {
videoEl.forEach(track => track.stop());
}
await this.html5QrCode.stop();
this.scanStatus = false;
this.html5QrCode = null;
} catch (err) {
console.error('关闭失败:', err);
}finally {
this.scanStatus = false;
this.html5QrCode = null;
const reader = document.getElementById('reader');
if (reader) reader.innerHTML = '';
}
},