Javascript QR 碼掃描器是基於 Cosmo Wolfe 的 Google ZXing 庫的 javascript 連接埠。
在此庫中，對原始連接埠進行了多項改進：
BarcodeDetector可用，則僅載入約 15.3 kB（gzip 後約 5.6 kB）。根據我們的基準測試，該專案的掃描器引擎的檢測率大約是最受歡迎的 javascript QR 掃描儀庫 LazarSoft/jsqrcode 之一的 2-3 倍（最高可達 8 倍）。另外，其他函式庫經常誤讀二維碼內容，而本項目在基準測試中沒有出現誤讀情況。
該庫支援掃描來自網路攝影機的連續視訊串流以及掃描單一影像。
該庫的開發由世界上第一個基於瀏覽器的區塊鏈 nimiq 贊助。
請參閱 https://nimiq.github.io/qr-scanner/demo/
透過 npm 安裝：
npm install --save qr-scanner透過紗線安裝：
yarn add qr-scanner或只需將qr-scanner.min.js和qr-scanner-worker.min.js複製到您的專案中。
QR 掃描器由兩個主要文件組成。 qr-scanner.min.js是主要 API 文件，僅在需要時透過動態導入載入工作腳本qr-scanner-worker.min.js 。如果您沒有使用像 Rollup 或 Webpack 這樣自動處理動態導入的打包程序，您可能需要將qr-scanner-worker.min.js複製到您的 dist，位於qr-scanner.min.js或腳本旁邊您將qr-scanner.min.js捆綁到其中。
qr-scanner.min.js是一個 es6 模組，可以如下導入：
import QrScanner from 'path/to/qr-scanner.min.js' ; // if using plain es6 import
import QrScanner from 'qr-scanner' ; // if installed via package and bundling with a module bundler like webpack or rollup這要求導入腳本也是 es6 模組或模組腳本標籤，例如：
< script type =" module " >
import QrScanner from 'path/to/qr-scanner.min.js' ;
// do something with QrScanner
</ script >如果您的專案不是基於 es6 模組，您可以
import ( 'path/to/qr-scanner.min.js' ) . then ( ( module ) => {
const QrScanner = module . default ;
// do something with QrScanner
} ) ;qr-scanner.umd.min.js直接用作非模組腳本 < script src =" path/to/qr-scanner.umd.min.js " > </ script >
< script >
// do something with QrScanner
</ script >qr-scanner.umd.min.js直接與非模組程式碼捆綁在一起。require的捆綁器（如 browserify）捆綁在一起： const QrScanner = require ( 'qr-scanner' ) ; // if installed via package
const QrScanner = require ( 'path/to/qr-scanner.umd.min.js' ) ; // if not installed via package
// do something with QrScanner此函式庫使用 ECMAScript 2017 功能，例如async函數。如果您需要支援舊瀏覽器，可以使用qr-scanner.legacy.min.js ，它與 ECMAScript 2015 (ES6) 相容。它是 UMD 版本，可以用作qr-scanner.umd.min.js的替代品，請參見上文。請注意，舊版本更大，因為它包含一些填充，並且為了支援不支援動態導入的瀏覽器，內聯了工作腳本，但無論如何都需要在舊瀏覽器中加載該腳本。不過，您可能不需要使用舊版本，因為一般瀏覽器支援對於常規版本來說已經非常好。特別是如果您想從裝置的相機進行掃描，瀏覽器對相機的支援是更嚴格的限制。
建立一個<video>元素，應在其中渲染網路攝影機視訊串流：
< video > </ video > // To enforce the use of the new api with detailed scan results, call the constructor with an options object, see below.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
{ /* your options or returnDetailedScanResult: true if you're not specifying any other options */ } ,
) ;
// For backwards compatibility, omitting the options object will currently use the old api, returning scan results as
// simple strings. This old api will be removed in the next major release, by which point the options object is then
// also not required anymore to enable the new api.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
// No options provided. This will use the old api and is deprecated in the current version until next major version.
) ;可以提供選項對像作為可選的第三個參數。支援的選項有：
| 選項 | 描述 |
|---|---|
onDecodeError | 解碼錯誤時呼叫的處理程序。預設為QrScanner._onDecodeError 。 |
preferredCamera | 對要使用的相機的偏好。首選項可以是listCameras回傳的裝置 ID，也可以是指定為'environment'或'user'面向模式。預設為'environment' 。請注意，不能保證該偏好實際上可以滿足。 |
maxScansPerSecond | 此選項可用於限制掃描以減少電池消耗。預設值為 25。 |
calculateScanRegion | 一種確定應限制掃描的區域以提高效能的方法。作為額外的效能改進，在執行掃描之前也可以選擇縮小該區域。該區域被指定為x 、 y 、 width和height ；縮小區域的尺寸為downScaledWidth和downScaledHeight 。請注意， width和height以及downScaledWidth和downScaledHeight之間的長寬比應保持相同。預設情況下，掃描區域限制為視訊寬度或高度的三分之二（以較小者為準）的中心正方形，並縮小至 400x400 正方形。 |
highlightScanRegion | 將此選項設為true可在視訊串流上的掃描區域周圍渲染輪廓。這使用了覆蓋掃描區域的絕對定位的div 。該div可以作為選項overlay提供（見下文），也可以自動建立然後透過qrScanner.$overlay存取。它可以透過 CSS 自由設定樣式，例如透過設定輪廓、邊框、背景顏色等。 |
highlightCodeOutline | 將此選項設為true可在偵測到的 QR 碼周圍呈現輪廓。這使用了一個絕對定位的div ，用於渲染輪廓的 SVG 將放置在該 div 上。此div可作為選項overlay提供，請參閱下文，或透過qrScanner.$overlay存取。 SVG 可以透過 CSS 自由設定樣式，例如透過設定填滿顏色、描邊顏色、描邊寬度等。對於更特殊的需求，您也可以直接使用cornerPoints （請參閱下文）來自行渲染輪廓或點。 |
overlay | 可提供highlightScanRegion和highlightCodeOutline的自訂div 。 div應該是 DOM 中videoElem的同級。如果提供此選項，則不會套用highlightCodeOutline的預設樣式，因為預期該元素已經套用了一些自訂樣式。 |
returnDetailedScanResult | 強制報告詳細的掃描結果，請參閱下文。 |
若要使用選項的預設值，請忽略它或提供undefined 。
傳遞給回呼的結果取決於是否提供了選項物件：
data （讀取的 QR 碼的字串內容）和cornerPoints （讀取的 QR 碼輪廓在相機流上的角點）的對象。為了避免在不提供任何其他選項的情況下使用已棄用的 api，您可以提供{ returnDetailedScanResult: true }來啟用新 api 並取得詳細的掃描結果。
qrScanner . start ( ) ;當您準備好掃描時調用它，例如單擊按鈕或直接在頁面加載時。它將提示使用者獲得使用相機的許可。注意：要從網路攝影機流讀取數據，您的頁面必須透過 HTTPS 提供服務。
qrScanner . stop ( ) ;如果需要，您可以隨時停止掃描並再次呼叫start()來恢復掃描。
QrScanner . scanImage ( image )
. then ( result => console . log ( result ) )
. catch ( error => console . log ( error || 'No QR code found.' ) ) ;支援的圖片來源有：HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、檔案/Blob、資料 URI、指向映像的 URL（如果它們位於同一來源或啟用了 CORS）
可以提供選項對像作為可選的第二個參數。支援的選項有：
| 選項 | 描述 |
|---|---|
scanRegion | 由x 、 y 、 width和height定義的區域，應限制 QR 碼的搜尋。作為效能改進，可以透過提供downScaledWidth和downScaledHeight在執行掃描之前縮小該區域。請注意， width和height以及downScaledWidth和downScaledHeight之間的長寬比應保持相同。預設情況下，該區域跨越整個影像並且不會縮小。 |
qrEngine | 手動建立的可重複使用的 QR 掃描器引擎實例。如果您掃描大量影像，這可以提高效能。可以透過QrScanner.createQrEngine(QrScanner.WORKER_PATH)手動建立引擎。預設情況下，單一影像掃描不會重複使用任何引擎。 |
canvas | 手動建立的可重複使用的畫布。如果您掃描大量影像，這可以提高效能。可以透過標記中的<canvas>標記或document.createElement('canvas')手動建立畫布。預設情況下，單一影像掃描不會重複使用畫布。 |
disallowCanvasResizing | 請求提供的畫布以供重複使用，無論來源影像或來源區域尺寸如何，都不會調整大小。請注意，畫布和來源區域應具有相同的縱橫比，以避免要掃描的影像變形，導致無法偵測 QR 碼。預設情況下，畫布大小會適應掃描區域尺寸或縮小的掃描區域以進行單一影像掃描。 |
alsoTryWithoutScanRegion | 如果提供了scanRegion並且在該區域內未找到 QR 程式碼，則請求對整個影像進行第二次掃描。預設情況下，不會嘗試進行第二次掃描。 |
returnDetailedScanResult | 強制報告詳細的掃描結果，請參閱下文。 |
若要使用選項的預設值，請忽略它或提供undefined 。
傳回的結果取決於是否提供了選項物件：
data （讀取的 QR 碼的字串內容）和cornerPoints （讀取的 QR 碼輪廓在相機流上的角點）的對象。為了避免在不提供任何其他選項的情況下使用已棄用的 api，您可以提供{ returnDetailedScanResult: true }來啟用新 api 並取得詳細的掃描結果。
如果無法讀取 QR 碼，則scanImage拋出異常。
該庫提供了一種用於檢查設備是否有攝影機的實用方法。這對於確定是否向用戶提供 QR 網路攝影機掃描功能非常有用。
QrScanner . hasCamera ( ) ; // async該庫提供了一種實用方法，用於獲取設備相機列表，透過其id和label定義。這對於讓用戶選擇要使用的特定相機很有用。
您可以選擇請求相機的標籤。但請注意，這需要用戶獲得存取攝影機的許可，如果尚未獲得許可，系統會要求用戶授予該許可。如果沒有特別要求，設備標籤將盡力確定，即，如果已授予權限，則返回實際標籤，否則返回後備標籤。如果您想要求相機標籤，建議在 QrScanner 實例成功啟動後呼叫listCameras ，因為此時使用者已經授予了他的權限。
QrScanner . listCameras ( ) ; // async; without requesting camera labels
QrScanner . listCameras ( true ) ; // async; requesting camera labels, potentially asking the user for permission您可以變更要使用的首選相機。首選項可以是listCameras回傳的裝置 ID，也可以是指定為'environment'或'user'面向模式。請注意，不能保證該偏好實際上可以滿足。
qrScanner . setCamera ( facingModeOrDeviceId ) ; // async預設情況下，掃描器會在明亮的背景上掃描深色 QR 碼。您可以更改此行為以掃描深色背景上的明亮 QR 碼或同時掃描兩者：
qrScanner . setInversionMode ( inversionMode ) ;其中inversionMode可以是original 、 invert或both兼具。網路攝影機掃描的預設值為原始both ，單一影像掃描的預設值為original 。
更改灰階計算中紅色、綠色和藍色的權重，以提高特定顏色 QR 碼的對比：
qrScanner . setGrayscaleWeights ( red , green , blue , useIntegerApproximation = true ) ;如果useIntegerApproximation === true則red 、 green和blue總和應為 256，否則為1 。預設情況下，使用這些值。
在支援的瀏覽器上，您可以檢查目前使用的相機是否有閃光燈並開啟或關閉它。請注意，掃描器成功啟動後應呼叫 hasFlash，以避免僅為了查詢是否支援閃光燈而需要開啟臨時相機串流，從而可能要求使用者存取相機。
qrScanner . hasFlash ( ) ; // check whether the browser and used camera support turning the flash on; async.
qrScanner . isFlashOn ( ) ; // check whether the flash is on
qrScanner . turnFlashOn ( ) ; // turn the flash on if supported; async
qrScanner . turnFlashOff ( ) ; // turn the flash off if supported; async
qrScanner . toggleFlash ( ) ; // toggle the flash if supported; async.如果不再需要 QR 掃描儀，您可以銷毀它：
qrScanner . destroy ( ) ;
qrScanner = null ;這將停止攝影機串流和網路工作人員並清理事件偵聽器。二維碼掃描器被破壞後將無法正常運作。
該專案是在 qr-scanner.min.js 中與 qr-scanner-worker.min.js 結合預先建構的。僅當您想要更改 /src 資料夾中的程式碼時才需要自行建置。建置需要 NodeJs。
安裝所需的建置包：
yarn建築：
yarn build
