使用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>

4.发布到IIS

如下图所示两个文件：

 安装下面方式新建站点，由于手机打开摄像头需要安全连接，需要使用https，所以发布网站的时候，需要用https协议。

 5.效果图

用手机打开网页扫描图片：

例子下载