xyy-m/src/pages/chat/sweep3.vue

<template>
  <div>
    <van-button @click="handleQrcode">扫一扫</van-button>
    <div id="qr-reader" style="width:500px"></div>
    <div id="qr-reader-results">
      {{ results }}
    </div>
  </div>
</template>
<script setup>
import {Html5QrcodeScanner, Html5Qrcode, Html5QrcodeScanType} from "html5-qrcode";

let results = ref(null)
const state = reactive({
  html5QrCode: null,
  fileList: []
})

const handleQrcode = () => {
  Html5Qrcode.getCameras()
      .then(devices => {
        if (devices && devices.length) {
          // 当前环境下能识别出摄像头，并且摄像头的数据可能不止一个
          state.html5QrCode = new Html5Qrcode('qr-reader')//  reader  放置扫码功能的元素ID
          alert('摄像头识别成功')
          state.html5QrCode.start(
              //  environment后置摄像头 user前置摄像头
              {facingMode: 'environment'},
              {
                fps: 1, // 可选，每n秒帧扫描一次
                qrbox: {
                  width: 250,
                  height: 250
                } // 扫描的UI框
              },
              (decodedText, decodedResult) => {
                // 扫描结果
                results.value = {
                  decodedText,
                  decodedResult
                }
              }
          )
        }
      })
      .catch((e) => {
        // 摄像头无访问权限
        alert(e)
      })
}
</script>
<style scoped lang="scss">

</style>