html5 qrcode下載 - html5 qrcode原始碼下載

html5 qrcode

其他源碼

Version 2.3.8

下載

Html5二維碼

重要 - 為該專案尋找新業主。

如有興趣，請聯絡[email protected] 。

Html5二維碼

重要該項目處於維護模式，直至另行通知。作者暫時無法進行任何錯誤修復或改進。拉取請求也暫時不會被合併。如果您有可以維護的分叉 - 請將詳細資訊分享至 [email protected]。我很高興在這裡為他們做廣告！可以按原樣使用該項目。範例：scanapp.org。

適用於網路的輕量級跨平台 QR 碼和條碼掃描庫

使用這個輕量級程式庫可以輕鬆/快速地將 QR 碼、條碼和其他常見程式碼掃描功能整合到您的 Web 應用程式中。

主要亮點

？支援掃描不同類型的條碼和二維碼。
？支援不同平台：Android、IOS、MacO、Windows 或 Linux
支援不同的瀏覽器，如 Chrome、Firefox、Safari、Edge、Opera ...
？支援相機掃描以及本機檔案掃描
➡️ 附帶一個帶有 UI 的端到端庫以及一個用於構建您自己的 UI 的低級庫。
？支援自訂，如閃光燈/手電筒支援、縮放等。

支援兩種API

Html5QrcodeScanner — 帶有 UI 的端對端掃描器，整合不到十行程式碼。
Html5Qrcode — 一組強大的 API，您可以使用它來建立 UI，而無需擔心相機設定、處理權限、讀取程式碼等。

支援掃描裝置上的本機檔案是一項新增功能，對於不支援智慧型手機中內聯網路攝影機存取的網路瀏覽器很有幫助。注意：這不會將文件上傳到任何伺服器 - 一切都在本地完成。


scanapp.org 上的演示	qrcode.minhazav.dev 上的示範 -掃描不同類型的程式碼

我們需要您的幫助！

透過支持該計畫的贊助目標來幫助激勵功能開發和錯誤修復。請參閱此處贊助的功能請求清單。

文件

該專案的文檔已移至 scanapp.org/html5-qrcode-docs。

入門
支援的框架
支援的一維和二維程式碼格式
詳細的API文檔

支援的平台

我們正在不斷努力增加對越來越多平台的支援。如果您發現庫無法運作的平台或瀏覽器，請隨時提出問題。檢查演示連結進行測試。

傳奇

意味著全面支援 - 內聯網路攝影機和基於文件
意味著部分支援 - 僅基於文件，網路攝影機正在進行中

電腦/蘋果電腦

火狐瀏覽器	鉻合金	狩獵之旅	歌劇	邊緣

安卓

鉻合金	火狐瀏覽器	邊緣	歌劇	迷你歌劇院	UC

IOS

狩獵之旅	鉻合金	火狐瀏覽器	邊緣
	*	*

* 支援 IOS 版本 >= 15.1
在15.1版本之前，iOS中的Chrome、Firefox和其他瀏覽器使用Webkit for IOS，它們還沒有網路攝影機權限。修復 iOS 支援方面有一個持續存在的問題 - issues/14

框架支援

該庫可以輕鬆地與其他幾個框架一起使用，我已經為其中一些框架添加了範例，並將繼續添加更多範例。


html5	VueJs	電子學	反應	點燃

支援的程式碼格式

掃碼依賴Zxing-js庫。我們將在此基礎上努力添加對更多類型的程式碼掃描的支援。如果您認為某種類型的程式碼會有所幫助，請提交功能請求。

程式碼	例子
QR 圖碼
阿茲特克
代碼_39
代碼_93
代碼_128
國際乒聯
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
數據矩陣
最大程式碼*
RSS_14*
RSS_擴充*

*我們與本機 BarcodeDetector API 整合的實驗性整合不支援格式（了解更多）。

描述 - 查看演示

在 scanapp.org 上查看端到端掃描器體驗。

這是一個跨平台 JavaScript 程式庫，用於將 QR 碼、條碼和一些其他類型的程式碼掃描功能整合到在 HTML5 相容瀏覽器上運行的應用程式。

支持：

查詢設備上的攝影機（需使用者權限）
渲染即時相機畫面，並具有易於使用的掃描使用者介面
支援掃描各種二維碼、條碼等格式
支援從設備中選擇圖片檔案進行掃碼

如何使用

在 scanapp.org/html5-qrcode-docs 上尋找如何使用此程式庫的詳細指南。

示範

掃描此圖片或造訪 blog.minhazav.dev/research/html5-qrcode.html

欲了解更多信息

查看這些有關如何使用該庫的文章：

使用 HTML 和 JavaScript 的 QR 和條碼掃描儀
HTML5 二維碼掃描 — 推出 v1.0.1，無需 jQuery 依賴，並重構了基於 Promise 的 API。
使用 JavaScript 掃描 HTML5 二維碼 - 新增掃描本機檔案和使用預設相機的支援 (v1.0.5)

截圖

圖：MacBook Pro 上運行的 Google Chrome 的螢幕截圖

文件

完整的 API 文件請造訪 scanapp.org/html5-qrcode-docs/docs/apis。

`start()`方法中的額外選用`configuration`

可用於設定掃描行為和使用者介面 (UI) 的設定物件。大多數欄位都有預設屬性，除非提供不同的值，否則將使用這些預設屬性。如果你不想覆蓋任何東西，你可以傳入一個空物件{} 。

`fps` — 整數，範例 = 10

AKA 每秒幀數，預設值為 2，但可以增加該值以獲得更快的掃描速度。增加過高的值可能會影響效能。值>1000將會失敗。

`qrbox` — `QrDimensions`或`QrDimensionFunction` （可選），範例 = `{ width: 250, height: 250 }`

使用此屬性可以限制要用於掃描的取景器區域。取景器的其餘部分將被遮蔽。例如，透過傳遞 config { qrbox : { width: 250, height: 250 } } ，螢幕將如下所示：

這可用於設定矩形掃描區域，配置如下：

 let config = { qrbox : { width : 400 , height : 150 } }

此配置也接受類型的函數

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

這允許您根據視訊尺寸設定動態 QR 框尺寸。例如，請參閱此部落格文章：在 Html5-qrcode 中設定動態 QR 框大小 - ScanApp 博客

這對於條碼掃描來說可能是理想的。

如果未設定此值，則不會渲染陰影 QR 框，且掃描器將掃描視訊串流的整個區域。

`aspectRatio` — 浮點型，例 1.777778 為 16:9 寬高比

使用此屬性以特定的寬高比呈現視訊來源。傳遞像100000:1這樣的非標準寬高比可能會導致視訊來源甚至不顯示。理想值可以是：

價值	縱橫比	使用案例
1.333334	4:3	標準相機長寬比
1.777778	16:9	全螢幕、戲院級
1.0	1:1	廣場景觀

如果不傳遞任何值，則整個取景器將用於掃描。注意：該值必須小於QR code HTML element的寬度和高度。

`disableFlip` — 布林值（可選），預設 = false

預設情況下，掃描器可以掃描水平翻轉的二維碼。這也允許使用有時會鏡像的行動裝置上的前置鏡頭掃描二維碼。預設情況下這是false ，我建議僅在以下情況下更改此設定：

您確定相機饋送無法鏡像（水平翻轉）
啟用此功能後，您將面臨效能問題。

這是普通二維碼和鏡像二維碼的範例

普通二維碼	鏡像二維碼

`rememberLastUsedCamera` — 布林值（可選），預設 = true

如果為true則使用者最後使用的相機以及天氣或未授予許可將被記住在本地儲存中。如果使用者先前已授予權限 - 使用者介面中的請求權限選項將被跳過，最後選擇的相機將自動啟動進行掃描。

如果為true則庫應記住先前是否授予了相機權限以及上次使用的相機是什麼。如果已授予“相機”權限，則將自動*開始掃描先前使用過的相機的二維碼。

`supportedScanTypes` - `Array<Html5QrcodeScanType> | []`

僅Html5QrcodeScanner支援此功能。

預設 = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

此欄位可用於：

限制對基於Camera或File掃描的支援。
更改預設掃描類型。

使用方法：

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

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

對於基於文件的掃描，僅選擇：

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

為了像現在一樣支援兩者，您可以忽略此欄位或設定為：

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

若要將基於檔案的掃描設為默認，請變更順序：

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

`showTorchButtonIfSupported` - `boolean | undefined`

僅Html5QrcodeScanner支援此功能。

如果true渲染的 UI 將有按鈕根據裝置 + 瀏覽器支援開啟或關閉閃光燈。預設值為false 。

僅掃描特定格式

預設情況下，會根據所有支援的程式碼格式掃描相機流和影像檔案。 Html5QrcodeScanner和Html5Qrcode類別都可以設定為僅支援支援格式的子集。支援的格式在枚舉 Html5QrcodeSupportedFormats 中定義。

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

我建議僅當您需要明確忽略對某些格式的支援或出於效能原因想要減少每秒完成的掃描次數時才使用此選項。

僅使用`Html5Qrcode`掃描 QR 碼

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ;

使用`Html5QrcodeScanner`僅掃描 QR 碼和 UPC 碼

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

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

實驗特點

該庫現在支援一些實驗性功能，這些功能在庫中受支持，但由於測試有限或所使用的底層 API 的兼容性有限，不建議用於生產使用。在這裡閱讀更多相關資訊。一些實驗性功能包括：

支援 BarcodeDetector JavaScript API

如何修改和構建

程式碼變更只能對 /src 進行。
執行npm install以安裝所有相依性。
運行npm run-script build來建立 JavaScript 輸出。輸出 JavaScript 發行版建構為 /dist/html5-qrcode.min.js。如果您在 Windows 作業系統上進行開發，請執行npm run-script build-windows 。
測試
- 運行npm test
- 在發送拉取請求之前執行測試，所有測試都應該執行。
- 請新增 PR 中發送的新行為的測試。
發送拉取請求
- 僅包含對./src程式碼變更。不要手動更改./dist 。
- 在拉取請求中加入評論，例如
```
 @all-contributors please add @mebjas for this new feature or tests
```
- 為了徵集您的貢獻，機器人將更新貢獻文件。
- 程式碼將由作者批量建立和發布。