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的有效载荷提供了。