vue實(shí)現(xiàn)h5掃碼的代碼示例

更新時(shí)間：2024年01月04日 08:29:56 作者：舉半個(gè)栗子

html5-qrcode是一個(gè)基于JavaScript?輕量級(jí)和跨平臺(tái)的掃碼插件,允許用戶使用攝像頭掃描二維碼,并且解析為文本或者url,本文給大家介紹了vue實(shí)現(xiàn)h5掃碼,需要的朋友可以參考下

插件 html5-qrcode npm地址

html5-qrcode是一個(gè)基于JavaScript 輕量級(jí)和跨平臺(tái)的掃碼插件。允許用戶使用攝像頭掃描二維碼，并且解析為文本或者url。

支持掃描不同類型的二維碼和條形碼
支持不同的平臺(tái)，Android、IOS、Windows、MacOs或者linux
支持不同的瀏覽器，Chrome、Safari、Edge等
支持掃描本地文件

訪問攝像頭涉及用戶隱私，所以訪問環(huán)境必須在https下

實(shí)現(xiàn)（該代碼環(huán)境基于vue3）

安裝依賴

npm install html5-qrcode

引入

import { Html5Qrcode } from 'html5-qrcode'

使用
setup數(shù)據(jù)

   const state = reactive({
      html5QrCode: null,
       fileList:[]
    })

判斷當(dāng)前環(huán)境下是否有攝像頭

Html5Qrcode.getCameras()
.then(devices =>{
    if(devices &&devices.length){
        // 當(dāng)前環(huán)境下能識(shí)別出攝像頭，并且攝像頭的數(shù)據(jù)可能不止一個(gè)
         state.html5QrCode = new Html5Qrcode('reader')         //  reader  放置掃碼功能的元素ID
        startInit()
   }
})
.catch(() =>{
   // 攝像頭無訪問權(quán)限
})

掃碼

const startInit = () =>{
      state.html5QrCode.start(
          //  environment后置攝像頭 user前置攝像頭
          {facingMode:'environment'},
          {
              fps:1, // 可選，每n秒幀掃描一次
              qrbox:{
                  width:250,
                  height:250
              } // 掃描的   UI框
          },
          (decodedText, decodedResult) =>{
              // 掃描結(jié)果
          }
      )
    .catch((err) =>{
          // 掃碼錯(cuò)誤信息
          let message = ''
          if(typeof err == 'string'){
              message = '識(shí)別失敗'
          }else {
            if (err.name == 'NotAllowedError') {
              message = '您需要授予相機(jī)訪問權(quán)限！'
            }
            if (err.name == 'NotFoundError') {
              message = '這個(gè)設(shè)備上沒有攝像頭！'
            }
            if (err.name == 'NotSupportedError') {
              message = '攝像頭訪問只支持在安全的上下文中，如https或localhost！'
            }
            if (err.name == 'NotReadableError') {
              message = '相機(jī)被占用！'
            }
            if (err.name == 'OverconstrainedError') {
              message = '安裝攝像頭不合適！'
            }
            if (err.name == 'StreamApiNotSupportedError') {
              message = '此瀏覽器不支持流API！'
            }
          }
      })
}

識(shí)別本地文件

  const dealSelectFiles = () => {
      try {
        window.qrcode.callback = (result) => {
            // 識(shí)別成功
        }
        // get select files.
        let file = state.fileList[0].file
        var reader = new FileReader()
        reader.onload = (function () {
          return function (e) {
            window.qrcode.decode(e.target.result)
          }
        })(file)
        reader.readAsDataURL(file)
      } catch (error) {
         // 識(shí)別失敗
      }
    }

在離開頁面時(shí)要停止掃碼功能

  onUnmounted(() => {
      //掃描設(shè)備是否在運(yùn)行
      if (state.html5QrCode.isScanning) {
        stop()
      }
    })

完整代碼

<template>
  <div class="scanCode">
    <div class="container">
      <div class="qrcode">
        <div id="reader"></div>
      </div>
    </div>
    <div class="btn">
      <div class="left-back">
        <van-icon name="arrow-left" @click="clickBack" />
      </div>
?
      <div class="right-file">
        <van-uploader v-model="fileList" :preview-image="false" :after-read="dealSelectFiles">
          <van-icon name="photo-o" />
        </van-uploader>
      </div>
    </div>
  </div>
</template>
?
<script>
import { reactive } from 'vue'
import { defineComponent, toRefs, onMounted, onUnmounted } from 'vue'
import { Html5Qrcode } from 'html5-qrcode'
import { showToast, } from 'vant'
export default defineComponent({
  setup() {
    const state = reactive({
      html5QrCode: null,
      fileList: [],
    })
?
?
    const start = () => {
      state.html5QrCode
        .start(
          { facingMode: 'environment' },
          {
            fps: 1, 
            qrbox: { width: 250, height: 250 } 
          },
          (decodedText, decodedResult) => {
            console.log('decodedText', decodedText)
            console.log('decodedResult', decodedResult)
          }
        )
        .catch((err) => {
          console.log('掃碼錯(cuò)誤信息', err)
          let message = ''
          // 錯(cuò)誤信息處理僅供參考，具體描述自定義
          if (typeof err == 'string') {
            message = '二維碼識(shí)別失敗！'
          } else {
            if (err.name == 'NotAllowedError') {
              message = '您需要授予相機(jī)訪問權(quán)限！'
            }
            if (err.name == 'NotFoundError') {
              message = '這個(gè)設(shè)備上沒有攝像頭！'
            }
            if (err.name == 'NotSupportedError') {
              message = '攝像頭訪問只支持在安全的上下文中，如https或localhost！'
            }
            if (err.name == 'NotReadableError') {
              message = '相機(jī)被占用！'
            }
            if (err.name == 'OverconstrainedError') {
              message = '安裝攝像頭不合適！'
            }
            if (err.name == 'StreamApiNotSupportedError') {
              message = '此瀏覽器不支持流API！'
            }
          }
        })
    }
?
    const getCameras = () => {
      Html5Qrcode.getCameras()
        .then((devices) => {
          if (devices && devices.length) {
            state.html5QrCode = new Html5Qrcode('reader')
            start()
          }
        })
        .catch((err) => {
 
          showToast({
            message: '攝像頭無訪問權(quán)限！',
            duration: 3000
          })
        
    }
?
    const stop = () => {
      state.html5QrCode
        .stop()
        .then((ignore) => {
          console.log('停止掃碼', ignore)
        })
        .catch((err) => {
          console.log(err)
          showToast('停止掃碼失敗')
        })
    }
?
    const dealSelectFiles = () => {
      try {
        window.qrcode.callback = (result) => {
           showToast('成功了，結(jié)果是：' + result)
        }
        // get select files.
        let file = state.fileList[0].file
        var reader = new FileReader()
        reader.onload = (function () {
          return function (e) {
            window.qrcode.decode(e.target.result)
          }
        })(file)
        reader.readAsDataURL(file)
      } catch (error) {
        showToast({
          message: '圖片識(shí)別失敗！',
          duration: 3000
        })
      }
    }
?
  
    onMounted(() => {
      getCameras()
    })
?
?
    onUnmounted(() => {
      //掃描設(shè)備是否在運(yùn)行
      if (state.html5QrCode.isScanning) {
        stop()
      }
    })
    return {
      ...toRefs(state),
      getCameras,
      dealSelectFiles,
    }
  }
})
</script>
?
<style lang="scss" scoped>
.scanCode {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0);
}
.container {
  height: 90vh;
  position: relative;
  width: 100%;
}
?
.qrcode {
  height: 100%;
}
#reader {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
?
.btn {
  flex: 1;
  padding: 3vw;
  display: flex;
  justify-content: space-around;
  color: #fff;
  font-size: 8vw;
  align-items: flex-start;
}
</style>
?