本文主要講述的是采用瀏覽器來識(shí)別二維碼 / 條形碼等，并對(duì)其解析得到相應(yīng)的結(jié)果。還有一個(gè)目的就是為了驗(yàn)證 iphone 是否無法自動(dòng)開啟攝像頭進(jìn)行掃描。需求也非常簡(jiǎn)單，就是用 Web 瀏覽器實(shí)現(xiàn)二維碼的掃描及解析，我做了個(gè)簡(jiǎn)單的 Demo 放在 Github 上面，可以體驗(yàn)一下，若用得上，可下載源碼試試。

Safari 掃描二維碼及解析結(jié)果

Vue3 + Vite + Ant-Design-Vue + ZXing，該 Demo 主要的技術(shù)及其相應(yīng)的依賴。對(duì)于 Vue3 + Vite 項(xiàng)目的構(gòu)建，可以自行查看官網(wǎng)教程，至于 Ant-Design-Vue 和 ZXing-JS，需要注意的是 Ant-Design-Vue 的安裝記得加個(gè) @next 版本，其它無異。

# 構(gòu)建項(xiàng)目后運(yùn)行
npm init vite-App miitvip-scan-demo
cd miitvip-scan-demo
npm install
npm run dev

# 安裝依賴
npm i ant-design-vue@next --save
npm i @zxing/library --save

Template

video 標(biāo)簽用于顯示攝像頭內(nèi)容

<template>
	<video class="video" id="video" ref="video" autoplay></video>
</template>

Safari 提示網(wǎng)站需要獲取相機(jī)權(quán)限

OpenCamera

拉起攝像頭，若獲取不到媒體設(shè)備的列表，則簡(jiǎn)單的拋出個(gè)錯(cuò)誤提示。

async openCamera() {
  this.$message.success({
    content: '正在嘗試?yán)饠z像頭 ...',
    duration: 0
  })
  if (!navigator.mediaDevices) {
    this.$message.destroy()
    this.iphone = true
    this.$message.success({
      content: 'iPhone 其它瀏覽器無權(quán)限自動(dòng)開啟攝像頭 ...',
      duration: 0
    })
  } else {
    this.reader.listVideoInputDevices().then((devices) => {
      this.decode(devices[0].deviceId)
    }).catch((err) => {
      this.errMsg = err
      this.$message.destroy()
      this.$message.error({
        content: err,
        duration: 0
      })
    })
  }
}

拉起攝像頭，進(jìn)入掃描狀態(tài)

Decode

decode 解析內(nèi)容，這里采用的是單次解析，即掃描成功后需要重新刷新一下頁(yè)面方可再次進(jìn)行識(shí)別操作，若要多次掃描，可用 decodeFromInputVideoDeviceContinuously 方法去識(shí)別。

decode(id: any) {
  this.reader.reset()
  this.$message.destroy()
  this.$message.success({
    content: '正在嘗試識(shí)別，請(qǐng)對(duì)準(zhǔn)攝像頭 ...',
    duration: 0
  })
  this.reader.decodeOnceFromVideoDevice(id, 'video').then((res) => {
    this.$message.destroy()
    this.content = res.text
    this.time = new Date(res.timestamp)
    this.modalVisible = true
  }).catch((err) => {
    this.$message.destroy()
    this.$message.error({
      content: '識(shí)別失敗，請(qǐng)刷新后再次嘗試 ...',
      duration: 0
    })
    this.errMsg = err
  })
}

非 Safari 瀏覽器無權(quán)自動(dòng)拉起相機(jī) - iPhone

總結(jié)

https://github.com/lirongtong/miitvip-scan-demo

https://scan.makeit.vip/

最后的結(jié)果就是：iPhone 中，除了自帶的 Safari 瀏覽器外，其它任何的瀏覽器，都無法自動(dòng)拉起相機(jī)，沒有這個(gè)權(quán)限，但是我們可以采用折中的方式，即用拍照的形式來進(jìn)行識(shí)別，可以用如下的代碼語(yǔ)句來拉起攝像頭，拍照后識(shí)別照片內(nèi)容，我在 Demo 上也做了，但是識(shí)別的效果卻是不如攝像頭實(shí)時(shí)掃描的好，正確率很低，常常識(shí)別失?。ㄉ鲜鰞蓚€(gè)地址分別為 Github 與 Demo 地址）。

<input class="file" type="file" ref="camera" capture="camera" accept="image/*" @change="change" />

拍照的也能識(shí)別，但正確率比較低