vue qrcode reader

瀏覽器中的一組用於檢測QR碼和各種其他條形碼格式的vue.js組件：

• QrcodeStream連續掃描相機流的幀。

• QrcodeDropZone是一個空的區域，您可以在其中拖放圖像進行解碼。

• QrcodeCapture是一個經典的文件上傳字段，立即掃描您選擇的所有文件。

所有組件都響應迅速。除此之外，接近零樣式。使它們適合您的佈局。用法簡單明了：

 <qrcode-stream @detect =“ onDetect”> </qrcode-stream>

方法： {
  OnDetect（dentedcodes）{// ...
  }}}

安裝

與NPM

跑步

NPM安裝VUE-QRCODE-READER

您可以獨立導入組件

import {qrcodeStream，qrcodedropzone，qrcodecapture}來自'vue-qrcode-reader'conconst mycomponent = {{
  //
  組件：{QrcodeStream，qrcodedropzone，qrcodecapture}

  // ...}

或立即註冊所有這些

從'vue'import vueqrcodereader中導入vue vue-qrcode-reader'vue.use（vueqrcodereader）

沒有NPM

包括以下JS文件：

https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js

確保在VUE之後包含它：

 <script src =“ ./ vue.js”> </script> <script src =“ ./ vue-qrcode-reader.umd.js”> </script>

所有組件均自動在全球註冊。使用烤肉串案例將它們引用在模板中：

 <qrcode-stream> </qrcode-stream> <qrcode-drop-Zone> </qrcode-drop-Zone> <qrcode-capture> </qrcode-capture>

故障排除⚡

使用QrcodeStream時，我看不到相機。

• 檢查它在演示頁面上是否有效。尤其是句柄錯誤演示，因為它會導致錯誤消息。

• 演示起作用，但在我的項目中不起作用：聆聽error事件以調查錯誤。

• 演示不起作用：仔細查看上面的瀏覽器支持部分。也許您的設備不受支持。

我正在Localhost上運行DEV服務器。如何在沒有HTTP的情況下在移動設備上測試？

• 如果您的設置是桌面Chrome + Android Chrome，請使用遠程調試，該調試允許您的Android設備訪問本地服務器作為Localhost。

• 否則，請使用諸如Ngrok或Serveo之類的反向代理，暫時使您的本地服務器與HTTPS公開可用。

• 默認情況下，還有大量無服務器/靜態託管服務可以免費部署Web應用程序（例如GitHub頁面， Gitlab頁面， Google Firebase ， Netlify ， Heroku ， Zeit ，Zeit，...））

我的一些QR碼沒有被檢測到。

• 確保QR碼周圍有一些白色邊框。

• 在上游軟件包中測試您的QR碼： barcode-detector > zxing-wasm > zxing-cpp ，並在第一次發生問題的最高級別存儲庫中進行文件檢測問題。

未檢測到1D條形碼。

formats prop的默認值是"['qr_code']" ，它反映了formats prop可用之前的設置。您需要在此道具中添加其他條形碼格式，以檢測這些類型的條形碼。查看此演示。

如何使其與Vue 2一起使用？

支持被刪除，但您可以降級到Vue-Qrcode-Reader V3。*或更低。

對於某些WASM文件，我在運行時會發現“無法獲取”錯誤。

WASM文件實現了QR碼檢測器。不幸的是，將此文件與軟件包捆綁在一起不是很方便。因此，默認情況下，我們在運行時從CDN獲取它。對於具有嚴格CSP策略的網絡中運行的離線應用程序或應用程序，這是一個問題。對於解決方法，請參見：＃354

儘管它有手電筒，但我的設備上不支持torch 。

對torch的支持在設備，相機，瀏覽器以及操作系統之間是不一致的。在某些設備上，後置攝像頭支撐torch ，但前置攝像頭也沒有，即使前置攝像頭實際上有手電筒。

此外，iOS根本不支持torch （最後一次檢查iOS 17.1）。

使用您的設備訪問此頁面。鏈接列表表示設備上安裝的所有相機。如果單擊，則應加載相機。在相機視圖下方打印了“功能”的JSON對象。如果它不包含鍵/值對"torch": true ，則該相機不支持手電筒。

此JSON對像作為camera-on的有效載荷提供了。