使用jsQR识别二维码

1.关联

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

2.解决方法

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

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

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

3.实现代码

下面是实现的脚本

4.发布到IIS

如下图所示两个文件：

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

 5.效果图

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

例子下载