Read qrcode from a web page with camera.
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.
I have once worked with Lazarsoft's 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
For camera support: use the CamCanvas API: http://www.taboca.com/p/camcanvas/
You can read QR Codes using instascan.
Copy instascan.min.js from the releases page and load with:
<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>