H5 terminal calls the camera to scan the QR code and parse it

H5 terminal calls the camera to scan the QR code and parse it
Introduction:

Recently, the company has a requirement that a button on the h5 page on the Weibo client can worknativeInteractive call the camera, scan the QR code and parse it. In a non-Weibo client (or a native browser such as safari), call the system's photo taking or upload image button to take a photo or upload an image to parse the QR code.

The second solution needs to parse the QR code in front-end js. This depends on a third-party DNS library.jsqrcode. This library supports camera calling on the browser, but relies ongetUserMedia. This property is not supported by mobile browsers, so you can only parse the QR Code indirectly by uploading images.

getUserMediaList of property compatible browsers:

First of all, I would like to thank the developers of jsqrcode for providing such excellent code for parsing QR codes, which has greatly reduced my workload. Jsqrcode address: Click me

My code library address: Click me

1. Solved problems:

1. The Weibo client can call a camera to scan the QR code and parse it;
2. Scan and parse the QR code in the native browser and client;

2. Advantages:

The web client or h5 client can directly scan the Code;

3. Disadvantages:

If the image is not clear, resolution is easy to fail (the camera needs to scan the image very close to the QR code), relativenativeThe resolution delay of the starting camera is 1-2 seconds.

Note:

This plug-in must be used togetherzepto.jsOrjQuery.jsUse

Usage:

1. On the page to be used, follow the steps below to introducelibJs files under the Directory

<code class="sourceCode javascript hljs">    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fzepto.js%22%3E%3C%2Fscript%3E-->    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.lib.min.js%22%3E%3C%2Fscript%3E-->    <!--{cke_protected}%3Cscript%20src%3D%22lib%2Fqrcode.js%22%3E%3C%2Fscript%3E--></code>

2. Custom button html Style
Because this plug-in needs to be usedThe html structure has a fixed display style on the webpage. to customize the button style, We can nest the code according to the following sample code structure.

<Code class = "sourceCode html hljs xml"> scan QR code 1 <input node-type = "jsbridge" data-cke-saved-name = "myPhoto" name = "myPhoto" value = "Scan QR code 1" data-cke-editable = "1" contenteditable = "false" type = "file"> </code>

Then setinputButtoncssHide the button. For example, I use the attribute selector.

input[node-type=jsbridge]{    visibility: hidden;}

Here we only need to define according to our own needsclass="qr-btn".

3. initialize the Qrcode object on the page

// Initialize the scan QR code button and pass in the Custom node-type attribute $ (function () {Qrcode. init ($ ('[node-type = jsbridge]');});

Main code parsing

(Function ($) {var Qrcode = function (tempBtn) {// This object only supports parsing in the microdomain, that is to say, if (window. weiboJSBridge) {$ (tempBtn ). on ('click', this. weiBoBridge);} else {$ (tempBtn ). on ('change', this. getImgFile) ;}}; Qrcode. prototype = {weiBoBridge: function () {WeiboJSBridge. invoke ('scanqrcode', null, function (params) {// obtain the location of the scan result. href = params. result ;}) ;}, getImgFile: function () {var _ t His _ = this; var imgFile = $ (this) [0]. files; var oFile = imgFile [0]; var oFReader = new FileReader (); var rFilter =/^ (?: Image \/bmp | image \/cis \-cod | image \/gif | image \/ief | 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 ("select the correct image format! "); Return;} // code oFReader executed after the image is read successfully. onload = function (oFREvent) {qrcode.decode(oFREvent.tar get. result); qrcode. callback = function (data) {// get the location of the scan result. href = data ;};}; oFReader. readAsDataURL (oFile) ;}, destory: function () {$ (tempBtn ). off ('click') ;}}; // initialize Qrcode. init = function (tempBtn) {var _ this _ = this; var inputDom; tempBtn. each (function () {new _ this _ ($ (this) ;}); $ ('[node-ty Pe = qr-btn] '). on ('click', function () {$ (this ). find ('[node-type = jsbridge]') [0]. click () ;}) ;}; window. qrcode = Qrcode;}) (window. zepto? Zepto: jQuery );

Example 1: page before calling

2. Page after the call

If you think it is helpful to you, click the star below to give me a star. Thank you!