一、場景

手機移動端-原生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" @change="toQR"  type="file" accept="image/*" capture="camera">
      </div>
    </div>
  </div>
</template>
<style scoped>
  .input-cells{
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    padding: .06rem .15rem;
    height: .32rem;
    line-height: .32rem;
    font-size: .14rem;
  }
  .input-label{
    margin-left: 0;
    font-size: .14rem;
    width: .9rem;
  }
  .input-cells>input{
    font-size: .14rem;
    text-align: right;
  }
  .input-cells>img{
    width: .06rem;
    height: .1rem;
    margin-right: .03rem;
  }
  .qr-item{
    width: .3rem;
    height: 100%;
    background-size: 120%;
    position: relative;
    overflow: hidden;
    border: 1px solid #dae7f6;
    background-color: #f5f5f5;
  }
  .qr-item-input{
    opacity: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  /*common*/
  .flex{
    display: flex;
  }
  .a-center{
    align-items: center;
  }
  .f-fl{
    float: left;
  }
  .ml5{
    margin-left: .05rem;
  }
  .mr10{
    margin-right: .1rem;
  }
</style>

es6引入使用

 import Quagga from 'quagga'

使用

<script type="text/ecmascript-6">
  import Quagga from 'quagga'
  export default {
    name: '',
    data() {
      return {
        queryParams: {
          vin: null
        },
        isUploadBarCode: true, // 控制銷燬
      }
    },
    mounted() {
    },
    methods: {
      // 圖片 識別 條形碼
      toQR(e) {
        const that = this
        const file0 = e.target.files[0]
        // console.log('toQR()-file0', file0)
        this.isUploadBarCode = false
        Quagga.decodeSingle({
          inputStream: {
            name : 'image',
            type : 'ImageStream',
            // size: 1600, // 這裏指定圖片的大小，需要自己測試一下
            singleChannel: false,
          },
          locator: {
            patchSize: 'medium',
            halfSample: false
          },
          numOfWorkers: 1,
          decoder: { // ean_reader 這裏指定ean條形碼，就是國際13位的條形碼   code39    code_128
            readers: ['code_128_reader']
          },
          // readers: ['code_128_reader'],
          locate: true,
          src: URL.createObjectURL(file0)
        },(result) => {
          console.log('Quagga()-result', result)
          // let code = result.codeResult.code
          if (result && result.codeResult) {
            that.queryParams.vin = result.codeResult.code
            // 執行 頁面請求刷新
          } else {
            that.queryParams.vin = null
            console.warn('識別失敗，請手動輸入')
          }
          this.isUploadBarCode = true
        })
      },
    }
  }
</script>

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)
    }
  }
}

使用

<script type="text/ecmascript-6">
  import * as QrCode from './qrcodeSearch'
  export default {
    name: '',
    data() {
      return {
        queryParams: {
          vin: null
        },
        isUploadBarCode: true, // 控制銷燬
      }
    },
    mounted() {
    },
    methods: {
      // 圖片 識別 條形碼
      toQR(e) {
        const that = this
        const file0 = e.target.files[0]
        // console.log('toQR()-file0', file0)
        this.isUploadBarCode = false
        QrCode.showQrCode(file0, {}, function (res) {
          this.isUploadBarCode = true
          console.log('showQrCode()-res', res)
          if (res.code === 0) {
            that.queryParams.vin = res.data
          } else {
            console.warn('識別失敗，請手動輸入')
          }
        })
      },
    }
  }
</script>

2-1.方案四

注意，因爲調用原生攝像頭要在 https環境下，故需要把代碼發佈到帶域名(https)的測試環境進行調試。故而代碼調整要反覆發佈構建代碼，不過樓主的這個例子已經是整好了的；

vue-demo

<template>
  <div class="page bgc-f4f4f4">
    <!--路由返回-->
    <!--<lisa-header title="掃描二維碼"></lisa-header>-->
    <video ref="video" id="video" class="video vjs-fluid" autoplay></video>
    <div v-show="tipShow" class="tip">{{tipMsg}}</div>
  </div>
</template>
<style scoped>
  /*vjs-fluid 自適video 長寬*/
  .video{
    /*border: 1px solid gray;*/
    margin-top: .5rem;
    /*width: 2.6rem;*/
    /*height: 3rem;*/
  }
  .tip{
    color: white;
    font-size: .16rem;
  }
  /* common */
  .bgc-f4f4f4{
    background-color: #363636;
  }
  .page{
    overflow-y: auto;
    position: relative;
  }
</style>

使用

<script type="text/ecmascript-6">
  import { MessageBox } from 'mint-ui'
  import { BrowserMultiFormatReader } from '@zxing/library'
  export default {
    name: 'qr-code-search',
    components: {},
    data() {
      return {
        codeReader: new BrowserMultiFormatReader(),
        vin: null,
        tipMsg: '正在嘗試識別....',
        tipShow: false
      }
    },
    created() {
      this.openScan()
    },
    methods: {
      async openScan() {
        const that = this
        that.textContent = null
        that.codeReader.getVideoInputDevices().then((videoInputDevices) => {
          that.tipShow = true
          that.tipMsg = '正在調用後置攝像頭...'
          console.log('videoInputDevices', videoInputDevices);
          // 默認獲取第一個攝像頭設備id
          let firstDeviceId = videoInputDevices[0].deviceId;
          // 獲取第一個攝像頭設備的名稱
          const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
          if (videoInputDevices.length > 1) {
            // 判斷是否後置攝像頭
            if (videoInputDeviceslablestr.indexOf('back') > -1) {
              firstDeviceId = videoInputDevices[0].deviceId;
            } else {
              firstDeviceId = videoInputDevices[1].deviceId;
            }
          }
          that.codeReader.reset() // 重置
          that.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
            that.tipMsg = '正在嘗試識別...'
            if (result) {
              console.log(result);
              that.textContent = result.text;
              if (that.textContent) {
                that.tipShow = false
                let nowContent = that.textContent
                MessageBox.prompt('識別內容', {
                  inputValidator: (val) => {
                    if (val === null) {
                      return true;//初始化的值爲null，不做處理的話，剛打開MessageBox就會校驗出錯，影響用戶體驗
                    }
                  },
                  confirmButtonText: '確定內容',
                  cancelButtonText: '繼續識別',
                  inputValue: nowContent,
                }).then(({value, action}) => {
                  that.vin = value
                  that.toNav(value)
                }).catch(() => {
                  console.log('點擊取消');
                })
              }
            }
            if (err && !(err)) {
              that.tipMsg = '識別失敗'
              setTimeout(() => {
                that.tipShow = false
              },2000)
              console.error(err);
            }
          });
        }).catch((err) => {
          that.tipShow = false
          console.error(err);
          alert('獲取不到攝像設備,請在手機瀏覽器中打開（微信瀏覽器不支持調用）')
        });
      },
    }
  }
</script>

四、尾結

道路過程是曲折坎坷的，結果是良好的,以爲整不出來的然後柳暗花明；

參考文章：

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 調用後置攝像頭問題

手機移動端-純js瀏覽器h5調用攝像頭掃描識別解析條形碼+二維碼

一、場景

二、思路

1.思路一：input(相機拍照)+ 條形碼或二維碼識別js支持庫

1-1.方案一：input+ Quagga識別庫，success, 可識別條形碼，不能識別二維碼；

1-2.方案二：input+jsqr識別庫，success，可識別條形碼，也可識別二維碼，但二維碼識別很侷限性，如果只做條形碼識別可採用，若是識別二維碼不適用；

1-3.方案三: input+qrcode庫，失敗

2.思路二：調用攝像頭（video動態識別）+ 條形碼或二維碼識別js支持庫

2-1.方案四：video+ zxing識別庫，success，可識別條形碼可識別二維碼，完美解決，樓主採用的這種；

三、實例

1-1.方案一

1-2.方案二

2-1.方案四

四、尾結

省-市-區三級聯動選擇地址 + 地圖定位(高德api定位獲取位置信息)，互相聯動顯示

手機移動端-純js瀏覽器h5調用攝像頭掃描識別解析條形碼+二維碼

原生微信小程序flyio封裝多baseURL配置請求，如同axios一樣非常爽利的使用api

vue高德多條路線規劃+帶途徑節點多組多個maker text標籤創建+各路線顏色區別

vue高德多條軌跡導航+帶途徑節點標註+各路線顏色區別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

手機移動端-純js瀏覽器h5調用攝像頭掃描識別解析 條形碼+二維碼

一、場景

二、思路

1.思路一：input(相機拍照)+ 條形碼或二維碼識別js支持庫

1-1.方案一：input+ Quagga識別庫，success, 可識別 條形碼，不能識別二維碼；

1-2.方案二：input+jsqr識別庫，success，可識別條形碼，也可識別二維碼，但二維碼識別很侷限性，如果只做條形碼識別可採用，若是識別二維碼不適用；

1-3.方案三: input+qrcode庫， 失敗

2.思路二：調用攝像頭（video動態識別）+ 條形碼或二維碼識別js支持庫

2-1.方案四：video+ zxing識別庫，success，可識別 條形碼 可識別二維碼，完美解決，樓主採用的這種；

三、實例

1-1.方案一

1-2.方案二

2-1.方案四

四、尾結

手機移動端-純js瀏覽器h5調用攝像頭掃描識別解析條形碼+二維碼

1-1.方案一：input+ Quagga識別庫，success, 可識別條形碼，不能識別二維碼；

1-3.方案三: input+qrcode庫，失敗

2-1.方案四：video+ zxing識別庫，success，可識別條形碼可識別二維碼，完美解決，樓主採用的這種；