Angular - 透過網頁開啟相機解析條碼

文章目錄

本篇文章說明該如何透過網頁開啟相機，並介紹兩種方法解析條碼；分別為影音掃描與圖片檔案解析。影音掃描方法會自動偵測條碼並解析，而圖片解析方法則必須透過相機拍攝或上傳條碼圖片來進行解析。

透過網頁開啟相機解析條碼

一、掃描條碼

安裝套件ZXing一維/二維條碼圖像處理庫。 npm i @zxing/library@0.19.2

請求相機權限

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(() => {
    // 權限允許，取得相機資源
    this.getAllLens();
});

取得相機資源 listVideoInputDevices方法可取得所有可用鏡頭。一般來說會先取得前置鏡頭，再取得後置鏡頭。取得裝置相機資源

getAllLens() {
    this.codeReader.listVideoInputDevices().then(value => {
        this.devices = value;
        this.DeviceId = this.devices[this.devices.length-1].deviceId;
    })
}

建立video嵌入元素以顯示相機影像。
```
<video id="video"></video>
```

指定相機資源deviceId並解析條碼。

startScanning() {
    this.codeReader.decodeOnceFromVideoDevice(this._selectedDeviceId, 'video').then((result) => {
        this.text = result.getText();
    }).catch((err) => {
        console.error(err);
    }).finally(() => this.resetScanner());
}

重設相機

resetScanner() {
}
    this.codeReader.reset();

二、解析條碼圖片

嘗試使用上述套件，並無法正確解析條碼圖片，因此使用套件ZXing browser。錯誤訊息: No MultiFormat Readers were able to detect the code.

安裝套件ZXing browser。 npm i @zxing/browser@0.1.1
建立檔案輸入元素，加上capture屬性，使該輸入元素能夠在手機上開啟相機拍攝條碼，在電腦上則必須選擇條碼圖片檔案。
```
<input type="file" accept="image/*" capture="environment" (change)="parseCode($event)">
```

解析條碼圖片輸入元素偵測到檔案改變後，取得該檔案的url進行解碼。

parseCode(e: any) {    
    const file = e.target?.files[0];    
    const url = URL.createObjectURL(file);    
    this.codeReader.decodeFromImageUrl(url)
        .then(res => this.parsedCode = res.getText())
        .finally(e.target.value = null);
}

一、 掃描條碼

二、 解析條碼圖片

Reference

一、掃描條碼

二、解析條碼圖片