Question

我正在寻找在网页上阅读QRCode的解决方案。

假设我已经用PHP和一些库（zxing或其他东西）生成了一个QRCode并将其打印在一张纸上，好吗？

我现在想做的是用平板电脑/智能手机通过网页阅读。我浏览到那个页面，它要求我用相机瞄准QRCode，然后将扫描的内容发送回解码它的页面。

有什么东西可以处理这个而不需要使用Android / iOS应用程序？它可能是另一种类型的二维条码，也不仅仅是QR码。

TY

Answer 1

我曾经使用过Lazarsoft的jsqrcode

它在浏览器中运行良好，我知道他制作了一个用相机手机进行测试的演示。

这是他的存储库：https://github.com/LazarSoft/jsqrcode

对于相机支持：使用CamCanvas API：http://www.taboca.com/p/camcanvas/

Answer 2

您可以使用instascan读取QR码。

从发布页面复制instascan.min.js并加载：

<script type="text/javascript" src="instascan.min.js"></script>

读取QR码的示例代码。

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Reader using Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>

Answer 3

对我来说，LazarSoft的所有测试都在所有设备上都失败了（它无法正确聚焦）。这就是我在这里提出另一种解决方案的原因。它需要一个应用程序，但它是一个现有应用程序，因此您不必为不同的设备编写特定的应用程序。

使用ZXing的条形码扫描仪应用程序！是的，没有往返服务器是可能的，这与网上几乎所有来源都告诉你的情况相反。事实证明，这个应用程序在各种条件下（音量+打开灯光）非常可靠，其他扫描仪失败。 https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en

<强>限制：

条形码扫描器应用程序及其回调机制目前仅适用于Android和ios（其他计划）。
显然，此解决方案仅适用于安装了相机和应用的设备。

<强>解决方案：

触发机制：打开以下URI时，条形码扫描程序会打开：http://zxing.appspot.com/scan?...
回调：使用ret=...可以指定回调URI。这是处理扫描的代码的站点，可以使用触发扫描程序的同一站点，但它会稍微复杂一点，这里没有解释（仍然不需要到服务器的往返）。使用{CODE}指定扫描数据的插入位置。请注意，必须转义回调URI。

例如：

http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fscan.htm%23%7BCODE%7D（未转义：...ret=http://foo.com/scan.htm#{CODE}）

重要提示：您必须使用锚点#来检索代码，否则解决方案无效（因为缓存，请参见下文）。
< / LI>
缓存清单：创建缓存清单，将scan.htm添加到缓存条目，然后将清单添加到打开扫描程序的网站（<html cache="foo.appcache">）。文件内容：
```
CACHE MANIFEST

CACHE:
scan.htm

NETWORK:
*
```

处理扫描：以下是scan.htm的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script>
      var code = window.location.hash.substr(1);
      ...
    </script>
  </body>
</html>

解释

由于网站已缓存，因此无需向服务器进行往返。这是有效的，因为#始终在同一个网站上，如果你传递像?code=...这样的代码，那么你必须缓存所有可能的代码。

Answer 4

最近发布了Instascan（https://github.com/schmich/instascan），解决了Lazarsoft的许多缺点以及@maraca的回调解决方案。它使用HTML5作为摄像头，可以离线部署。

从带有摄像头的网页读取qrcode。

4 个答案:

解释