12

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

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

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

有什么东西可以在不需要使用 Android/iOS 应用程序的情况下处理这个问题?它也可以是另一种类型的二维条码,而不仅仅是二维码。

4

4 回答 4

8

我曾经与 Lazarsoft 合作过jsqrcode

它在浏览器中运行良好,我知道他做了一个演示来在带摄像头的手机上进行测试。

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

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

于 2013-07-15T10:31:15.613 回答
6

您可以使用instascan读取 QR 码。

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

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

读取二维码的示例代码。

<!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>
于 2018-07-04T05:19:59.290 回答
1

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

于 2017-07-18T17:52:02.930 回答
-1

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

使用 ZXing 的 Barcode Scanner 应用程序!是的,无需往返服务器是可能的,这与网络上几乎所有来源告诉您的相反。这个应用程序在其他扫描仪失败的各种条件下(音量+打开灯)被证明是非常可靠的。 https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en

限制:

  1. 条码扫描器应用程序及其回调机制目前仅适用于 android 和 ios(其他计划中)。

  2. 显然,该解决方案仅适用于安装了摄像头和应用程序的设备。

解决方案:

  1. 触发机制:打开以下 URI 时会打开条码扫描器:http://zxing.appspot.com/scan?...
  2. 回调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}:)

    重要提示:您必须使用锚#来检索代码,否则该解决方案将不起作用(因为缓存,见下文)。

  3. 缓存清单:创建缓存清单,添加scan.htm到缓存条目并将清单添加到打开扫描仪的站点(<html cache="foo.appcache">)。文件内容:

    CACHE MANIFEST
    
    CACHE:
    scan.htm
    
    NETWORK:
    *
    
  4. 处理扫描:这是一个示例scan.htm

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

解释

因为站点是缓存的,所以不需要到服务器的往返。这是可行的,因为#您总是在同一个站点上,如果您像这样传递代码,?code=...那么您将不得不缓存所有可能的代码。

于 2015-04-16T03:51:50.473 回答