h5端呼起摄像头扫描二维码并解析

「爱情、让人受尽委屈。」 2022-08-19 14:20 30阅读 0赞

###  ###

### 2016年6月29日补充： ###

最近做了一些与表单相关的项目，使用了h5的`input`控件，在使用过程中遇到了很多的坑。也包括与这篇文章相关的。

首先我们应该知道使用h5新提供的属性`getUserMedia`这个属性，是可以调取系统的摄像头进行拍照或者是摄像的，但是兼容性支持的不好，所以当我们需要获取系统的多媒体权限时我们都不会采用这个属性。

使用`<input type="file">`标签我们可以间接的呼起系统选择文件的窗口，来读取系统文件。但是在WebView中，因为安卓权限的问题，我们是没办法直接获取读取文件这个操作的。而在原生的浏览器中是不存在这个问题的。所以选择使用这个`input`的时候一定要注意自己的页面是主要运行在webview中还是浏览器中。如果注意运行在客户端的webvie中，是需要客户端的同学支持的。

在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。  
参考文章：  
[http://blog.csdn.net/hvkcoder/article/details/51365191][http_blog.csdn.net_hvkcoder_article_details_51365191]

[https://forums.developer.apple.com/thread/22726][https_forums.developer.apple.com_thread_22726]

[http://www.cnblogs.com/soaringEveryday/p/4495221.html][http_www.cnblogs.com_soaringEveryday_p_4495221.html]

[http://stackoverflow.com/questions/25942676/ios-8-sdk-modal-uiwebview-and-camera-image-picker][http_stackoverflow.com_questions_25942676_ios-8-sdk-modal-uiwebview-and-camera-image-picker]

###     ###

### 引子： ###

最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与`native` 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。

第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库`jsqrcode`。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫`getUserMedia`的属性。该属性移动端的浏览器支持的都不是很好，所以只能间接的上传图片的方式解析二维码。

`getUserMedia`属性兼容浏览器列表：  
![这里写图片描述][20160120150032721]

首先感谢 jsqrcode 的开发者，提供这么优秀的解析二维码的代码，为我减少了很大的工作量。jsqrcode 地址：[点我][Link 1]

我的代码库地址：[点我][Link 2]

### 1.解决的问题： ###

1.能够在微博客户端呼起摄像头扫描二维码并且解析;  
2.能够在原生浏览器和微信客户端中扫描二维码并且解析;

#### 2.优点： ####

web端或者是 h5端可以直接完成扫码的工作；

#### 3.缺点： ####

图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近)，相对于 `native` 呼起的摄像头解析会有1-2秒的延时。

### 说明： ###

此插件需要配合`zepto.js` 或者 `jQuery.js`使用

### 使用方法： ###

1.在需要使用的页面按照下面顺序引入`lib`目录下的 js 文件

2.自定义按钮的 html 样式

为自定义的按钮添加自定义属性，属性名称为`node-type`  
为 input 按钮添加自定义的属性, 属性名称为`node-type`

> 因为该插件需要使用`<input type="file" />` ，该 html 结构在网页上面是有固定的显示样式，为了能够自定义按钮样式，我们可以按照下面的示例代码结构嵌套代码

<div>
            <div class="qr-btn" node-type="qr-btn">扫描二维码1
                <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
            </div>
        </div>

然后设置 `input` 按钮的 `css` 隐藏按钮，比如我使用的是属性选择器

input[node-type=jsbridge]{
        display:none;
    }

这里我们只需要按照自己的需要定义`class="qr-btn"`的样式即可。

3.在页面上初始化 Qrcode 对象

//初始化扫描二维码按钮，传入自定义的 node-type 属性
        $(function() {
            Qrcode.init($('[node-type=qr-btn]'));
        });

### 主要代码解析 ###

### 样例展示 ###

#### 1.呼起前的页面 ####

![这里写图片描述][20160120150102731]

#### 2.呼起后的页面 ####

![这里写图片描述][20160120150114934]

--------------------

如果您觉得对您有帮助，请点击下面的 star 给我一颗星。谢谢啦！

allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%26text%3DFollow%20%40zhiqiang21%26data.count.api%3D%2Fusers%2Fzhiqiang21%23followers%26data.count.href%3D%2Fzhiqiang21%2Ffollowers%26data.count.aria.label%3D%23%20followers%20on%20GitHub%26data.style%3Dmega%26data.icon%3D%26aria.label%3DFollow%20%40zhiqiang21%20on%20GitHub" style="margin: 0px; padding: 0px; font-family: 'PingFang SC'; font-size: 14px; border-style: none; border-width: initial; height: 28px; width: 198.5px;">    allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%2FWebComponent%26text%3DStar%26data.count.api%3D%2Frepos%2Fzhiqiang21%2FWebComponent%23stargazers\_count%26data.count.href%3D%2Fzhiqiang21%2FWebComponent%2Fstargazers%26data.count.aria.label%3D%23%20stargazers%20on%20GitHub%26data.style%3Dmega%26data.icon%3D%26aria.label%3DStar%20zhiqiang21%2FWebComponent%20on%20GitHub" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; height: 28px; width: 99.5px;">    allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%2FWebComponent%26text%3DWatch%26data.count.api%3D%2Frepos%2Fzhiqiang21%2FWebComponent%23subscribers\_count%26data.count.href%3D%2Fzhiqiang21%2FWebComponent%2Fwatchers%26data.count.aria.label%3D%23%20watchers%20on%20GitHub%26data.style%3Dmega%26data.icon%3D%26aria.label%3DWatch%20zhiqiang21%2FWebComponent%20on%20GitHub" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; height: 28px; width: 113px;">

[http_blog.csdn.net_hvkcoder_article_details_51365191]: http://blog.csdn.net/hvkcoder/article/details/51365191
[https_forums.developer.apple.com_thread_22726]: https://forums.developer.apple.com/thread/22726
[http_www.cnblogs.com_soaringEveryday_p_4495221.html]: http://www.cnblogs.com/soaringEveryday/p/4495221.html
[http_stackoverflow.com_questions_25942676_ios-8-sdk-modal-uiwebview-and-camera-image-picker]: http://stackoverflow.com/questions/25942676/ios-8-sdk-modal-uiwebview-and-camera-image-picker
[20160120150032721]: /images/20220731/df8c6b7c5dfc4b429a53f4f03450d952.png
[Link 1]: https://github.com/LazarSoft/jsqrcode
[Link 2]: https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode
[20160120150102731]: /images/20220731/a43c6d3bf781408b9b3ce01fd6501bf5.png
[20160120150114934]: /images/20220731/4992220fedee4fd3b44c0586e7715066.png