uniapp在h5页面实现扫码功能(html5-qrcode)

npm install html5-qrcode

<template>
 <view class="container">
  <button class="scan" @click="scanCode">打开相机扫码</button>
  <view class="reader-box" v-if="isScaning">
   <view class="reader" id="reader"></view>
  </view>
 </view>
</template>
<script>
 import {
  Html5Qrcode
 } from 'html5-qrcode';
 export default {
  data() {
   return {
    html5Qrcode: null,
    isScaning: false,
   }
  },
  methods: {
   startScan() {
    this.isScaning = true;
    Html5Qrcode.getCameras().then(devices => {
     if (devices && devices.length) {
      this.html5Qrcode = new Html5Qrcode('reader');
      this.html5Qrcode.start({
       facingMode: 'environment',
      }, {
       fps: 24,
       qrbox: 280
      }, (decodeText, decodeResult) => {
       console.log(decodeText)
       if (decodeText) {
        this.stopScan();
        this.isScaning = false;
       }
      }, (err) => {
       console.log(err)
      });
     }
    });
   },
   stopScan() {
    this.html5Qrcode.stop();
   },
   scanCode() {
    console.log('helo')
    this.startScan();
   }
  }
 }
</script>
<style scoped>
 .container{
  height:100%;
 }
 .reader-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
 }
 .reader {
  width: 540rpx;
  height: 540rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
</style>