我正在寻找一种在网页上读取 QRCode 的解决方案。
假设我已经用 PHP 和一些库(zxing 或其他东西)生成了一个 QRCode 并将其打印在一张纸上,好吗?
我现在想做的是用平板电脑/智能手机通过网页读回它。我浏览到那个页面,它要求我用相机对准二维码,然后将扫描的内容发送回解码它的页面。
有什么东西可以在不需要使用 Android/iOS 应用程序的情况下处理这个问题?它也可以是另一种类型的二维条码,而不仅仅是二维码。
泰
我正在寻找一种在网页上读取 QRCode 的解决方案。
假设我已经用 PHP 和一些库(zxing 或其他东西)生成了一个 QRCode 并将其打印在一张纸上,好吗?
我现在想做的是用平板电脑/智能手机通过网页读回它。我浏览到那个页面,它要求我用相机对准二维码,然后将扫描的内容发送回解码它的页面。
有什么东西可以在不需要使用 Android/iOS 应用程序的情况下处理这个问题?它也可以是另一种类型的二维条码,而不仅仅是二维码。
泰
我曾经与 Lazarsoft 合作过jsqrcode
它在浏览器中运行良好,我知道他做了一个演示来在带摄像头的手机上进行测试。
这是他的存储库:https ://github.com/LazarSoft/jsqrcode
对于相机支持:使用 CamCanvas API:http ://www.taboca.com/p/camcanvas/
您可以使用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>
Instascan ( https://github.com/schmich/instascan ) 最近发布并解决了 Lazarsoft 的许多缺点和@maraca 的回调解决方案。它使用 HTML5 作为摄像头,可以离线部署。
对我来说,在所有设备上使用 LazarSoft 的所有测试都失败了(它无法正确聚焦)。这就是为什么我在这里提出另一个解决方案。它需要一个应用程序,但它是一个现有的应用程序,因此您不必为不同的设备编写特定的应用程序。
使用 ZXing 的 Barcode Scanner 应用程序!是的,无需往返服务器是可能的,这与网络上几乎所有来源告诉您的相反。这个应用程序在其他扫描仪失败的各种条件下(音量+打开灯)被证明是非常可靠的。 https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en
限制:
条码扫描器应用程序及其回调机制目前仅适用于 android 和 ios(其他计划中)。
显然,该解决方案仅适用于安装了摄像头和应用程序的设备。
解决方案:
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}
:)
重要提示:您必须使用锚#
来检索代码,否则该解决方案将不起作用(因为缓存,见下文)。
缓存清单:创建缓存清单,添加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=...
那么您将不得不缓存所有可能的代码。