守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 580|回复: 0

[技术资料] h5端呼起摄像头扫描二维码并解析

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-3 12:16:21 | 显示全部楼层 |阅读模式

    2016年6月29日补充:
    最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑。也包括与这篇文章相关的。

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

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

    在IOS的某些系统版本中也会出现这个问题。具体的可以参考下面的参考文章。
    参考文章:

    http://blog.csdn.net/hvkcoder/article/details/51365191

    https://forums.developer.apple.com/thread/22726

    http://www.cnblogs.com/soaringEveryday/p/4495221.html

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

    引子:

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

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

    getUserMedia属性兼容浏览器列表: 这里写图片描述

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

    我的代码库地址:点我

    1.解决的问题:

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

    2.优点:

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

    3.缺点:

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

    说明:

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

    使用方法:

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

        <script src="lib/zepto.js"></script>
        <script src="lib/qrcode.lib.min.js"></script>
        <script src="lib/qrcode.js"></script>

    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]'));
        });

    主要代码解析

    (function($) {
        var Qrcode = function(tempBtn) {
            var _this_ = this;
            var isWeiboWebView = /__weibo__/.test(navigator.userAgent);
    
            if (isWeiboWebView) {
                if (window.WeiboJSBridge) {
                    _this_.bridgeReady(tempBtn);
                } else {
                    document.addEventListener('WeiboJSBridgeReady', function() {
                        _this_.bridgeReady(tempBtn);
                    });
                }
            } else {
                _this_.nativeReady(tempBtn);
            }
        };
    
        Qrcode.prototype = {
            nativeReady: function(tempBtn) {
                $('[node-type=jsbridge]',tempBtn).on('click',function(e){
                    e.stopPropagation();
                });
    
                $(tempBtn).bind('click',function(e){
                    $(this).find('input[node-type=jsbridge]').trigger('click');
                });
    
                $(tempBtn).bind('change', this.getImgFile);
            },
            bridgeReady: function(tempBtn) {
                $(tempBtn).bind('click', this.weiBoBridge);
            },
            weiBoBridge: function() {
                window.WeiboJSBridge.invoke('scanQRCode', null, function(params) {
                    //得到扫码的结果
                    $('.result-qrcode').append(params.result + '<br/>');
                });
            },
            getImgFile: function() {
                var _this_ = this;
                var inputDom = $(this).find('input[node-type=jsbridge]');
                var imgFile = inputDom[0].files;
                var oFile = imgFile[0];
                var oFReader = new FileReader();
                var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    
                if (imgFile.length === 0) {
                    return;
                }
    
                if (!rFilter.test(oFile.type)) {
                    alert("选择正确的图片格式!");
                    return;
                }
    
                oFReader.onload = function(oFREvent) {
    
                    qrcode.decode(oFREvent.target.result);
                    qrcode.callback = function(data) {
                        //得到扫码的结果
                        $('.result-qrcode').append(data + '<br/>');
                    };
                };
    
                oFReader.readAsDataURL(oFile);
            },
            destory: function() {
                $(tempBtn).off('click');
            }
        };
    
        Qrcode.init = function(tempBtn) {
            var _this_ = this;
    
            tempBtn.each(function() {
                new _this_($(this));
            });
        };
        window.Qrcode = Qrcode;
    })(window.Zepto ? Zepto : jQuery);

    样例展示

    1.呼起前的页面

    这里写图片描述

    2.呼起后的页面

    这里写图片描述


    来源:http://div.io/topic/1562

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:17 , Processed in 0.046914 second(s), 37 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表