Vue项目网页版在浏览器中实现扫码识别功能

第一种方式：

<template>
 <div class="scan">
     <div class="sectionview">
         <div id="qr-reader" style="100%;height: 100%;"></div>
     </div>
    <div class="footer">
    <button @click="getCameras" color="rgba(249, 185, 73, 1)">Obtain Access</button>
    </div>
 </div>
</template>
<script >
import util from '../../assets/common/util.js'
 export default {
 data() {
  return {
  codeUrl: '',
  cameraId:''
  }
 },
 beforeDestroy(){
     this.stop()
 },
 methods: {
   getCode(id){
      //跳转页面
	  alert('成功'+id)
   },
   init(){
        this.loadJs('https://unpkg.com/html5-qrcode')
        // this.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')
        //需要加载时间建议延时一点再获取设备列表
        setTimeout(()=>{
            this.getCameras()
        },1000)
        
        
    },
    stop(){
        this.html5QrCode.stop().then(ignore => {
          // QR Code scanning is stopped.
          console.log("QR Code scanning stopped.");
        }).catch(err => {
          // Stop failed, handle it.
          console.log("Unable to stop scanning.");
        });
    },
    start(){
        this.html5QrCode = new Html5Qrcode('qr-reader')
        this.html5QrCode.start(
          this.cameraId,     // retreived in the previous step.
          {
            fps: 10,    // sets the framerate to 10 frame per second
            qrbox: 250  // sets only 250 X 250 region of viewfinder to
                        // scannable, rest shaded.
          },
          qrCodeMessage => {
            // do something when code is read. For example:
            if(qrCodeMessage){
				alert(qrCodeMessage)
                 this.getCode(qrCodeMessage)
                 // this.stop()
            }
           
          },
          errorMessage => {
            // parse error, ideally ignore it. For example:
            // console.log(`QR Code no longer in front of camera.`);
          })
        .catch(err => {
          // Start failed, handle it. For example,
          console.log(`Unable to start scanning, error: ${err}`);
        });
    },
    getCameras(){
        Html5Qrcode.getCameras().then(devices => {
          /**
           * devices would be an array of objects of type:
           * { id: "id", label: "label" }
           */
          if (devices && devices.length) {
              if(devices.length>1){
                this.cameraId = devices[1].id;
              }else{
                this.cameraId = devices[0].id;
              }
          
            
            console.log(this.cameraId,'cameraId')
            this.start()
            // .. use this to start scanning.
          }
        }).catch(err => {
          // handle err
        });
    }
    
    
  },
  mounted(){
    this.init()
  }

 }
</script>
<style >
 .scan {
     100%;
    display: flex;
    flex-direction: column;
    height:100vh;
    overflow: hidden;
 }
 .footer{
      100%;
     display: flex;
     justify-content: center;
 }
</style>
util.js文件：
import Vue from 'vue'
Vue.prototype.loadJs = function (url) {
	console.log(url,'url')
	return new Promise((resolve, reject) => {
	  const script = document.createElement('script')
	  script.src = url
	  script.type = 'text/javascript'
	  document.body.appendChild(script)
	  script.onload = () => {
	    resolve()
	  }
	})
}

第二种方式：

<template>
    <div>
        <p class="error">{{ error }}</p><!--错误信息-->

        <p class="decode-result">扫描结果: <b>{{ result }}</b></p><!--扫描结果-->

        <qrcode-stream @decode="onDecode" @init="onInit" />
    </div>
</template>

<script>

    //下载插件
    //cnpm install --save  vue-qrcode-reader

    //引入
    import { QrcodeStream } from 'vue-qrcode-reader';

    export default {

        //注册
        components: { QrcodeStream },

        data () {
            return {
                result: '',//扫码结果信息
                error: '',//错误信息
            }
        },

        methods: {
            
            onDecode (result) {
                alert(result);
                this.result = result
            },

            
            async onInit (promise) {
                try {
                    await promise
                } catch (error) {
                    if (error.name === 'NotAllowedError') {
                        this.error = "ERROR: 您需要授予相机访问权限"
                    } else if (error.name === 'NotFoundError') {
                        this.error = "ERROR: 这个设备上没有摄像头"
                    } else if (error.name === 'NotSupportedError') {
                        this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)"
                    } else if (error.name === 'NotReadableError') {
                        this.error = "ERROR: 相机被占用"
                    } else if (error.name === 'OverconstrainedError') {
                        this.error = "ERROR: 安装摄像头不合适"
                    } else if (error.name === 'StreamApiNotSupportedError') {
                        this.error = "ERROR: 此浏览器不支持流API"
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .error {
        font-weight: bold;
        color: red;
    }
</style>