iot-wap/src/components/QR/Index.vue

<template>
  <div id="reader"></div>
</template>

<script setup lang="ts">
  import { onMounted, ref, onUnmounted } from 'vue'
  import { Html5Qrcode } from 'html5-qrcode'
  // import { useRouter } from 'vue-router'
  import { Html5QrcodeResult, CameraDevice } from './interface'

  // 事件
  const emit = defineEmits(['success', 'failure']);

  const cameraId = ref('')
  const devicesInfo = ref<any>('')
  const html5QrCode = ref<any>(null)
  // const router = useRouter()

  onMounted(() => {
    // open()
  })

  onUnmounted(() => {
    console.log('qr-onUnmounted')
    stop()
  })

  const open = () => {
    Html5Qrcode.getCameras()
      .then((devices: CameraDevice[]) => {
        console.log('摄像头信息', devices)
        if (devices && devices.length) {
          // 如果有2个摄像头，1为前置的
          if (devices.length > 1) {
            cameraId.value = devices[1].id
          } else {
            cameraId.value = devices[0].id
          }
          devicesInfo.value = devices
          // start开始扫描
          start()
        }
      })
      .catch((err) => {
        alert(err);
        // handle err
        console.log('获取设备信息失败', err) // 获取设备信息失败
      })
  }
  const start = () => {
    html5QrCode.value = new Html5Qrcode('reader')
    console.log('html5QrCode', html5QrCode)

    html5QrCode.value.start(
      cameraId.value, // retreived in the previous step.
      {
        fps: 10, // 设置每秒多少帧
        qrbox: { width: 250, height: 250 }, // 设置取景范围
        // focusMode: 'continuous',
        // aspectRatio: true,
        // disableFlip: true,
        // scannable, rest shaded.
      },
      (decodedText: string, decodedResult: Html5QrcodeResult) => {
        // do something when code is read. For example:
        // if (qrCodeMessage) {
        //   getCode(qrCodeMessage);
        //   stop();
        // }
        console.log('扫描的结果', decodedText, decodedResult)
        emit('success', decodedResult);
        stop();
        // if (decodedText) {
        //   router.push('order');
        // }
      },
      (errorMessage: any) => {
        // parse error, ideally ignore it. For example:
        // console.log(`QR Code no longer in front of camera.`);
        emit('failure', errorMessage);
        stop();
        console.log('暂无额扫描结果', errorMessage)
      }
    )
      .catch((err: any) => {
        // Start failed, handle it. For example,
        emit('failure', err);
        console.log(`Unable to start scanning, error: ${err}`)
      })
  }
  const stop = () => {
    html5QrCode.value
      .stop()
      .then((ignore: any) => {
        // QR Code scanning is stopped.
        console.log('QR Code scanning stopped.', ignore)
      })
      .catch((err: any) => {
        // Stop failed, handle it.
        console.log('Unable to stop scanning.', err)
      })
  }
  // 暴露方法
  defineExpose({
    open,
    stop
  })
</script>

<style scoped>
#reader {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  
  /* background-color: red; */
  /* border: 2px solid red; */
  /* box-sizing: border-box; */
}
</style>