This article mainly introduces Html5 QR code scanning and parsing related information. If you need it, refer to the following introduction:
Recently, there is a demand for a company project. In the Weibo client, a button on the h5 page can interact with native to 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. In this way, jsqrcode is dependent on a third-party Parsing Library. This library supports calling the camera on the browser, but relies on a property called getUserMedia. This property is not supported by mobile browsers, so you can only parse the QR Code indirectly by uploading images.
List of getUserMedia attributes 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 may fail (the camera needs to scan the image very close to the QR code). The resolution delay is 1-2 seconds compared with that of the native camera.
Note:
This plug-in must be used with zepto. js or jQuery. js.
Usage:
1. Introduce the js files under the lib directory in the following order on the desired page
The Code is as follows: