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

一、场景

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

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

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

二、思路

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

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

<input @change="toQR"  type="file" accept="image/*" capture="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

<template>
  <div class="mt46 input-cells">
    <div class="flex a-center f-fl">
      <div>车架号</div>
      <input v-model="queryParams.vin" class="cell-input ml5 mr10" type="text"
             placeholder="请输入或扫描拍照" />
    </div>
    <div class="flex l-center a-left">
      <div class="qr-item mr5 ml5">
        <!--图标自用 https://www.iconfont.cn/ --> 
        <!--<i class="iconfont icon-qr f18 c-ffaa09"></i>-->
        <img src="#" width="20" height="20" alt="">
        <input v-if="isUploadBarCode" class="qr-item-input"