javascript 使用相机从网页读取二维码。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17652017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read qrcode from a web page with camera.
提问by Sclerato
Im looking for a solution to read a QRCode on a webpage.
我正在寻找一种解决方案来读取网页上的二维码。
Lets say I've generated with PHP and some library (zxing or something else) a QRCode and its printed on a piece of paper, ok?
假设我已经用 PHP 和一些库（zxing 或其他东西）生成了一个二维码并将其打印在一张纸上，好吗？
What i would like to do now, is to read it back with tablet/smartphone throught a web-page. I browse to that page, it asks me to aim the QRCode with the camera, and then the scanned content is sent back to the page that decodes it.
我现在想做的是通过网页用平板电脑/智能手机阅读。我浏览到该页面，它要求我用相机瞄准 QRCode，然后将扫描的内容发送回对其进行解码的页面。
There's something out there to handle this without the need to use an Android/iOS app? It could be another type of 2D barcode aswell, not exclusively a QRCode.
有什么东西可以在不需要使用 Android/iOS 应用程序的情况下处理这个问题？它也可以是另一种类型的二维条码，而不仅仅是二维码。
TY
泰
采纳答案by edi9999
I have once worked with Lazarsoft's jsqrcode
我曾经与 Lazarsoft 合作过 jsqrcode
It worked fine in the browser, and I know he made a demo to test on a phone with camera.
它在浏览器中运行良好，我知道他做了一个演示来在带摄像头的手机上进行测试。
Here is his repository: https://github.com/LazarSoft/jsqrcode
这是他的存储库：https: //github.com/LazarSoft/jsqrcode
For camera support: use the CamCanvas API: http://www.taboca.com/p/camcanvas/
对于相机支持：使用 CamCanvas API：http://www.taboca.com/p/camcanvas/
回答by Codemaker
You can read QR Codes using instascan.
您可以使用instascan读取二维码。
Copy instascan.min.js from the releases page and load with:
从发布页面复制 instascan.min.js 并加载：
<script type="text/javascript" src="instascan.min.js"></script>
Sample code to read QR Code.
读取二维码的示例代码。
<!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>
回答by maraca
For me all tests with LazarSoft failed on all devices (it couldn't focus correctly). That's why I propose another solution here. It needs an app, BUT it is an existing one, so you don't have to write specific apps for the different devices.
对我来说，所有使用 LazarSoft 的测试在所有设备上都失败了（它无法正确聚焦）。这就是我在这里提出另一个解决方案的原因。它需要一个应用程序，但它是一个现有的应用程序，因此您不必为不同的设备编写特定的应用程序。
Use the Barcode Scanner app by ZXing!Yes it is possible without a roundtrip to the server, contrary to what almost any source on the net is telling you. This app proved to be very reliable under various conditions (Volume+ to switch on the light) where other scanners failed. https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en
使用 ZXing 的 Barcode Scanner 应用程序！是的，没有往返服务器是可能的，这与网络上几乎所有来源告诉您的情况相反。事实证明，该应用程序在其他扫描仪出现故障的各种条件下（音量+ 打开灯）非常可靠。 https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=en
Limitations:
限制：
The barcode scanner app and its callback mechanism currently only work on android and ios (others are planned).
Obviously the solution only works on devices that have a camera and the app installed.
条码扫描仪应用程序及其回调机制目前仅适用于 android 和 ios（其他计划中）。
显然，该解决方案仅适用于安装了摄像头和应用程序的设备。
Solution:
解决方案：
- Trigger mechanism: The barcode scanner is opened when the following URI is opened:
http://zxing.appspot.com/scan?... Callback: With
ret=...a callback URI can be specified. This is the site with the code that is handling the scan, it is possible to use the same site that triggered the scanner, but it will be a little more complicated and not explained here (still no roundtrip to the server is needed). With{CODE}it is specified where the scanned data is inserted. Note that the callback URI has to be escaped.For example:
http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fscan.htm%23%7BCODE%7D(unescaped:...ret=http://foo.com/scan.htm#{CODE})Important:You have to use the anchor
#to retrieve the code, otherwise the solution is not going to work (because of caching, see below).Cache Manifest: Create a cache manifest, add
scan.htmto the cached entries and add the manifest to site which opens the scanner (<html cache="foo.appcache">). Content of the file:CACHE MANIFEST CACHE: scan.htm NETWORK: *Process the scan: Here is an example for
scan.htm:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var code = window.location.hash.substr(1); ... </script> </body> </html>
- 触发机制：打开以下 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}）重要提示：您必须使用锚点
#来检索代码，否则该解决方案将不起作用（因为缓存，见下文）。缓存清单：创建缓存清单，添加
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>
Explanation
解释
Because the site is cached, no roundtrip to the server is required. This works, because with #you are always on the same site, if you would pass the code like ?code=...then you would have to cache all possible codes.
由于站点已缓存，因此不需要往返服务器。这是有效的，因为#您总是在同一个站点上，如果您要传递代码，?code=...那么您将不得不缓存所有可能的代码。
回答by Oren Pinsky
Instascan (https://github.com/schmich/instascan) has recently been published and solve many of the drawbacks of Lazarsoft's and the callback solution by @maraca. It uses HTML5 for camera and can be deployed off-line.
Instascan ( https://github.com/schmich/instascan) 最近发布并解决了 Lazarsoft 的许多缺点和@maraca 的回调解决方案。它使用 HTML5 作为摄像头，可以离线部署。
