vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。 单纯的h5网页不涉及真机

demo链接

前端同学可以加我一起交流一起进步

案例描述：需求是生成条形码并且在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引入
也可以
npm i html5-qrcode

 methods: {
 	 init(){
		util.AddJs('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