手机移动端-纯js浏览器h5调用摄像头扫描识别解析 条形码+二维码

一、场景

手机移动端-原生js 浏览器h5 解决 识别二维码 条形码功能；

不借助Hbuilder.需要自己打包成APP，比如用Hbuilder打包，浏览器端项目h5 无打包成app部署 X 不采用

不借助微信扫一扫，调用微信js-jdk有多麻烦，还要认证服务号，也不适用 其它浏览器打开 X 不采用

二、思路

1.思路一：input(相机拍照)+ 条形码或二维码识别js支持库

通过h5-input[camera] 调用相机进行拍照成图片，通过条形码等识别库 解析出 数据；

1-1.方案一：input+ Quagga识别库，success, 可识别 条形码，不能识别二维码；

quagga库地址 https://www.npmjs.com/package/quagga

npm install quagga --save

1-2.方案二：input+jsqr识别库，success，可识别条形码，也可识别二维码，但二维码识别很局限性，如果只做条形码识别可采用，若是识别二维码不适用；

jsqr库地址 https://www.npmjs.com/package/jsqr

npm install jsqr --save

例： 1.正方形不带其它无效内容 只二维码的图片，设置jsqr识别长宽 100*100 ,可成功识别

       2.长方形带其它无效内容，比如拍照出来的二维码图片，设置jsqr识别长宽 自适（传入图片的长宽 或100*100），都识别失败

1-3.方案三: input+qrcode库， 失败

qrcode.decode(img)

2.思路二：调用摄像头（video动态识别）+ 条形码或二维码识别js支持库

调用手机原生摄像头 动态识别 用相关支持js库  解析 二维码 条形码

2-1.方案四：video+ zxing识别库，success，可识别 条形码 可识别二维码，完美解决，楼主采用的这种；

 zxing-js/library库地址 https://github.com/zxing-js/library

npm install  @zxing/library --save

三、实例

1-1.方案一

vue-demo

 

es6引入使用 

 import Quagga from 'quagga'

使用

 

1-2.方案二

方案二 html+css 公用与 方案一  

 qrcodeSearch.js

// import QRCode from '../libs/qr/qrcode'
import jsqr from 'jsqr'
// 二维码 或 条形码 识别
export function showQrCode(file, params, callback) {
  const ready = new FileReader()
  /* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
  ready.readAsDataURL(file) // 调用reader.readAsDataURL()方法，把图片转成base64
  ready.onload = function() {
    const re = this.result
    canvasDataURL(re, params, callback)
  }
}
function canvasDataURL(path, obj, callback) {
  const img = new Image()
  img.src = path
  // 生成canvas
  const canvas = document.createElement('canvas')
  // const canvas = document.getElementById('qrcanvas')
  const ctx = canvas.getContext('2d')
  // const _this = this
  img.onload = function() {
    console.log('canvasDataURL()-img', img.height, img.width)
    // let w = img.width
    // let h = img.height
    const w = 100
    const h = 100
    ctx.clearRect(0, 0, w, h)
    ctx.drawImage(img, 0, 0, w, h);
    const imageData = ctx.getImageData(0, 0, w, h);
    const code = jsqr(imageData.data, w, h);
    const res = {
      data: null,
      message: '识别成功',
      code: 0,
    }
    if(code){
      res.data = code.data
      callback(res)
    }else{
      res.code = -1
      res.data = null
      res.message = '识别失败'
      callback(res)
    }
  }
}

使用

2-1.方案四

  注意，因为调用原生摄像头 要在 https环境下，故需要把代码发布到 带域名(https)的测试环境 进行调试【这是必要的前提条件，没有测试环境就不要整了】。故而代码调整要反复发布构建代码，不过楼主的这个例子已经是整好了的；

vue-demo

使用

四、尾结

  道路过程是曲折坎坷的，结果是良好的,以为整不出来的然后柳暗花明；

参考文章：

https://www.jianshu.com/p/30a34157c7d1    zing-js/library

https://blog.csdn.net/aoshilang2249/article/details/105222706   MediaDevices.getUserMedia undefined 的问题

https://blog.csdn.net/yingzhi3104/article/details/105557591 quagga识别条形码图片

https://blog.csdn.net/qq_37705048/article/details/79816438 qrcode.js的识别

https://blog.csdn.net/haiyang5233233/article/details/105874129 调用摄像头是提示 navigator.mediaDevices.getUserMedia

https://blog.csdn.net/weixin_30260399/article/details/96458034 调用后置摄像头问题