使用jsQR识别二维码

这篇具有很好参考价值的文章主要介绍了使用jsQR识别二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.关联

在《初识html5使用jsQR识别二维码》博文中我们已经初步了解jsQR识别带有QR码的图片。在现实环境中，我们常常使用手机扫码QR，那么应该怎样解决呢？？

2.解决方法

我们可以在手机浏览器的网页上调用摄像头，调用摄像头使用核心的API navigator.mediaDevices.getUserMedia 提示用户许可使用媒体输入，媒体输入会产生一个 MediaStream，里面包含了请求的媒体类型的轨道。

若用户成功使用，它返回一个 Promise 对象，成功后会 resolve 回调一个 MediaStream对象；若用户拒绝了使用权限，或者需要的媒体源不可用，promise 会 reject 回调一个 PermissionDeniedError 或者 NotFoundError 。

接着使用二维码解析库 JSQR扫描网络摄像头流，并将定位，提取和解析其中的任何 QR码。

3.实现代码

下面是实现的脚本

    <script type="text/javascript">
        var video = document.createElement("video");
        var canvasElement = document.getElementById("canvas");
        var canvas = canvasElement.getContext("2d");
 
		// 描边
        function drawLine(begin, end, color) {
            canvas.beginPath();
            canvas.moveTo(begin.x, begin.y);
            canvas.lineTo(end.x, end.y);
            canvas.lineWidth = 4;
            canvas.strokeStyle = color;
            canvas.stroke();
        }
 
        // 尝试打开手机上安装后置摄像头
        navigator.mediaDevices.getUserMedia({
			video: { facingMode: "environment" } 
		}).then(function (stream) {
            video.srcObject = stream;
			// 阻止IOS视频全屏
            video.setAttribute("playsinline", true); 
            video.play();
            requestAnimationFrame(tick);
        });
 
        function tick() {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                canvasElement.hidden = false;
 
                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
				
				// QR码解析
                var code = jsQR(
					imageData.data,   // 图像数据
					imageData.width,  // 宽度
					imageData.height, // 高度
					{
                    inversionAttempts: "dontInvert",
					}
				);
				
                if (code) {
                    drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
                    drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
                    drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
                    drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
					alert(code.data);
                }
            }
            requestAnimationFrame(tick);
        }
    </script>