在Vue.js 中使用 html5-qrcode 開啟相機掃描 qrcode 及 barcode 功能

html5-qrcode 是輕量和跨平台的QRcode及barcode掃描套件。

文件位置

安裝

yarn add html5-qrcode

封裝

// 可以自定義開啟相機的class
import { Html5Qrcode } from 'html5-qrcode'

// 封裝 傳入 Dom 的 id
export const useHtml5QrCode = (domId: string) => {
    const html5QrCode = new Html5Qrcode(domId)

    // 啟動相機  開啟掃描功能
    // 傳入 qrCodeSuccessCallback 掃描成功後要做的事
    const start = (qrCodeSuccessCallback: () => void) => {

        // 相機brcode顯示設定
        const brConfig = { fps: 10, qrbox: { width: 300, height: 150 } }
        
        // 套件啟動相機function
        html5QrCode.start(
            // 使用預設前或後鏡頭 （environment 為使用預設）
            { facingMode: 'environment' },
            // 相機brcode顯示設定
            brConfig,
            // 掃描成功後的 Callback
            qrCodeSuccessCallback,
            // Error的 Callback
            qrCodeErrorCallback
        )
    }
  
    // 關閉相機
    const handleStop = () => {
        try {
            // 套件關閉相機function
            html5QrCode
                .stop()
                .then(() => {
                    // 清除
                    html5QrCode.clear()
                })
                .catch((error) => {
                    console.log('danger', error.message)
                })
        } catch (error) {
            console.log('danger', error)
        }
    }

    // Error的 Callback
    const qrCodeErrorCallback = (error: string) => {
        // lib 有 bug 暫時處理 ， 待日後更新
        console.log('qrCodeErrorCallback error', error)
    }

    return {
        start,
        handleStop
    }
}

在元件中使用

<!-- barcode 相機初始化 -->
<div id="barcode-reader" class="component-barcode-reader"></div>

<!-- vuetify input -->
<v-text-field
  v-model="searchProductName"
  density="compact"
  variant="outlined"
  hide-details
  placeholder="搜尋產品名稱或SKU"
  >
  <template #append-inner>
    <!-- click 後開啟相機 -->
    <v-icon color="primary" @click="scanBarcode">mdi-magnify-scan</v-icon>
  </template>
</v-text-field>

import { onMounted, ref } from 'vue'
import { useHtml5QrCode } from '@/hooks/html5-qr-code'

let html5QrCode

const searchProductName = ref('')

// 初始化要在 onMounted 中 （要在virtual dom render之後才抓得到 dom）
onMounted(() => {
    html5QrCode = useHtml5QrCode('barcode-reader')
})

// 掃描成功後會得到 decodedText
const qrCodeSuccessCallback = (decodedText) => {
    // 傳入 searchProductName 去做後續處理
    searchProductName.value = decodedText
    // 停止相機
    handleStop()
}

// 啟動相機
const scanBarcode = () => {
    html5QrCode.start(qrCodeSuccessCallback)
}

// 停止相機
const handleStop = () => {
    html5QrCode.handleStop()
}

實際demo畫面

1. 點擊搜尋框右側掃描

2. 瀏覽器(手機)會詢問相機權限

3. 開啟相機畫面，將barcode(或qrcode) 對準中間框線，即可掃描。（掃描中間框線就是由封裝時brConfig 去做設定）

另一種 Html5QrcodeScanner 方法

使用官方範例demo，初始化完成後會直接render成下面圖示：

Html5QrcodeScanner 初始化後直接render的樣子

官方範例code如下：

<div id="reader" width="600px"></div>

import {Html5QrcodeScanner} from "html5-qrcode"

function onScanSuccess(decodedText, decodedResult) {
  // handle the scanned code as you like, for example:
  console.log(`Code matched = ${decodedText}`, decodedResult);
}

function onScanFailure(error) {
  // handle scan failure, usually better to ignore and keep scanning.
  // for example:
  console.warn(`Code scan error = ${error}`);
}

let html5QrcodeScanner = new Html5QrcodeScanner(
  "reader",
  { fps: 10, qrbox: {width: 250, height: 250} },
  /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

點擊 Request Camera Permissions 後一樣會啟動相機掃描。

所以如果要客製化一些，通常會使用 Html5Qrcode 如最上方範例。

當然也可以順利在手機上運行，這邊就不特別demo了。

此套件因為是原生js去開發，所以可以支援所有框架（不限定Vue），甚至不使用框架也可以，而且非常輕量。