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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342