撰于 阅读 61

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>

<script setup>
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) => {
      qrCodeContent.value = decodedText;
      stopScan();
    },
    (errorMessage) => {
      // optionally log any errors or handle them
      console.log("QR decoding error:", errorMessage);
    }
  ).catch(err => {
    console.error("Unable to start scanning, error:", err);
  });
}

function stopScan() {
  if (html5QrcodeScanner) {
    html5QrcodeScanner.stop().then(() => {
      console.log("QR Code scanning stopped.");
    }).catch(err => {
      console.error("Error stopping QR scanner.", err);
    });
  }
}

onBeforeUnmount(() => {
  stopScan();
});
</script>

<style scoped>
#reader {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: auto; /* Ensure it adjusts to the content */
}
</style>

实际效果

会自动识别并获取识别的码的内容，注意由于浏览器的安全限制，需要开启网站的https访问才可以唤起摄像头

#vue