vue3开发h5页面实现扫描二维码功能-工具盒子

安装依赖

html5-qrcode 是一个用于在现代浏览器中进行二维码扫描的 JavaScript 库。它利用 HTML5 的 getUserMedia API 来访问设备的摄像头，并使用 QRCode 库来解码二维码。这个库非常适合在 Web 应用中实现二维码扫描功能，尤其是在移动设备上。

npm install html5-qrcode

实例组件

<template>
  <div>
    <button @click="startScan">扫码</button>
    <p v-if="qrCodeContent" style="display: inline-block; margin-left: 10px;">{{ qrCodeContent }}</p>
    <div id="reader" style="width: 100%;"></div>
  </div>
</template>
&lt;script setup&gt;
import { ref, onBeforeUnmount } from 'vue';
import { Html5Qrcode } from 'html5-qrcode';
const qrCodeContent = ref('');
let html5QrcodeScanner = null;
function startScan() {
if (!html5QrcodeScanner) {
html5QrcodeScanner = new Html5Qrcode("reader");
}
html5QrcodeScanner.start(
{ facingMode: "environment" },
{ fps: 10, qrbox: 250 },
(decodedText) =&gt; {
qrCodeContent.value = decodedText;
stopScan();
},
(errorMessage) =&gt; {
// optionally log any errors or handle them
console.log("QR decoding error:", errorMessage);
}
).catch(err =&gt; {
console.error("Unable to start scanning, error:", err);
});
}
function stopScan() {
if (html5QrcodeScanner) {
html5QrcodeScanner.stop().then(() =&gt; {
console.log("QR Code scanning stopped.");
}).catch(err =&gt; {
console.error("Error stopping QR scanner.", err);
});
}
}
onBeforeUnmount(() =&gt; {
stopScan();
});
&lt;/script&gt;
&lt;style scoped&gt; #reader { position: relative; width: 100%; max-width: 600px; margin: 0 auto; height: auto; /* Ensure it adjusts to the content */ } &lt;/style&gt;