Html5 implements QR code scanning and parsing

This article mainly introduces the relevant information on scanning and parsing of QR codes in Html5. Friends who need it can refer to it.

Introduction:

Recently, there is a requirement for the company project. In the Weibo client, a button on the h5 page can interact with native and call the camera, scan the QR code and parse it. In non-Weibo clients (WeChat or native browser, such as safari), call the system's photo or upload image button, and parse the QR code by taking photos or uploading images.

The second solution requires parsing the QR code in the front-end js. This depends on a third-party parsing library jsqrcode. This library already supports the operation of calling the camera on the browser side, but relies on a property called getUserMedia. This attribute is not supported by the mobile browser, so you can only parse the QR code by uploading pictures indirectly.

The getUserMedia property is compatible with the browser list:

First of all, I would like to thank the developers of jsqrcode for providing such excellent code to parse QR codes, which has reduced my workload a lot. jsqrcode address: click me

My code base address: Click me

1. Problems solved:

1. Can call the camera on the Weibo client to scan the QR code and parse it;

2. Able to scan QR codes and parse them in native browsers and WeChat clients;

2. Advantages:

The web or h5 terminal can directly complete the code scanning work;

3. Disadvantages:

It is easy to fail if the picture is not clear (the lens needs to be very close to the QR code when taking pictures and scanning pictures), and there will be a delay of 1-2 seconds compared to the native camera analysis.

This plugin needs to be used with zepto.js or jQuery.js

1. Introduce the js files in the lib directory in the following order on the page you need to use