vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

案例描述：需求是生成条形码并且在vue项目中实现扫一扫功能并不是拍照上传后端识别那种

项目场景：单纯的h5项目，没办法调用微信等封装好的组件或者js因为有些场景并不在微信自带的浏览器里面

问题描述：

生成条形码使用vue-barcode

cnpm i vue-barcode -D

//在main.js中
import VueBarcode from 'vue-barcode';

Vue.component('barcode', VueBarcode)
//在对应生成条形码页面
 <barcode :width="2" :value="code" :options="{format: 'CODE39', width: 2,displayValue: false}"></barcode>
 //value为输入需要生成的code
 //value注意不要太长因为太长的话生成的码也很长很密集，h5实现的扫一扫毕竟性能
 //不是很好太密集太长识别不了，如果java生成的码出现扫不
 //出来的情况告诉他试试调整成Code-128

第一步：因为扫码js不支持vue组件注册或者是引入等方式，就算是支持我感觉也很麻烦，所以这样的话以动态创建script的方法将扫码js引入vue项目中

//动态创建script的方法
 AddJs: 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()
      }
    })
  },

第二步：在对应的vue页面调用方法将扫码js引入

 methods: {
     init(){
        util.loadJs('https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js')  
    },
 },
 mounted(){
    this.init()
  }

第三步：在对应的vue页面中设置盛放扫码的div盒子

<template>
 <div id="qr-reader" style="width:100%;height: 100%;"></div>
<template>

第四步：获取当前设备的摄像头列表id并存储为接下来使用

getCameras(){
        Html5Qrcode.getCameras().then(devices => {
        //判断有没有设备的摄像头列表
          if (devices && devices.length) {
             // devices 是设备的摄像头列表如果大于1的话默认取后面摄像头
              if(devices.length>1){
                this.cameraId = devices[1].id;
              }else{
                this.cameraId = devices[0].id;
              } 
          }
        }).catch(err => {
          // handle err
        });
    }

第五步：拿存储的设备的摄像头列表id启动扫码

start(){
        this.html5QrCode = new Html5Qrcode('qr-reader')
        this.html5QrCode.start(
          this.cameraId,     // 上面获取到的id
          {
            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){
                 //成功扫出码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}`);
        });
    },

第六步：关掉摄像头

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.");
        });
    },

总体页面：

使用vue实现h5扫码功能

<template>
 <div class="scan">
     
     <div class="sectionview">
         <div id="qr-reader" style="width:100%;height: 100%;"></div>
     </div>
    
    <div class="footer">
    <van-button @click="getCameras" color="rgba(249, 185, 73, 1)">Obtain Access</van-button>
    </div>
 </div>
</template>
 
<script >
import util from '../common/js/util.js'
 export default {
 data() {
  return {
  codeUrl: '',
  cameraId:''
  }
 },
 beforeDestroy(){
     this.stop()
 },
 methods: {
   getCode(id){
      //跳转页面
   },
   init(){
        util.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){
                 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 lang="less">
 .scan {
    width: 100%;
    display: flex;
    flex-direction: column;
    height:100vh;
    overflow: hidden;
    .footer{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    
 }
</style>

后期优化改善研究参考文档

如果对你有用不要忘记点赞收藏哦！
https://github.com/mebjas/html5-qrcode