javascript实现QR code扫描
本例基于instascan ： https://github.com/schmich/instascan
1. html
<video id="preview" width="500" height="500"></video>
<input type="text" class="form-control" id="txtScannedQR" style="display: none" placeholder="Scan Result" name="AssetTag"/>2. javascript
<script src="~/Scripts/instascan.min.js"></script>
<script type="text/javascript">
function checkQR() {
return $("#txtScannedQR").val() != "";
}
var scanner = new Instascan.Scanner(
{
video: document.getElementById('preview')
});
scanner.addListener('scan', function (content) {
$("#txtScannedQR").val(content);
alert(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
// on mobile pick the rear camera
if (cameras.length > 1) {
scanner.start(cameras[1]);
}
else if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
}
3. 如果运行遇到错误：
getusermedia() no longer works on insecure origins. to use this feature, you should consider switching your application to a secure origin, such as https
是因为这个功能需要https，要在web服务器安装ssl证书并打开443端口就可以了。